Integrate two javascript scripts and handle user events differently

Question

I am building a search form that use two different javascript scripts. This is the form code:

$(function()
{
  $('#txtSearch').chainSelect('#link_id','http://localhost/xxx.com/combobox.php',
  { 
     before:function (target) //before request hide the target combobox and display the loading message
  {  
    $("#loading").css("display","block");
    $(target).css("display","inline");
 },
    after:function (target) //after request show the target combobox and hide the loading message
 { 
     $("#loading").css("display","none");
     $(target).css("display","inline");
     }
   });
  });
// form code
<td><div><input type="text" id="txtSearch" name="cat_name" onkeyup="searchSuggest();" autocomplete="off" class="inputbox ajax" value="" /></div></td>
<td><div><select name="link_id" id="link_id" class="inputbox select"><option value="">All Courses</option></select></div>

The first input uses an Ajax suggest type of behavior that pulls a list of categories from the database (with php) when the user starts to type. The users clicks on one of the cats and the input is filled with the clicked text. Next is a select list of courses that is also pulled from the database when the user chooses the first input.

This is part of the Ajax code - in 1 external file:

 function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
       var ss = document.getElementById('search_suggest')
       ss.innerHTML = '';
       var str = searchReq.responseText.split("\n");
       for(i=0; i < str.length - 1; i++) {
      //Build our element string.  This is cleaner using the DOM, but
      //IE doesn't support dynamically added attributes.
      var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
      suggest += 'onmouseout="javascript:suggestOut(this);" ';
      suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
      suggest += 'class="suggest_link" id="suggestTrigger">' + str[i] + '</div>';
      ss.innerHTML += suggest;
    }
  }
 }
    //Click function
    function setSearch(value) {
      document.getElementById('txtSearch').value = value;
      document.getElementById('search_suggest').innerHTML = '';
    }

It creates a div that is filled with the cat names.

The relevant select list jquery code is this - in a 2nd external file:

    jQuery.fn.chainSelect = function( target, url, settings ) 
    {
      return this.each( function()
      {
        $(this).change( function( ) 
        {
           // more code here
        });
     });
   };

As you can see the select list is pulled from the database in case of a change event. This is not working well at the moment since the user clicks in the div and does not create a change the input text really. The event that should trigger the select is the onclick of the div of the suggest box. But it already has a function called setSearch(). How do I activate the jquery function on the onclick event of the div suggest box (in the ajax code) instead of on the change event of the suggest input box (#txtSearch) as it is now?

Answer 1

Hi,

from what you write I assume that the suggest box is added inside the same div that also contains the text field, is that correct? If so, that could have been stated more clearly. One way to put the event on the search suggestions might be (put it in your initialization code and omit the onclick handlers in the suggestion list):

$('#search_suggest div').live('click', function(e) {
    var element = $(e.target);
    setSearch($(this).html());
});

You can also add more events to the suggest box this way. Find out on which element the event has occurred by using $(e.target), as shown above. By the way, please omit the "javascript:" in handler attributes like onclick, it's not necessary. Hope this gets you on track.

Tom