Anyone done any AJAX filtering with Interactive Tools?

Hi Kevin, 

We do lots of ajax pages for custom programming jobs.  There's lots of ways to do it and it's not CMSB specific, so the majority of the tutorials online will probably work just fine.  Mostly you just use jQuery (or your favorite javascript library) to keep track of the current page criteria such as page num, etc. and then call a script that returns only the part of the page you want updated.

What I really like to do is have an all in one page that serves up both the original page and the ajax responses.  If this is too confusing you can always make a secondary page that is just serves up ajax content, but if you go the all-in-one route I like to have a single function that outputs the "ajax content" both on initial page load and then on subsequent ajax updates.

I whipped up a quick sample script as an example (attached).

Anyways, Hope that helps and points you in the right direction.

Dave thanks for the info.

I'm wondering if it's possible you can nudge me in the right direction to get me started.

I setup a test page that shows the basic functionality we are going to code on the site:
http://sundial.lancermedia.net

This page is generated from CMS Builder.  It is setup to display 12 records per page, with pagination.  On the left I have colors setup and will re-search based on the color selected.  The only color that has more than 12 is red (to show a single color spilling onto a second page.

What I'm looking to do is turn the pagination and the color select links into AJAX calls, so that the page doesn't change, but the results change.

Any help would be greatly appreciated to get me started.  jQuery is called on the page.

Thanks!

-Kevin

Hi Kevin, 

How much experience do you have with javascript and jQuery?  

If this is your first time doing an ajax page, you might find it helpful to do it up first with the body of the page that you want to change in an iframe.  Ajax pages has basically the same structure, you're just using javascript to load the page contents and updating a block of code in the current page isn't of updating the iframe.

Other tips would be to put the code you want to output each time into a php function so you can call it from ajax.

If you want to email me direct at dave@interactivetools.com and send me FTP details (email, don't post FTP details to the forum) as well as an url to this thread I can update the code to get you going in the right direction.

Hope that helps!

Dave,

Email sent off to you.  Thanks so much for looking into this.  You guys at Interactive Tools continue to be top notch when it comes to customer support and help.

-Kevin

Hi Kevin, 

Thanks, I've created a simple ajax page for you here and attached the files.
http://sundial.lancermedia.net/

I made it simpler so it's easier to adapt the code.  All the ajax content is in index_body_ajax.php.  All the ajax urls look like this: <a href="#" onclick="updateAjaxContent('index_body_ajax.php?color=blue'); return false;">blue</a>

If anyone else wants to create ajax pages I could probably make an even more generic javascript function.  Let me know any questions.

Give it a try and let me know how it goes.

Dave,

This is fantastic and just what I needed.  Thank you for this.

After only spending 20 minutes or so, it's pretty obvious what's going on.  I'm hoping to get a chance to play around a bit more tomorrow.

Tell me if this is correct.....basically what you've done is separated the actual data call (the CMS Builder query) and the layout code of that data into another PHP page.  This page is what takes the data from CMS builder, and lays it out how you want it shown.  The ajax call on the index.php page takes that entire set of data and inserts it into the div (in this case the right div).

Does that sound like it?

If so, I can definitely use this.  However, it already has my mind working.  For example, I'm guessing if you wanted to work with the returned data in pieces (not as a whole HTML set), that you could adjust the body_ajax page to return raw data and then have the main jQuery handle it and write it out itself?  Taking this back to the other site I sent, for example I'm guessing you'd have to do something like this to get the jQuery to write out and fade in each row one at a time?  Because the current way grabs the entire data set, you could only fade the whole thing in.

Thank so much again.....I'm hoping others will see this and be able to take advantage of your generosity.   Maybe you guys could setup a code example on the interactivetools.com site to house some of this type of code examples?

-Kevin

Hi Kevin, 

Yes, it basically works exactly how you described with the ajax page returning a html fragment that is inserted into the main page (replacing what was previously there).  And yes, you could have it return something else if needed, like JSON.

And to return multiple rows and then fade them in one at a time, yes you'd either need to return them as a JSON array and fade them in one at a time, or perhaps set their css visibility to hidden, return them all at once as an html fragment, and then use jQuery selectors to loop over the inserted rows and fade them in one after another.

Thank so much again.....I'm hoping others will see this and be able to take advantage of your generosity.   Maybe you guys could setup a code example on the interactivetools.com site to house some of this type of code examples?

Yea, maybe we'll made a code generator for it eventually.  We've got a pretty full queue right now but I think that's a great idea.

Hope that helps!

Dave,

Thanks for the info.

Have you had any experience with AJAX and Google as far as crawling ability.  As I see it, the main page contains no readable content for Google to crawl and index (because it's all dynamically inserted via JS).   How have you gotten around this?

-Kevin