JQuery добавляет li к ul после сохранения информации в базе данных

Question

В настоящее время у меня все работает / сохраняется в базе данных, используя $ .post, но я не уверен, как отобразить новый список без перезагрузки страницы после сохранения данных.Я также попробовал $ (document) .ready (), но мне тоже не повезло.

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

Наиболее близким, как мне кажется, был вариант этого сообщения на форуме 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

Вам нужно подключить кнопку, чтобы фактически выполнить вызов ajax, и добавить элемент li. (Я действительно не проверял, что делает ваша функция saveBullet, я просто вызвал ее при нажатии кнопки.) Присвойте кнопке идентификатор, подобный следующему:

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

тогда 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++;
      });

  }

});