PassMark Logo
Home » Forum

Announcement

Collapse
No announcement yet.

Challenge using AJAX for displaying Zoom search results

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Challenge using AJAX for displaying Zoom search results

    Well perhaps I'm a going about this wrong - as I can't be the only one with this issue. I need to have the Zoom search results be displayed in the same asp page without reloading the page (AJAX). I'm doing this by using and onclick= call to a javascript function on an input button(see below) - rather than using a submit button.

    I have three issues:
    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)

    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.

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

    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.

    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);" />

    Thank you in advance - hopefully there will be a solution that works for us all. Ignore the extra space in this post - vBulletin is acting up a bit when I entered the code above. ZoomSearch is too good a product not to find a good AJAX implementation.

  • #2
    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)?

    Comment


    • #3
      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
      Wrensoft Web Software
      Sydney, Australia
      Zoom Search Engine

      Comment


      • #4
        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
        Wrensoft Web Software
        Sydney, Australia
        Zoom Search Engine

        Comment


        • #5
          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.
          --Ray
          Wrensoft Web Software
          Sydney, Australia
          Zoom Search Engine

          Comment


          • #6
            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.

            Comment

            Working...
            X