DB generated list not working when created using jquery.

Answer 1

Your second code snippet finds all elements that match #categoryList and binds a function to the change event. The problem is that there is no #categoryList element at that time, since you create it later on. Thus you need to do the binding after the list has been created.

Answer 2

I found a way to do a binding later using xajax. For some reason nowhere in the jquery file I was able to bind this function with the new drop down. My solution was to add the jquery scrip using xajaxResopnse->addScript(script) in the addDropdownMenu funciton like this

function addDropdownMenu($id){

  $xajaxResponse = new xajaxResponse();

  $html = /* CODE TO GENERATE LIST HERE */ ; 


  $javascript = /*"*///commented out " to visualize code better
    $('#categoryList').bind('change',function categoryListChange() 
    {
     
      //get selected value from the dropdown menu
      var selected = "";
      $("#categoryList option:selected").each(function () 
      {
        selected += $(this).text();
       });

      bucketId = $('#categoryList').val(); 

      if(bucketId!= 0)
      {
        xajax_addCategory(selected);
      }

    });"";

  $xajaxResponse->addAppend("categoryListContainer", "innerHTML", $html);

  $xajaxResponse->addScript($javascript);

  return $xajaxResponse;  

}

first doing a bind for the new list like this $('#categoryList').bind('change',function categoryListChange() {...} and then adding the jquery script through $xajaxResponse->addScript($javascript);.