jquery在将信息保存到数据库之后，将ul添加到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 =功能（作用），你需要线了按钮实际上是一个变化{

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

    } 

});