Генерираният от DB списък не работи, когато е създаден с помощта на jquery

I have a simple form that has a list (dropdown list generated from a DB), when a user makes a selection, the selection is printed on the screen. The problem I'm having is that if I use jquery to call the php funciton that generates the list when the page is loading, the list will not work, but if I add the code directly in the html it will work

When the page loads the dropdown list is called like this:


$('#createDropDown').ready(function(){
        id = $('#createDropDown').val(); 
        // this calls a php function that creates a dropdown list from the DB
        // the dropdown's id = 'categoryList'
        xajax_addDropdownMenu(id);



});

списъкът се генерира с id = 'categoryList' и се добавя правилно към createDropDown DIV, наречен "createDropDown". До сега всичко изглежда добре! Проблемът идва, когато се направи избор в новосъздадения списък (categoryList) се извиква друг Jquery

when a selection is made the following code should be called:


$('#categoryList').change(function() {
    bucket_id = $('#categoryList').val(); 
    var selected = "";
    // get selected value from the dropdown menu
        $("#categoryList option:selected").each(function () {
            selected += $(this).text() + " ===>";
         });
        // if we have a valid ID print it in the screen.
        if(bucket_id!= 0)
        {
            xajax_addCategory(selected);
        }
     });
xajax_addCategory(selected); prints the selected item on the screen. but is not working.

ЗАБЕЛЕЖКА: Това работи добре, ако извикам php функцията за генериране на падащото меню директно във файла main.html, така че знам, че списъкът се генерира с правилния идентификатор и работи, но когато използвам Jquery за извикване на php метода при натоварване, не работи... и не разбирам защо.

PS Аз съм нуб на Jquery, така че малко прозрение би било много добре дошло!

АКТУАЛИЗАЦИЯ:

Опитах се да създам обвързване, след като списъкът е генериран по този начин:

 
$('#createDropDown').ready(function()
    { 
        id = $('#createDropDown').val();  
        xajax_addDropdownMenu(id); 
        $("#categoryList0").bind('change',function() 
        { 
            console.log('The code goes here!!'); 
        }); 
    });

където categoryList0 е ID на новия списък. класът на списъка е categoryList

но все още съм блокиран, защото все още не влиза във функцията, когато има промяна...


javascript drop-down-menu jquery select xajax
person Onema    schedule 12.08.2009    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Вашият втори кодов фрагмент намира всички елементи, които съответстват на #categoryList, и свързва функция към събитието за промяна. Проблемът е, че по това време няма елемент #categoryList, тъй като го създавате по-късно. Следователно трябва да направите обвързването, след като списъкът е създаден.

person svinto    schedule 12.08.2009
comment
и как да направя това? как мога да създам обвързването, след като списъкът е създаден? - person Onema; 12.08.2009
comment
Трябва да се свържете с xajax и да го накарате да изпълни кода във втория ви фрагмент, когато добави списъка. Тъй като не знам xajax, не мога да ви кажа как. - person svinto; 12.08.2009

arrow_upward
0
arrow_downward

Намерих начин да направя обвързване по-късно с помощта на xajax. По някаква причина никъде във файла jquery не успях да свържа тази функция с новото падащо меню. Моето решение беше да добавя jquery скрипта с помощта на xajaxResopnse->addScript(script) във функцията addDropdownMenu като тази

функция 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;  

}

първо извършване на обвързване за новия списък като този $('#categoryList').bind('change',function categoryListChange() {...} и след това добавяне на jquery скрипта чрез $xajaxResponse->addScript($javascript);.

person Onema    schedule 13.08.2009