Announcement

**tim2217** · Nov-27-2008, 12:16 AM

Stylesheet issue resolved

Good news on the stylesheet using AJAX. Simply copy/paste the styles from the search_template.html page and either place them directly in the header of the AJAX parent page, or as I did, copy them into another stylesheet you are using on that page.

Now it's just down to figuring out why the fields lose their value. Do we need to use something other than (this.form.formfield.value)?

**Ray** · Nov-27-2008, 12:42 AM

Originally posted by tim2217 View Post

1. Some of the Zoom input fields don't make their way to the function. The AJAX function I am using then sends the values to either the search.asp page - which is ultimately displayed using a div id tag on the same page. It clearly ONLY happens when two input fields have the same id (ie: radio button, select options)

I don't see how Zoom would be playing any part in this issue. I believe you're talking about the use of your onclick AJAX code, to retreive the values from the HTML search form, and create a HTTP GET request which is sent to "search.asp"?

You created your own HTML form right? You know you can add your own id= and class= attributes accordingly to help you retrieve them in JS? It's hard to imagine what you mean without a more specific example.

Originally posted by tim2217 View Post

2. Using AJAX means I have lost the ability to adjust the fonts/styles. The search.asp page won't refer to any stylesheet changes in search_template.html.

No, you just have to specify the styles in the page which is embedding the results from "search.asp", rather than in "search_template.html". Since the output from the search script is now being thrown inside a <div> in the middle of your page, the <html> tag, <head> tag, etc. are all irrelevant. You should be changing the template to accomodate this.

In many ways, it is similar to the steps mentioned in the second half of this FAQ about embedding search results into another script. Note in particular, the bit about the "Disable charset enforcing" option and the "Link Back URL" setting.

Originally posted by tim2217 View Post

3. If the results exceed 1 page, and a visitor clicks page 2, etc - they are pushed out of the ajax-loaded page.

See the Link Back URL setting in the abovementioned FAQ. This doesn't solve the problem entirely - your AJAX page needs to then pass the search variables back to the "search.asp" script. If you want to change these links to behave in an AJAX manner, that would require custom code changes within the ASP script.

Originally posted by tim2217 View Post

Perhaps my need to use ajax isn't understood - but I NEED to stay in the same page without the reload. I don't want to use frames.

Need is a strong word isn't it?

Perhaps it's worth pointing out that AJAX is not at all a simple implementation, and should only be attempted by very experienced programmers. You need a deep fundamental understanding of HTTP (the protocol), JavaScript (the language, as opposed to experience with using JavaScripts written by other people - big difference), HTML/CSS, the DOM, and XML. Oh and the ability to program in a server-side language like ASP (in this case), PHP, CGI or Perl to code the parts that respond to the AJAX requests.

Without any of the above, it is not even remotely possible. It is not a cut and paste thing that you can add to your site, ala DHTML or Javascripts or Flash. Just a warning in advance.

**Ray** · Nov-27-2008, 12:47 AM

Seems like you edited and added a post while I was making mine, in case you're wondering why some of my text is a little redundant now.

So to address the other things you added:

Originally posted by tim2217 View Post

Here's the code I'm using for my onclick call to the ajax function (#1) . I know the ajax function works - I just can't seem to get all the values there. (zoomperpage and the zoom_and fields error out as 'undefined'):

<input type="button" value="Go" onclick="populateSearchResults(this.form.zoom_quer y.value,this.form.zoomperpage.value,this.form.sear chcategory.value,this.form.zoom_and.value);" />

Well there's no "zoomperpage" field name by default. Unless you created one. There is "zoom_per_page", perhaps thats what you meant?

Also, where did "searchcategory" come from? there's a "zoom_cat" field. This one can be tricky actually, and have multiple values if you have "Allow multiple categories" enabled.

Originally posted by tim2217 View Post

Now it's just down to figuring out why the fields lose their value. Do we need to use something other than (this.form.formfield.value)?

You can get the values any way you like through the DOM. You are creating the HTML form so you can give it any class or id values, like I said above.

**Ray** · Nov-27-2008, 12:59 AM

Might also be worth pointing out that a proper implementation of AJAX should involve using the XML/CGI option of Zoom. This is a lot more work, because Zoom will return only XML and no layout formatting at all, or any end-user interface links like the "Next page of results" link mentioned before.

But that's how AJAX is supposed to work, the asynchronous remote call should get the minimum of data back in the form of XML, and the AJAX page calling it should be entirely responsible for formulating the layout, front-end, and options available such as those result page links, the option to sort, spelling suggestions, etc. etc.

**tim2217** · Nov-27-2008, 04:04 AM

Down to just the lost field values...

Thank you for your fast response Ray - it is really appreciated.

I keep reading about how easy ajax is, and was starting to feel like perhaps I'm just code-challenged. It's good to hear you agree it is not for the impatient.

Moving the stylesheet out of the search_template.html resolved the font issue entirely. As for the other challenges (form fields, page linking) I've verified all fields are named properly. I purposely changed the zoom_per_page to zoomperpage field name thinking perhaps it was due to the _. I am renaming the variable back again before it hits your search.asp page. The issue clearly isn't the _. I have verified the form matches the function references all the way through. The only way I can get the form value to carry over is to use a hidden field - as once I have two inputs with the same id - I get the undefined message when I test to view the value of the variable. I have created a field called searchcategory also - and that is carrying over nicely. It's not used with Zoom - just for my reference on the category they are searching. I think the issue is in this statement: <input type="button" value="Go" onclick="populateSearchResults(this.form.zoom_quer y.value, this.form.zoomperpage.value, this.form.searchcategory.value, this.form.zoom_and.value);" /> but I just don't know of another way to move the form values up to the function, and don't know DOM.

I will say I'm mostly there. The ajax page loads nicely. I just had to set the zoom_per_page to 1000 (to avoid the out of page link issue) with a hidden variable, and force the zoom_and to 0 - again with the hidden.

I will research the link back URL setting you mentioned. I do feel that with a couple minor challenges, implementing Zoom for ajax was accomplished very effectively. It's just taken a little while to work out the kinks. If you think it's worth posting, I can upload the major portions of the code I'm using for others to play with if interested.

Thanks again - this product is wonderful.

Announcement

Challenge using AJAX for displaying Zoom search results

Challenge using AJAX for displaying Zoom search results

Comment

Comment

Comment

Comment

Comment