2012-02-27 97 views
0

找到了解決辦法:jQuery的表單提交功能不能正常工作

我不得不封裝功能的另一功能。這是因爲它與我在我的html文件上的其他Js庫衝突。

大家歡呼!

<script type="text/javascript"> 
     (function($) { 
      // we can now rely on $ within the safety of our 「bodyguard」 function 
      $(document).ready(function() { alert("nyah nyah! I’m able to use '$'!!!!"); 
          $("#keywordForm").submit(function(e) { alert('asshole');})}); 
     }) (jQuery); 

前一題

我的提交按鈕不做即使我已經形式的jQuery綁定任何東西。

不顯示警報消息,意思是說它甚至沒有進入該功能。

我對這個問題抱有懷疑態度。 :(

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("form").submit(function(e) { 
       e.preventDefault() 
       alert("sometext"); 
       return false; 
       updateKeywordSubscribed(e); 
      }); 
     }); 
     function updateKeywordSubscribed(e, keywords) { 
      e.preventDefault(); 
      var option_form = jQuery(e.target); 
      $.ajax({ 
       url : option_form.attr('action'), 
       type : option_form.attr('method'), 
       data : option_form.serialize(), 
       dataType : 'json', 
       success : function(response) { 
         console.log(response) 
         var result = response.data 
         if(result == 'False') 
          { alert('Failed')} 
         alert('some text'); 
      error : function(xhr, ajaxOptions, thrownError) { 
         // log ajax errors 
        } 
      }); 
     } 

    <!--function DoTheCheck() { {% for price in price_list %} 
        if($('input[type=checkbox]:checked').length == {{ price.no_of_keywords }}) 
         { alert('Price to pay is $' + {{ price.price_of_each_keyword }} + '.0'); } 
       {% endfor %} 
       }--> 

    </script> 
</head> 
<body> 
    <div class="container"> 
     <!-- header --> 
     <div id="header-wrap"> 
      <div id="header"> 
       <a name="top"></a> 
       <h1 id="logo-text"><a href="/" title=""style="padding-left:32px; top: 80px;">Rosebud</a></h1> 
       <p id="slogan"style="padding-left:32px;letter-spacing:0px;"> 
        Your brand on the web... 
       </p> 
       <div id="nav" style="padding-top: 15px;"> 
        <ul> 
         <li> 
          <a href="/">Home</a> 
         </li> 
         <li> 
          <a href="/topic/">Topic</a> 
         </li> 
         <li> 
          <a href="/opinion/">Opinion</a> 
         </li> 
         <li> 
          <a href="/statistics/">Statistics</a> 
         </li> 
         <li> 
          <a href="/realtime/">Realtime</a> 
         </li> 
         <li> 
          <a href="/">Support</a> 
         </li> 
         <li> 
          <a href="/about/">About</a> 
         </li> 
         <li id="current"> 
          <a href="/profile/">My Profile</a> 
         </li> 
        </ul> 
       </div> 
       {% if user.is_authenticated %} 
       <p id="auth" style="margin: 0px;"> 
        <a href="/">Welcome {{ user.username }} &nbsp; &nbsp; &nbsp;</a> 
        <a href="/accounts/logout">Log Out</a> 
       </p> 
       {% else %} 
       <p id="auth" style="margin: 0px;"> 
        <a href="/accounts/login/">Log In &nbsp; &nbsp; &nbsp;</a> 
        <a href="/accounts/register/">Register</a> 
       </p> 
       {% endif %} 
      </div> 
     </div> 
     <!-- End of Header --> 
     <div id="content-wrap"> 
      <!-- content --> 
      <div id="content-home"> 
       <br /> 
       {% block content %} <h2 style="margin: 0px; margin-bottom: 20px;">Profile Page</h2> 
       {% if user.is_authenticated %} 
       <p id="auth" style="margin: 0px;"> 
        {% for userprofile in object_list %} 
        {% if userprofile.username = user.username %} 
        <table style="margin: 0px; width: 600px; border: 0;"> 
         <tbody> 
          <tr> 
           <td style="width: 250px; border: 0;"><label for="first_name">First Name:</label></td> 
           <td style="border: 0;">{{ userprofile.first_name }}</td> 
          </tr> 
          <tr> 
           <td style="border: 0;"><label for="last_name">Last Name: </label></td> 
           <td style="border: 0;">{{ userprofile.last_name }}</td> 
          </tr> 
          <tr> 
           <td style="border: 0;"><label for="email">Email: </label></td> 
           <td style="border: 0;">{{ userprofile.email }}</td> 
          </tr> 
          <tr> 
           <td style="border: 0;"><label for="username">Username: </label></td> 
           <td style="border: 0;">{{ userprofile.username }}</td> 
          </tr> 
          <tr> 
           <td style="border: 0;"><label for="keywords">Keywords currently subscribed to: </label></td> 
           <td style="border: 0;">{{ userprofile.keywords_subscribed }}</td> 
          </tr> 
          <tr> 
           <input type="button" name = "submit" id="keywordBtn" value="Click to refresh list of keywords subscribed" action="/refresh_list/" /> 
           <INPUT TYPE=hidden NAME="username" Value = {{ userprofile.username }} > 
          </tr> 
         </tbody> 
        </table> 
        <br /> 
        <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3> 
          <table> 
           <tbody> 
            {% for keyword in keyword_list %} 
             {% if forloop.counter|divisibleby:"3" %} 
               <tr> 
             {% endif %} 
             <td> 
              {% if keyword.keyword_name == userprofile.keywords_subscribed %} 
               <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/> 
              {% else %} 
               <input type="checkbox" name="cb" value="keywords" /> 
              {% endif %} 
              {{keyword.keyword_name}} 
              </td> 
             {% if forloop.counter|add:"1"|divisibleby:"3" %} 
               </tr> 
             {% endif %} 
            {% endfor %} 
           </tbody> 
          </table>      
        <br /> 
        <h3 style="margin: 0px; margin-bottom: 20px;">Price of subscriptions</h3> 
        <div id = "subscription"></div> 
        <input type="button" value="Amount to pay!" onclick="DoTheCheck()"> 
        <br /> 
        </br> 
        <form id="keywordForm" method="post"> <!--action="/keyword_subscribe/"--> 
        <P>Keyword: <INPUT TYPE="TEXT" NAME="keyword_input" Value = "Enter a new Keyword" class = 'hint'><BR><BR> 
        <!--<INPUT TYPE=hidden NAME="name_input" Value = {{ userprofile.username }} >--> 
        <INPUT TYPE="submit" Value="Crawl" name="crawl"> 
        </P> 
        </form> 

而這裏的jQuery的一部分:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#keywordForm").submit(function(e) { 
       alert("sometext"); 
       return false; 
      }); 
     }); 
