I'm trying to implement a search for my project , but i can't figure it out how to use ajax and get data to the view, can some one help me with this?
(this is my first project using codeignter and jquery)
regards,
Rangana
Here's a quick overview:
You need to create an input box (obviously).
On your js file, you give that input an event (keypress or anything you want) and when the event triggered you send an ajax post request to your controller method.
On your controller method you read the post request, then do a DB search, you return the result to your js by 'echoing' the DB search result using your preferred format (JSON, xml, etc).
You process the result on your js file using callback.
codeigniter and jquery are unbeatable
see if this can help ...
Related
So I'm trying to understand jQuery's .ajax function so that when I create my sites CMS I can update content on the backend asynchronously. I'm creating a simple form to start out. I pass the id of the database using php in the action href of the form. I pull the data from the form and convert it to json using the .serialize() jQuery function and then pass the action and the data into the .ajax function. On my the backend I use php to pull the $_POST and $_GET items and update the database accordingly. Everything works except that the site actually links to my backend php site... I just figure this out actually but I can post the answer for future references for people. Let me know if my answer is incorrect.
It looks like I was using type="submit" for the update input for the form. Because I was using action = "mybackendhref" in the form This caused it to link to the actually page that I wanted to use .ajax to push the data to instead. Changing to input type="button" caused everything to work smoothly.
*By "mybackendhref" I mean the actual site I want to push the data to using .ajax.
I'm hoping to create a fairly simple 'filter by multiple checkbox' search tool for a website... and I don't know where to begin with live updating results within a specified div as soon as someone selects/deselects a checkbox.
I hoping to build a filter system similar to this page:
http://thegatewayonline.com/articles/
... I want to have a system where clicking on each checkbox triggers a form submit, which loads results into a specified DIV on the same page.
Do you have any pointers towards, or code snippings, which could help me get started?
I am coding using PHP.
Thank you so much in advance for your help!
Joe
You'll want to issue an $.ajax call via jQuery when a checkbox is hit:
$('.checkbox').click(function() {
// ajax call here
});
Within the AJAX call, there is a callback function called success which contains a data parameter. You can echo a JSON object from a PHP page (which loads the available articles from your database) and have it passed as this parameter. Then, you simply decode this JSON object and print your content on the page.
JSON Reference: https://developer.mozilla.org/en/JSON
jQuery Ajax: http://api.jquery.com/jQuery.ajax/
I read on the web many things about creating form in jquery mobile and I didn't understand one thing. When I create a form and I would pass data through php, I hear jquery mobile serialize them and automatically pass over and if the form has been created using post method I can use them in an other page only using _POST array and nothing all. But I read also some people like it form with ajax use ajax to pass variable. So I didn't understand why use ajax?
The default for the jQuery Mobile framework is to submit forms via HTTP POST. Why? because then your web application has greater control over the UI when animating through pages, creating a smooth transition. Well, a better description can be found in the jqm docs here.
If you are looking to disable the default Ajax functionality, just append this to your form element:
data-ajax="false"
Hope this helps!
Edit to answer:
I have tried the following
$(document).ajaxSuccess (function(ev, xhr, s) {
document.write('url: ' + s.data);
});
And I just get a blank page - it does write out the right data though, just not the rest of the page
Hi, I am using flexigrid, and im posting parameters to from flexigrid.js to a php script to return json to the grid.
Flexigrid allows me to sort, filter etc. just as jquery should allow.
I want to catch the last posted parameters to flexigrid so that I can build a csv to allow download of the same (full) information.
However, flexigrid wont allow me to access the posted parameters.
Is this because flexigrid script keeps all those parameters in its own scope? I notice a variable/object called sitems inside firebug that basically has all the info I need, but javascript wont let me access it. Is there any way to access parameters sent to flexigrid? any help is much appreciated.
Cheers Ke
Well I'm not familiar with flexigrid but taking a quick peak at the source used on their homepage, it uses jQuery's $.ajax to make the requests to your PHP backend. So although the flexigrid API may not allow you to discover the parameters that it is posting, you can use the hooks that jQuery provides (the global ajax events) to monitor what is going on. In particular, ajaxSuccess will give you the info you want once the flexigrid request to your backend has returned successfully, at which point you can use the data that was posted to build your CSV link.
Try pasting this into the firebug console while on the flexigrid homepage, running it and then clicking a column header in the Example 3 (Flexigrid with a dynamic data):
$(document).ajaxSuccess(
function(ev, xhr, options) {
console.info(options.data);
}
);
You should see the data value that was used in the $.ajax request made by the flexegrid in your console output. e.g.
page=1&rp=15&sortname=printable_name&sortorder=asc&query=&qtype=name
So I am using "load" functions of jQuery to use ajax on my pages.
Can anyone write a small snippet of code using jquery load (or any ajax function which you think is the best) ? What I do is make a form, onsubmit pass to js, further using GET pass values into the load function and return false; though this works I am sure this is not the best way. Also this does NOT work in Opera.
It sounds like what you're trying to do is submit a form to an existing server-side script using AJAX. If so, consider using the jQuery form plugin. It will let you very easily make an existing form submit via AJAX.
If that's not your goal, we'll need a lot more detail about what — specifically — you're trying to accomplish.