I have the following javascript test.js file:
$("#addItem").click(function () {
alert("yup");
$.ajax({
url: this.href,
cache: false,
success: function (html) { $("#bandRows").append(html); }
});
return false;
});
That I want to use to inject some HTML into the "bandRows" div on a page. I'm using Razor in an MVC 3 app like so:
The Index View, which contains the link that, when clicked injects a partial view HTML:
#model IEnumerable<TariffBand>
<script type="text/javascript" src="=#Url.Content("~/Scripts/jquery-1.3.2.js")"></script>
<script type="text/javascript" src="=#Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
<script type="text/javascript" src="=#Url.Content("~/Scripts/test.js")"></script>
<h2>Index</h2>
#using (Html.BeginForm())
{
<div id="bandRows">
#foreach (var band in Model)
{
Html.RenderPartial("BandEditorRow", band);
}
</div>
#Html.ActionLink("Add band...", "Add", null, new { id = "addItem" })
<input type="submit" value = "Done" />
At the moment, when I click on the link the javascript is not being called - the alert box is not being displayed - and the link just navigates to the "Add" partial view rather than injecting it into the 'bandRows' div.
Can anyone tell me why? I haven't used javascript before so I've obviously done something daft but can't work it out for the life of me.
EDIT - I have amended the .js file so the handler is for click not onclick. I have also tried amending the html helper to:
#Html.ActionLink("add band...", "Add", null, new { onclick = "addItem" } but still no dice.
Thanks
David
You have
$("#addItem").onclick(function ()
There is nothing like $.onclick.
This will be
$("#addItem").click(function ()
Edit
$().ajax({ should be $.ajax({
and the whole code should be within document.ready() like
$(document).ready(function(){
$("#addItem").click(function (){
.
.
.
});
Edit - 2
As you have admitted that you are very new to javascript world, I am giving the detail code:
<script type="text/javascript" src="=#Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
#* <script type="text/javascript" src="=#Url.Content("~/Scripts/test.js")"></script> *#
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function(){
$("#addItem").click(function (){
alert("yup");
$.ajax({
url: this.href,
cache: false,
success: function (html) {
$("#bandRows").append(html);
}
});
return false;
};
});
</script>
document ready is a very preliminary thing you need to learn when starting jQuery. This is the API documentation of ready event. And here is a tutorial for understanding document ready.
Related
I have two .cshtml webforms, in one webform I have Bootstrap header and in other webform I have one div containg form. Now I want to implement such thing like when I click any of links available in Header that time Jquery function will be called and it should get desired page and load it into defined div block.
My code is seems as bellow (header.cshtml) :
<html>
<head>
<script type="text/javascript" src="../assest/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function myFunction(str) {
$(document).ready(function () {
//alert(str);
$.ajax({
type: "GET",
url: str + ".cshtml",
dataType: "html",
success: function (data) {
$("#form_load").html(data);
},
error: function (data) {
alert(data);
}
})
});
}
</script>
</head>
<body>
<div>
<a id="nav_link" onclick="myFunction(this.name)" name="farmer_master">Farmer</a>
</div>
<div id="form_load"></div>
</body>
</html>
other webform (farmer_master.cshtml) :
<div>
Hi I shoud be called !
</div>
I use django create a website .and i just write a vote page ,when people click ,it will post data via jquery ajax .it work well
here is the code
<!doctype html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<meta charset="utf-8">
<title>vote</title>
</head>
<body>
<script language="javascript" type="text/javascript">
$(function(){
$(".post_up").click(function(){
$.ajax({
url:"/article/{{post.id}}/vote_up/",
type:'post',
success:function(msg){
var beforevote = $(".btn").text();
if (msg==0){
$(".pop_up_vote").empty().text("thanks,i get your vote!").show(300).delay(7000).hide(300);
};
if (msg==1){
$(".pop_up_vote").empty().text("you already voted,do not need vote again").show(300).delay(7000).hide(300);
};
})
})
</script>
<span><i class="icon_add"></i>vote</span>
<div class ="pop_up_vote" >
</div>
</body>
</html>
Everything works well, and I just found the problem. I can not stop repeatedly click vote.
If I click repeatedly
<span><i class="icon_add"></i>vote</span>
it repeate show up the pop_up message,"i already voted ,do not vote again."
so i thought ,i may solve the problem by remove the class post_up ,in this way ,people can not activate ajax post function
so i add $(this).removeClass();
$(function(){
$(".post_up").click(function(){
$(this).removeClass();
$.ajax({
url:"/article/{{post.id}}/vote_up/",
type:'post',
success:function(msg){
var beforevote = $(".btn").text();
if (msg==0){
$(".pop_up_vote").empty().text("thanks,i get your vote!").show(300).delay(7000).hide(300);
};
if (msg==1){
$(".pop_up_vote").empty().text("you already voted,do not need vote again").show(300).delay(7000).hide(300);
};
})
})
When I remove the class, I still have the problem regarding ajax. How could I fix it?
Try this : http://api.jquery.com/one/.
$('.post_up').one('click', function () {
You can re-bind the same handler once Ajax is done :
$('.post_up').one('click', function handler() {
var el = this;
$.ajax({
url: '/article/{{post.id}}/vote_up/',
type: 'post',
success: function (msg) {
$(el).one('click', handler);
Here is a demo : http://jsfiddle.net/wared/CVm37/.
I think the problem is that the behaviour is already set for the link, so removing the class won't do anything
try this instead
$(".post_up").unbind("click");
<script src="http://www.ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<form>
<label>Campo</label>
<input id="campo" name="campo" placeholder="Campo" required="" type="text">
</form>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "control.php",
type: "POST",
data: "campo=" + $("input#campo").val(),
success : function(data) {
if (data == 1) {
$("#div").html("Campo non disponibile");
}
else {
$("#div").html("Campo disponibile :)");
}
}
});
});
</script>
I saw with Firebug that the POST contains the value of the input field is sent only updating the page and not immediately. Why?
You don't have a proper click/submit handler registered for the form submission. Instead, you call $.ajax only on document ready. That's why you only see the submission on page load (or to be more accurate, document ready).
You need to listen to the submit event, so change your code to something like the following
$(document).on("submit", "form", function(e) {
e.preventDefault();
$.ajax({
…
});
});
You don't need to wait for the document to be ready if your javascript is at the end of the page (it's always ready at that point). And I noticed that you include both v1.9 and v.1.10 of jQuery and that's generally not needed nor advisable.
I have been trying to change the content of a <div> with a JQuery Ajax Call.
But nothing happens when I press the onclick <a> element.
This is my current code that I'm testing with:
Front.php:
<html>
<head>
<script type="text/javascript" src="jquery.js">
function testAjax()
{
$.ajax({
type: "GET",
url: 'Back.php',
data: "id=", // Not using this yet >.<
success: function(data) {
$('#test').html(data);
}
});
}
</script>
</head>
<body><div id="test">HELLO</div>
Change this</body>
</html>
and here is my Back.php:
<?php
echo "test";
?>
Nothing happens when I click on "Change this" however the content in <div id="test"> should change to "test". Can someone help me with what I'm doing wrong? Thanks.
You didn't close your first script tag and open a new one for your inline script.
<script type="text/javascript" src="jquery.js"></script>
<script>
function testAjax()
{
...
You should apply contentType: "html" on it. May be that will help.
I am trying to send post data to my post data file handler called postinfo.php with jQuery but so far I can make it.
Here is my post.php code:
<HTML>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javscript">
$('#form_id').on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "http://www.vemvo.com/test/postinfo.php",
data: $(this).serialize(),
success: function() {
alert('success');
}
});
});
</script>
<form method="post" id="form_id">
<input type="text" name="ime">
<input type="submit" id="submit" name="submit" value="Send">
</form>
You can see the page here: http://www.vemvo.com/test/post.php
Here is the code from my postinfo.php:
<?PHP
$ime = $_POST['ime'];
echo "Your name is $ime";
?>
Here is located postinfo.php - http://www.vemvo.com/test/postinfo.php
So where is my mistake and how I can make it work?
Now it's not sending the data and not giving me the success alert.
Your jQuery selector isn't going to find that form, since the selector is running before the form tag exists in the DOM. Try wrapping it in the jQuery function to wait for the document to be ready:
$(function () {
$('#form_id').on('submit', function(e){
// the rest of your code
});
});
It also might be a good idea to return false at the end, to further suppress the form's default post action:
e.preventDefault();
$.ajax({
type: "POST",
url: "./postinfo.php",
data: $(this).serialize(),
success: function() {
alert('success');
}
});
return false;
Currently the form is posting as normal. Since the AJAX handler is never attached (because the element doesn't exist when the selector executes), it's just doing a normal document-level form post. And since there's no action attribute specified in the form tag, the page is posting to itself by default. Which just responds with the current page.
Edit: You also have a typo which may be preventing the browser from executing your JavaScript code at all:
<script type="text/javscript">
You're missing the second "a". This should be:
<script type="text/javascript">
You MUST spell text/javascript correctly
You need to assign the event handler on load
There should not be any need to return false as posted by some other people here
NEVER call anything submit in a form
Wrap your html in body tags
Use a correct DOCTYPE
For files you can have a look at uploadify or How can I upload files asynchronously?
Fixed code for point 1 to 6
<!DOCTYPE html>
<html>
<head>
<title>Test Ajax</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#form_id').on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "./postinfo.php",
data: $(this).serialize(),
success: function() {
alert('success');
}
});
});
});
</script>
</head>
<body>
<form method="post" id="form_id">
<input type="text" name="ime">
<input type="submit" value="Send">
</form>
</body>
</html>