I am using CodeIgniter's pagination API. I found some issues when I click on particular page: it shows controller and pages in URL. I dont want to show all the details in URL.
I have large number of search criteria.
e.g.
http://localhost/myapp/search/pages/2&fromAge=25...... so on
Is there any way to handle it using POST method rather than GET?
Please help.
If you want to use the pagination with POST, there is a simple way to do that with the standard CI pagination and without Ajax. You can perform a POST instead of the GET
when one click on the pagination links.
For this you need an hidden field in the form (named page in my example) which contains the page number and you need to set the action attribute of the form with the link before submitting it (it is necessary for the pagination class to compute the current page). Find below a sample code in jquery :
// bind onclick event to the pagination links
$('.pagination a').click(function () {
var link = $(this).get(0).href; // get the link from the DOM object
var form = $('#form1'); // get the form you want to submit
var segments = link.split('/');
// assume the page number is the fifth parameter of the link
$('#page').val(segments[4]); // set a hidden field with the page number
form.attr('action', link); // set the action attribute of the form
form.submit(); // submit the form
return false; // avoid the default behaviour of the link
});
On the server side, you read the page number from the
POST field named page to perform the db query with pagination and you build the pagination links with the usual function
What about using AJAX?
http://tohin.wordpress.com/2008/08/12/codeigniter-ajax-pagination/
http://codeigniter.com/wiki/AJAX_Pagination_with_CI_Pagination_Library/
Related
ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.
I've the following problem...
My application uses the php, smarty templates and jQuery.
Inside the smarty template there is defined a form with POST method.
The action parameter of the form is defined as follows:
action={if isset($search_place)} {link->somePhpFunction($search_place) {/if}
...because I need to change the action depending on the POSTED parameter.
The input (text) with the "search_place" name is defined inside the form.
The submit button is linked to the jQuery function, as I need to perform some actions on the client side (value check, autocomplete, etc.).
When the button is clicked, I need to
The problem is that when I post the form by the jQuery button, the form will not take the
When the button is clicked then the jQuery handler is called where some checks/corrections are performed and then the page with the form is displayed.
The problem is, that before defining the action parametr from the form the search_place variable in not known and the php function is not called at all.
I've also tried to set a cookie in the button handler and to set the form action to the {$smarty.cookies.search_place} value but the problem changed into another one - the form allway performes action of the previous button click so it is necessary to click the button TWO TIMES to get the correct results.
It is also necessary to mention that there is no way to transfer the needed action parameter to the jQuery event handler as the php function selects the correct one from the large table in database. If this is possible, then it would be easy to change the action parameter from the jQuery function...
The only way I know is to use AJAX to get the right parametr and assign the correct action parametr from the button event handler but it is not the right solution for me as many of my site visitors have not the browser javascipt enabled.
The solution could be also to perform (programmaticaly) one more click on the button from the jQuery event handler but I don't know how to do it...
Any help or idea how to solve this issue will be greatly appreciated...
Thank you in advance. JaM
Try the following:
<form onsubmit="return validationFunction()">
and let this function validate the data and return true if correct and false if not.
now for the js. don't call something like
$("#someForm").submit();
instead use:
if(validationFunction()){
$("#someForm").submit();
}
Update
finally if your validationFunction will do some server-side work
Then instead some variable like
var formSubmitted = false;
then onSubmit return false; and set the formSubmitted to true, and do your ajax call, and when the ajax call is done, check the formSubmitted if it's true then submit the form if not then show some error...
Hello all I'm new to this whole thing still.
I would like some help figuring out how to do this please. I can pull info out of a database and put stuff in using ajax/javascript but I cant figure out how to complete the problem below. I want to be able to make my php form submit and update with out page refresh.
Example.
Page1. Main page
-Drop down
javascript/Ajax on change of dropdown get info from page 2.
Form from page two now displays without page refresh on change of drop down.
When submit button from page two is pressed inserts form data into Mysql database.
Once new data is submitted into sql data base the form updates and shows data in mysql database for the specific ID in the drop down.
Page2.
form drop down info.
Form is filled with info if there is data in the database for it.
Javascript/Ajax on button submit sends input fields to page 3
Page 3.
insert data into mysql using javascript/ajax so no page refresh is required
Thanks
You need to loop through all the input fields in your form, package them into a query string, and send that to your form processing page.
Something like
var queryString = '';
for(var i = 0; i < document.formName.elements.length; ++i) {
queryString += document.formName.elements[i].name + '=';
queryString += document.formName.elements[i].value + '&';
}
//trim off the last '&' here
If you're using select boxes, you'll have to identify them in the loop above and extract their value a little differently. The query string format I used here is for a POST query; in a GET query, you need to append this to the url of the form processing page with a '?'
Consider the following example using jQuery (though you could adapt this to raw js or a different js library):
function doSubmit(event) {
event.preventDefault();
var $this = $(this);
$.ajax({
url: $this.attr('action'),
type: 'post',
data: $this.serilaize(),
success(responseHtml) {
// assume responseHtml is the next form
var newForm = ajaxifiyForm($('form', responseHtml));
$this.unbind('submit').replaceWith(newForm);
}
});
return false;
}
function ajaxifyForm(form) {
return $(form).submit(doSubmit);
}
$(document).ready(function(){
ajaxifyForm($('#your-form'));
});
Here we rely on the first page load to have the form already included on the server side. When the DOM is ready we attach an event handler to the submit event of the form. This handler overrides the normal submission process and instead uses ajax. It submits to the URL we specified in the action attribute.
When a post is successful it takes the HTML response from that post and replaces the original form with it after applying the same handler we used on the original form. This relies on the assumption that the php script(s) we are posting to always return the next form with all its values filled out.
Keep in mind you can submit file data in this way. Youd need to use an iframe as an intermediary to do that (there are other ways to do this as well that doesnt use an iframe). you can google ajax file upload for solutions to that problem.
I'm using codeigniter for this project. I have a search form and search form results.
Now when I click search in search form I'm being redirected to search form result and I get results.
Is it possible to create div or table in search form which is hidden at first then call the search procedure and which results it returns to get them back in the page without reloading it?
Using jquery/ajax/php ? Thank you
I assume your search result view contains just a block of HTML for the search results (like a TABLE or somesuch, not a full HTML page with BODY)? If not update the view so it just contains the code for the results. Then you can just use the $.post method to submit the form get the view and then inject it into a DIV (or element of your choice):
$(document).ready(function() {
$('#myformid').submit(function() {
var seralizedForm = $(this).serialize();
var url = $(this).attr('action');
$.post(url, serializedForm, function(results) {
$('#resultsDiv').html(results);
}, "html");
return false;
});
});
This should plug into your code with minimal modification. Change the "myformid" to an ID you set on the form tag, and change "resultsDiv" to the ID of an empty DIV you want the results to go into.
What this is going to do is bind this function to be called when the form is submitted (either by pressing enter or clicking a submit button). It will serialize the form (so you can send the values of the inputs to your controller) and get the URL to submit to by the normal "action" attribute that forms have.
It will then submit the form to that URL via a post, and the results will be loaded into a DIV with the ID of resultsDiv.
Yes, it is in fact possible.
for CodeIgniter, I'd write a controller function & view for what you would like to display. then, make an AJAX call to the page, which will be whatever you want to display on the page, and load it onto the current page.
If you are using jQuery, you can look into their Various AJAX Functions to make the ajax call and retrieve the data
I've got a CakePHP search form that has 'type'=>'get'. Basically, one of the elements in the form is a submit button of type image. When the form is posted, in the URL I always get these x & y coordinates of the image submit button:
http://site.com/controller/action?x=22&y=36&query=hello
Is there any way I can prevent the coordinates from showing up in the URL? The reason is so that someone else could use the same URL to perform the same search, without that unintuitive stuff in the link.
Thanks!
You could use some javascript on the button:
document.getElementById('myImageButton').onclick = function() {
this.form.submit();
return false;
};
Alternatively, in your controller in the beforeFilter function, you could check for the presence of the unwanted variables, strip them out and redirect to the nice URL. This does mean there'll be 2 HTTP requests made though.
Sounds like you are looking to do a Post/Redirect/Get.
Here are two examples of doing this in CakePHP:
Searching on surname
Searching on multiple fields
Advantages of redirecting a POST to a GET request are:
Users don't get the "Do you want to resubmit?" dialog if they refresh
The resulting page/query can be bookmarked
You can utilise CakePHP's built-in SEF routing, so instead of URLs with /search?q=contact you can get /search/contact
Instead of using submit helper function, use button function and set button type to submit.
echo $this->Form->**button**($this->Html->image('header_search_icon.png'), array(**'type'=>'submit'**));