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
Post a Comment