JQuery ajoutant li à ul après que l'information a été sauvegardée dans la base de données

Question

J'ai actuellement tout travailler/sauvegarder dans la base de données en utilisant $ .post, mais je ne sais pas comment afficher la nouvelle liste sans recharger la page une fois les données enregistré. J'ai aussi essayé $ (document) .ready() mais je n'ai pas eu de chance non plus.

<script> 

saveBullet = function(action) { 

    $.post('/ManufacturersProductsLinesFeatures/ajax_save/', { 
     'data[ManufacturersProductsLinesFeature][bullet_point]':$('#ManufacturersProductsLinesFeatureBulletPoint').val(), 
     'data[ManufacturersProductsLinesFeature][manufacturers_products_line_id]':$('#ManufacturersProductsLinesFeatureManufacturersProductsLineId').val(), 
     'data[ManufacturersProductsLinesFeature][created_by]': <?=user('id')?>, 
    },function() { 
      //I've tried more than a couple things here. 
     //$(this).closest('ul').append('<li>'); 
    }); 
} 

</script> 



<input type="button" value="Save Bullet" onClick="javascript: saveBullet();"> 


<div id="sortableDiv" width="100%"> 
     <?if (empty($this->data['ManufacturersProductsLinesFeature'])) : ?> 
       There are no bullet points to display. &nbsp;Please add a bullet point. 
     <? else : ?>  
      <ul id="list1"> 
       <? foreach ($this->data['ManufacturersProductsLinesFeature'] as $k => $v): ?> 
        <li id="ManufacturersProductsLinesFeature_<?=$v['id'];?>" style="border-bottom: solid 1px #d5d5d5;" class="special"> 
         <table width="100%"> 
          <tr> 
           <td width="25" align="left"><?=$html->image('/img/icons/arrow_switch.gif');?></td> 
           <td><?=$v['bullet_point'];?></td> 
           <td style="vertical-align: middle;" vAlign="middle" align="right"> 
            <a href="<?=$html->url('/ManufacturersProductsLinesFeatures/edit/'.$product_type_id.'/'.$v['manufacturers_products_line_id'].'/'.$v['id']);?>"><img src="<?=$html->url('/img/icons/pencil.gif')?>" /></a> 
            <?= $html->link($html->image('icons/bin_empty.gif'), array('action'=>'../ManufacturersProductsLinesFeatures/delete_feature/', 'id'=>$product_type_id.'/'.$v['manufacturers_products_line_id'].'/'.$v['id']), null, "Are you sure?", false); ?> 
           </td> 
          </tr> 
         </table> 
        </li> 
       <?endforeach; ?>  
      </ul> 
     <?endif; ?>  
    </div> 

Le plus proche, je pense que je suis venu est à une variation de ce post forum http://www.killersites.com/forums/topic/780/jquery-add-remove-list-item/

saveBullet = function (action) {

 var i=$('ul#list1 li').size() + 1; 

    $.post('/ManufacturersProductsLinesFeatures/ajax_save/', { 
     'data[ManufacturersProductsLinesFeature][bullet_point]':$('#ManufacturersProductsLinesFeatureBulletPoint').val(), 
     'data[ManufacturersProductsLinesFeature][manufacturers_products_line_id]':$('#ManufacturersProductsLinesFeatureManufacturersProductsLineId').val(), 
     'data[ManufacturersProductsLinesFeature][created_by]': <?=user('id')?>, 
    },function() { 
     $('<li> List ' + i + '</li>').appendTo('ul#list1'); 
     i++; 
    }); 

} 

Answer 1

Vous devez câbler le bouton pour réellement faites l'appel ajax et ajoutez l'élément li. (Je ne l'ai pas vraiment vérifier ce que votre fonction saveBullet faisait, je viens de faire elle appelée sur le clic de bouton.) Donnez le bouton un id comme ceci:

<input type="button" id="buttonSave" value="Save Bullet"/> 

alors le jQuery:

$(document).ready(function() { 

    $('#buttonSave').click(function() { 
     saveBullet('action_here');   
     return false;  // cancel default button click action 
    }); 


    function saveBullet(action) { 

    var i=$('ul#list1 li').size() + 1; 

    $.post('/ManufacturersProductsLinesFeatures/ajax_save/', { 
     'data[ManufacturersProductsLinesFeature][bullet_point]':$('#ManufacturersProductsLinesFeatureBulletPoint').val(), 
     'data[ManufacturersProductsLinesFeature][manufacturers_products_line_id]':$('#ManufacturersProductsLinesFeatureManufacturersProductsLineId').val(), 
     'data[ManufacturersProductsLinesFeature][created_by]': <?=user('id')?>, 
     }, 
     function() { 
     $('<li> List ' + i + '</li>').appendTo('ul#list1'); 
     i++; 
     }); 

    } 

});