2011-09-17 60 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