</script> 

回答

1

只是覺得......你缺少},的代碼,這樣你的JavaScript是無效的。

固定的JavaScript:

function updateKeywordSubscribed(e, keywords) { 
    e.preventDefault(); 
    var option_form = jQuery(e.target); 
    $.ajax({ 
     url: option_form.attr('action'), 
     type: option_form.attr('method'), 
     data: option_form.serialize(), 
     dataType: 'json', 
     success: function(response) { 
      console.log(response); 
      var result = response.data; 
      if (result == 'False') { 
       alert('Failed'); 
      } 
      alert('some text'); 
     }, // <================= That was missing! **************************** 
     error: function(xhr, ajaxOptions, thrownError) { 
      // log ajax errors 
     } 
    }); 
} 

$(document).ready(function() { 
    $("form").submit(function(e) { 
     e.preventDefault(); 
     alert("sometext"); 
     updateKeywordSubscribed(e); 
     return false; 
    }); 
});​ 

通過您所使用的功能updateKeywordSubscribed它被宣佈之前的樣子,並把它回報statment後,所以我的代碼應該可以解決所有這些問題。

+0

感謝gdron!你的答案很好。但我找到了解決方案。請參閱頂部@gdoron – 2012-02-28 04:53:51

+0

@StanwinSiow。你應該提供很好的答案......如果你找到答案,你應該發佈答案,而不是編輯問題。很高興你設法解決它。 – gdoron 2012-02-28 05:50:17

2

你打電話updateKeywordSubscribed(e);return false;所以它從來沒有真正調用後,你的函數

+0

是的,但那是後面的部分。我希望它首先顯示警報。我不能得到它,所以沒有點調試其餘 – 2012-02-27 17:17:45

+0

查看 – 2012-02-28 04:53:21

+0

你coould've只是使用jQuery的noConflict(頂部@stratton)的,如果你使用包含變量$ – clem 2012-02-28 09:17:14

0

你重新聲明表單提交事件兩次,但無論如何這應該起作用

刪除該代碼

$(document).ready(function() { 
    $("form").submit(function(e) { 
     e.preventDefault() 
     alert("sometext"); 
     return false; 
     updateKeywordSubscribed(e); 
    }); 
}); 

看它http://jsfiddle.net/KcpKk/

+0

多個JS librarrys你應該總是使用顯示警報那麼是不是我的jQuery代碼?這是我的HTML鏈接http://dl.dropbox.com/u/11787778/userprofile_list.html – 2012-02-27 17:52:34

+0

這是行不通的。 CSS和JS沒有找到。請修復以測試它@StanwinSiow – 2012-02-27 18:21:02

+0

感謝ijD現在的作品。看頂部! @ijD – 2012-02-28 04:54:10