2011-09-17 126 views
0

我创建了一个表单,您可以在其中创建编辑现有博客文章。该表单最初是隐藏的,当您选择“创建发布”时,它会将表单显示为空白,如果您单击“编辑发布”,它将使用Ajax加载发布信息并填写空白。问题是,当你在两者之间切换时,一些元素不会被清除并且每次都被替换。这里是我的JS脚本如下:jQuery .val()或.attr()无法正常工作

<!-- Hidden Create/Edit form --> 
<div id="news-form" title="" style="display: none;"> 
    <div id="js_news_message" style="display: none;"></div> 
    <form id="news" class="form" action="{URL}/admin/blog" method="post"> 
     <input type="hidden" name="action" value=""> 
     <input type="hidden" name="id" value=""> 
     <p> 
      <label for="title">Blog Title</label> 
      <input id="title" name="title" class="required" type="text" value="" /> 
     </p> 

     <div> 
      <label for="body">Blog Body</label> 
      <textarea id="body" name="body" class="tinymce" rows="50" cols="40"></textarea> 
     </div> 

     <div class="clear"></div> 
     <p> 
      <a class="button red" id="reset-form" href="javascript:void(0);">Reset Changes</a> 
      <input id="submit" type="submit" class="button" style="width: 150px; text-align: center; margin: 10px; float: right;" value="Submit"> 
     </p> 
    </form> 
</div> 

<script src="{TEMPLATE_URL}/js/mylibs/jquery.form.js"></script> 
<script type="text/javascript"> 

$("#create").click(function() { 
     // Reset form elements 
     $("input[name=action]").val('create'); 
     $("input[name=title]").val(''); 
     $("textarea[name=body]").val(''); 

     // Show form, and hide any previous messages 
     $('#js_news_message').attr('style', 'display: none;'); 
     $('#news').attr('style', ''); 
     $('#news-form').attr('title', 'Create News Post'); 
     $('#news-form').dialog({ modal: true, height: 600, width: 750 }); 

// ============================================ 
    // Editing News 
    $(".edit").live('click', function(){ 
     var news_id = $(this).attr('name'); 
     //alert(news_id); 

     // Get our post 
     $.post("{BASE_URL}/admin/news", { action : 'getpost', id : news_id }, 
      function(result){ 
       if(result !== 0) 
       { 
        var obj = jQuery.parseJSON(result); 
        // Reset form elements 
        $("input[name=action]").val('edit'); 
        $("input[name=id]").val(news_id); 
        $("input[name=title]").val(obj.title); 
        $("textarea[name=body]").val(obj.body); 

        // Show form, and hide any previous messages 
        $('#js_news_message').attr('style', 'display: none;'); 
        $('#news').attr('style', ''); 
        $('#news-form').attr('title', 'Edit News Post'); 
        $('#news-form').dialog({ modal: true, height: 600, width: 750 }); 

这不是完整的JS,但你明白了。当用户点击博客文章旁边的“编辑”按钮,然后它弹出jQuery Modal,并且发布信息已经设置为编辑,当他们点击“创建”时,它再次提示Modal,并带有空白形成。

再一次,出于某种原因,有时一切都会在编辑和创建之间进行交换时重置,而其他时间则不会。有人有主意吗?

+0

您是否尝试过使用JavaScript控制台逐步完成该功能? (FireBug,Chrome开发人员工具等)只需在点击函数的第一个元素上创建一个停止点,并查看实际发生的情况。 –

+0

我有萤火虫,但我真的不知道如何使用它过去只是查看POST和错误。其中,萤火虫没有错误 – Wilson212

回答

0

纵观行:

$.post("{BASE_URL}/admin/news", { action : 'getpost', id : news_id }, 

我可以看到你得到一个错误,因为你无法识别JavaScript的变量

我认为你应该更好地利用:

var base_url = "{/literal}{BASE_URL}{literal}"; 

并修改该行

$.post(base_url + "/admin/news", { action : 'getpost', id : news_id }, 
+0

我用它取代了我的真实URL,但在实际的脚本中它是我的本地主机地址 – Wilson212

1

让它要求的文件准备:

$(document).ready(function() { // your code }); 

听起来好像没有被设置一次你的文件已经准备好......


好了,第二次尝试。这可能会使没有任何区别,但我送花儿给人写带引号的ATTR选择像

$("input[name='example']") 
+0

我确实在document.ready中有JS,只是忘了粘贴那部分 – Wilson212

+0

好吧,试试我的第二个建议? –

+0

好吧,它现在除了在文本区域:D有什么想法? – Wilson212