找到解决方案:
我不得不将该函数封装在另一个函数中。这是因为它与我在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 }} </a>
<a href="/accounts/logout">Log Out</a>
</p>
{% else %}
<p id="auth" style="margin: 0px;">
<a href="/accounts/login/">Log In </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>
答案 0 :(得分:2)
您在updateKeywordSubscribed(e);
之后致电return false;
,因此它实际上从未调用过您的功能
答案 1 :(得分: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
,并在返回语句之后放置它,所以我的代码应该解决所有这些问题。
答案 2 :(得分:0)
您已重新申报表单提交事件两次,但无论如何这都应该有效。
删除此代码
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault()
alert("sometext");
return false;
updateKeywordSubscribed(e);
});
});