jquery - load div from php with javascript -


i want build editable lists in php, javascript. issue want when click on item occurs, load more details item in div. without details code works fine. can't extras.. code : product.class

public function __tostring(){          // string return outputted echo statement          return '         <li id="product-'.$this->data['productid'].'" class="product">              <div class="text">'.$this->data['productname'].'</div>             <div id="productdetails"></div>             <div class="actions">                 <a href="#" class="edit" id="editproduct">edit</a>                 <a href="#" class="delete">delete</a>             </div>                           </li>';     } 

product.js

    // listening click on edit button  $('.product a.edit').live('click',function(){      var container = currentproduct.find('.text');      if(!currentproduct.data('origtext'))     {         // saving current value of category can         // restore later if user discards changes:          currentproduct.data('origtext',container.text());     }     else     {         // block edit button if edit box open:         return false;     }      $('<input type="text">').val(container.text()).appendto(container.empty());     /*this main problem*/     container.append($("#productdetails").load("productdetails.php", {id: currentproduct}));        /*       // appending save , cancel links:  (this works fine)     container.append(         '<div class="editcategory">'+             '<a class="savechanges" href="#">save</a> or <a class="discardchanges" href="#">cancel</a>'+         '</div>'     );*/  }); 

how can "currentproduct" in productdetails.php? tried $_post['id'], nothing.

try this:

$("#productdetails").load("productdetails.php", {id: currentproduct}, function(response, status, xhr){     container.append(response); }); 

what seems me .load() ajax call asynchronous default, container tries append data php @ point of time request not completed , nothing appended.

solution:

as see can callback function of .load() method, suggested in above code.


side note:

you using method bind click event in case live , has been removed in latest jquery libraries 1.9+ onwards, make sure version less 1.9 or better upgrade library , use recommended method .on() delegate event, event delegation syntax little different .on():

$(staticparent).on(event, selector, callback); 

where staticparent closest static parent availble @ time of dom ready.


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -