JQuery adding li to ul after information has been saved to the database.

Question

I currently have everything working/saving to the database using $.post, but I am unsure of how to display the new list without reloading the page once the data is saved. I have also tried $(document).ready() but have had no luck there either.

<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>

The closest I think I have come is to a variation of this forum post 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

You need to wire up the button to actually do the ajax call and add the li element. (I didn't really check what your saveBullet function was doing, I just made it get called on the button click.) Give the button an id like so:

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

then the 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++;
      });

  }

});