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函数在做什么，我只是按下了按钮点击它。）给按钮一个这样的id：

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

  }

});

在将信息保存到数据库之后，JQuery将li添加到ul

1 个答案: