2011-09-17 11 views
0

既存のブログ投稿を編集するためのフォームを作成しました。フォームは最初は非表示になっており、「投稿を作成」を選択するとフォームが空白になり、「投稿を編集」をクリックすると、Ajaxを使用して投稿情報が読み込まれ、空白が埋められます。問題は、2つの要素を切り替えると、毎回一部の要素がクリアされず、置き換えられないということです。以下は、私の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が表示され、編集するように投稿情報が設定されています。「作成」をクリックすると、再び空白が表示されます形。

また何らかの理由で、編集と作成の間でスワップするときにすべてがリセットされることがあります。誰にでもアイデアはありますか?

+0

あなたは試したことがありフィドルをクリアjavascriptコンソールを使用して関数をステップ実行しますか? (FireBug、Chromeデベロッパーツールなど)クリック機能の最初の要素に停止点を作成し、実際に何が起こるかを確認するだけです。 –

+0

私はファイヤーバグを持っていますが、私は実際にPOSTとエラーを表示するだけでそれを使用する方法を知っていません。どちらのbtwでもFirebugにエラーはありません – 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 }); 

が私にね...


さて、第二の試み。それは全く違いはありませんかもしれないが、私はなかれ

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

私はdocument.readyにJSを持っていますが、その部分を貼り付けるのを忘れました – Wilson212

+0

私の2番目の提案? –

+0

これはテキストエリア以外では動作します:D任意のアイデアですか? – Wilson212

0

のように引用符でATTRセレクタを書く.valに関数を渡すと値ここ

$("textarea[name='body']").val(function(){  
return "";  
}); 

http://jsfiddle.net/dwqFb/61/

関連する問題