Search jQuery

jQuery Forum

How do I make a Sum button with ajax

in Getting Started • 6 years ago

I have watched the video a couple times. For some reason, I just cannot figure out how to make a sum button that adds 1+2 when the user clicks on the hyper link "sum".

https://www.youtube.com/watch?v=7faB8kV43eg

Here is my view for /Home/Index:

@{
    Layout = null;
}



<!DOCTYPE html>
<html>
<head>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>

        $(document).ready(function () {
            $("button").click(function () {

                $.ajax({

                    type: 'GET',

                    url: '@Url.Action("HelloAjax" , "Home")',
                    success: function (result) {

                        $('#div1').html(result);

                    }

                }); // closes the ajax

            }); // closes click function

            // data: is the data returned by the controller

            var url = "/Home/ReverseTheString";
            var stringToReverse = "Bob Cravens";
            $.get(url, { input: stringToReverse }, function (data) {
                $("#div4").html(data);
            });

            $("sum").click(function () {

                $.ajax({

                    type: 'GET',
                    data: { a:1 , b:2} ,
                    url: '@Url.Action("Sum" , "Home")',
                    success: function (result) {

                        $('#div1').html(result);

                    }

                }); // closes the ajax

            }); // closes click function

        });       // closes document ready function
    </script>

    <script>

        var url = "/Home/GetDateTimeString";
        $.get(url, null, function (data) {
            $("#div2").html(data);
        });

        var url = "/Home/sum";
        $.get(url, null, function (data) {
            $("#div7").html(data);
        });

        var url = "/Home/RegisterUser";
        var first = "Bob";
        var last = "Cravens";
        $.post(url, { firstName: first, lastName: last }, function (data) {
            $("#div5").html(data);
        });

        var f = $("#myForm");
        var url = f.attr("action");
        var formData = f.serialize();
        $.post(url, formData, function (data) {
            $("#div6").html(data);
        });

        // works if div 7,div8,div9 are changed to div4,div5,div6

        var url = "/Home/GetContactInfo";
        var id = 123;
        $.getJSON(url, { personId: id }, function (data) {
            $("#div7").html(data.FirstName + " " + data.LastName);
            $("#div8").html(data.State);
            $("#div9").html(data.Age);
        });

        var url = "/Home/MyPartialView";
        var info = "This is my information."



        // note : data is the return data from the controller , we have to specify it here as a parameter for function
        $.get(url, null, function (data) {
            $("#div1").html(info);
        });

    </script>

        <title>A study of population dynamics</title>

    </head>
    <body>

        <div class="container">
            <form id="myForm" action="/Home/FormPost" method="post">

                <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div5"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div6"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div7"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div8"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div9"><h2>Let jQuery AJAX Change This Text</h2></div>

                <a href=" " class= "sum"> Sum </a>

                <div id="result2"><h2> "result2 "</h2></div>

                <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
                <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
                <div>Age: <input name="Age" type="text" value="43" /></div>
                <input type="submit" value="Save Contact" />
                <div id="postResult">?</div>
            </form>

        </div>

            <button>Get External Content</button>

</body>
    </html>

Replies(11)

watusiware

Re: How do I make a Sum button with ajax

6 years ago

I don't have the time to sit through that video. And probably nobody else does either.

I hope there is some web page with code that goes with that video that you can copy/paste. Otherwise, you will need to read code off of the screen, and make sure you get it all exactly right. Doesn't seem like a very effective way to learn. In any case, I'd guess you missed some part of the example.

$("sum").click(function () {

It would work when you click on an element like:

<sum>

in your HTML, which you do not have. (And is something you should not do in any case!)

Maybe you meant something like:

$('#sum'.click(function() {

which would work when you click on an element like (for example):

But you have only one button, it has no ID, and you already have another click handler for that button.

watusiware

Re: How do I make a Sum button with ajax

6 years ago

I just noticed your:

You need a period, to select by CSS class:

$('.sum')

not

$('sum')

which selects by tag name.

If you are copying code from a video, it is highly likely you will miss little things like this! ;)

It is important to get a good understanding of CSS/jQuery selectors, as they are one of the most important aspects of jQuery.

https://learn.jquery.com/using-jquery-core/selecting-elements/

masterinex

Re: How do I make a Sum button with ajax

6 years ago

I tried adding the . infront of sum $('.sum'), that did not work. Now i changed jquery to load from the button, but it still does not work. \\\

@{
    Layout = null;
}



<!DOCTYPE html>
<html>
<head>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>



            // data: is the data returned by the controller

            var url = "/Home/ReverseTheString";
            var stringToReverse = "Bob Cravens";
            $.get(url, { input: stringToReverse }, function (data) {
                $("#div4").html(data);
            });

            $("button").click(function () {

                $.ajax({

                    type: 'GET',
                    data: { a:1 , b:2} ,
                    url: '@Url.Action("Sum" , "Home")',
                    success: function (result) {

                        $("#div2").html(result);

                    }

                }); // closes the ajax

            }); // closes click function

        });       // closes document ready function
    </script>

    <script>

        var url = "/Home/GetDateTimeString";
        $.get(url, null, function (data) {
            $("#div2").html(data);
        });

        var url = "/Home/sum";
        $.get(url, null, function (data) {
            $("#div7").html(data);
        });

        var url = "/Home/RegisterUser";
        var first = "Bob";
        var last = "Cravens";
        $.post(url, { firstName: first, lastName: last }, function (data) {
            $("#div5").html(data);
        });

        var f = $("#myForm");
        var url = f.attr("action");
        var formData = f.serialize();
        $.post(url, formData, function (data) {
            $("#div6").html(data);
        });

        // works if div 7,div8,div9 are changed to div4,div5,div6

        var url = "/Home/GetContactInfo";
        var id = 123;
        $.getJSON(url, { personId: id }, function (data) {
            $("#div7").html(data.FirstName + " " + data.LastName);
            $("#div8").html(data.State);
            $("#div9").html(data.Age);
        });

        var url = "/Home/MyPartialView";
        var info = "This is my information."



        // note : data is the return data from the controller , we have to specify it here as a parameter for function
        $.get(url, null, function (data) {
            $("#div1").html(info);
        });

    </script>

        <title>A study of population dynamics</title>

    </head>
    <body>

        <div class="container">
            <form id="myForm" action="/Home/FormPost" method="post">

                <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div5"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div6"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div7"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div8"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div9"><h2>Let jQuery AJAX Change This Text</h2></div>

                <a href="#" class= "sum"> Sum </a>

                <div id="result2"><h2> "result2 "</h2></div>

                <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
                <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
                <div>Age: <input name="Age" type="text" value="43" /></div>
                <input type="submit" value="Save Contact" />
                <div id="postResult">?</div>
            </form>

        </div>

            <button>Get External Content</button>

</body>
    </html>

watusiware

Re: How do I make a Sum button with ajax

6 years ago

You fixed one thing, but broke another.

I notice that you removed the $(document).ready() line It is necessary. And now you have mismatched {}. Did you look for the error messages that you will see in the Javascript console of your browser?

When your Javascript code runs, the <button> has not yet been parsed and added to the document. You cannot bind to a button that does not yet exist!

The function you pass to $(document).ready() will run only after the document has been completely parsed, and all elements added to the browser's document object model.

But since you now have a syntax error from the closing bracket of the original $(document).ready function, that's not even your biggest problem! When Javascript encounters a syntax error, it stops processing right there.

There may well be additional problems I did not see. For one, this code is dependent on some ASP code on your server - which responds to the Ajax requests - which we have not seen. (And which is not a proper topic for this forum in any case.)

It is best when posting problems to the forum to make a demo using jsFiddle. But, since this is part of an ASP exercise, you won't be able to use jsFiddle because it doesn't support ASP. Do you have a website that you can put examples on, and then post links? It is very difficult to help just from looking at snippets of code that are posted to the forum.

I think you are biting-off too much at once. It would be better to learn ASP, then learn jQuery, or the other way around. And go one little bit at a time, instead of writing a lot of code and then trying to figure out what is wrong.

masterinex

Re: How do I make a Sum button with ajax

6 years ago

even adding the document.ready function part , it still wont work

@{
    Layout = null;
}



<!DOCTYPE html>
<html>
<head>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>

        $(document).ready(function () {


            // data: is the data returned by the controller

            var url = "/Home/ReverseTheString";
            var stringToReverse = "Bob Cravens";
            $.get(url, { input: stringToReverse }, function (data) {
                $("#div4").html(data);
            });

            $("button").click(function () {

                $.ajax({

                    type: 'GET',
                    data: { a:1 , b:2} ,
                    url: '@Url.Action("Sum" , "Home")',
                    success: function (result) {

                        $("#div3").html(result);

                    }

                }); // closes the ajax

            }); // closes click function



            $.ajax({
                type: "GET",
                url: './Home/ReverseTheString',
                data: { input: 'abc'},
                dataType: "json",
                async: true,
                success: function (result) {
                    alert(result);
                }
            });



        });       // closes document ready function
    </script>

    <script>

        var url = "/Home/GetDateTimeString";
        $.get(url, null, function (data) {
            $("#div2").html(data);
        });

        var url = "/Home/sum";
        $.get(url, null, function (data) {
            $("#div7").html(data);
        });

        var url = "/Home/RegisterUser";
        var first = "Bob";
        var last = "Cravens";
        $.post(url, { firstName: first, lastName: last }, function (data) {
            $("#div5").html(data);
        });

        var f = $("#myForm");
        var url = f.attr("action");
        var formData = f.serialize();
        $.post(url, formData, function (data) {
            $("#div6").html(data);
        });

        // works if div 7,div8,div9 are changed to div4,div5,div6

        var url = "/Home/GetContactInfo";
        var id = 123;
        $.getJSON(url, { personId: id }, function (data) {
            $("#div7").html(data.FirstName + " " + data.LastName);
            $("#div8").html(data.State);
            $("#div9").html(data.Age);
        });

        var url = "/Home/MyPartialView";
        var info = "This is my information."



        // note : data is the return data from the controller , we have to specify it here as a parameter for function
        $.get(url, null, function (data) {
            $("#div1").html(info);
        });

    </script>

        <title>A study of population dynamics</title>

    </head>
    <body>

        <div class="container">
            <form id="myForm" action="/Home/FormPost" method="post">

                <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div5"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div6"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div7"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div8"><h2>Let jQuery AJAX Change This Text</h2></div>

                <div id="div9"><h2>Let jQuery AJAX Change This Text</h2></div>

                <a href="#" class= "sum"> Sum </a>

                <div id="result2"><h2> "result2 "</h2></div>

                <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
                <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
                <div>Age: <input name="Age" type="text" value="43" /></div>
                <input type="submit" value="Save Contact" />
                <div id="postResult">?</div>
            </form>

        </div>

            <button>Get External Content</button>

</body>
    </html>

watusiware

Re: How do I make a Sum button with ajax

6 years ago

It's time to make a demo we can try. Make a page on your site that we can look at. We can't debug bits and pieces of code posted to the forum.

You are making things difficult for yourself by adding so much code all at once. GET ONE BIT AT A TIME TO WORK., and REMOVE THE REST OF THE CODE.

Now you have a whole bunch of Ajax requests that will run as soon as the page loads. I doubt that is what was intended. (all the <script></script> blocks after your document read block. REMOVE THEM for now!

Does the server part of your code work? Did you verify that?

Did you use the inspection/debug tools in your desktop browser to inspect the Ajax response? Did you check the Javascript console for error messages?

masterinex

Re: How do I make a Sum button with ajax

6 years ago

instead of using a hyperlink , i have attached the click event to a button called button2 with id button2 , but I'm not sure if I referenced it correctly in Ajax form. What do you do if you have a form with 2 buttons , and want to reference those buttons with click events ?

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.ajax({
type: 'GET',
url: '@Url.Action("HelloAjax" , "Home")',
success: function (result) {
$("#div1").html(result);
}
}); // closes the ajax
}); // closes click function
$("button2").click(function () {
$.ajax({
type: 'GET',
data: { a: 1, b: 2 },
url: '@Url.Action("Sum" , "Home")',
success: function (result) {
$("#div3").html(result);
}
}); // closes the ajax
}); // closes click function
// data: is the data returned by the controller
var url = "/Home/ReverseTheString";
var stringToReverse = "Bob Cravens";
$.get(url, { input: stringToReverse }, function (data) {
$("#div4").html(data);
});
$(".sum").click(function () {
$.ajax({
type: 'GET',
data: { a:1 , b:2} ,
url: '@Url.Action("Sum" , "Home")',
success: function (result) {
$("#div3").html(result);
}
}); // closes the ajax
}); // closes click function
/* this part does not work , it does not do the ajax call, but goes straight into the controller reversethestring...
null reference exception ...string array is empty */
$.ajax({
type: "GET",
url: './Home/Index',
data: { input: 'abc'},
dataType: "json",
async: true,
success: function (result) {
alert(result);
}
});
var formData = { name: "ravi", age: "31" }; //Array
$.ajax({
url: "./Home/Index ",
type: "POST",
data: formData,
success: function (data, textStatus, jqXHR) {
//data - response from server
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
$.post('superman', { field1: "hello", field2: "hello2" },
function (returnedData) {
console.log(returnedData);
});
}); // closes document ready function
</script>
<script>
var url = "/Home/GetDateTimeString";
$.get(url, null, function (data) {
$("#div2").html(data);
});
var url = "/Home/sum";
$.get(url, null, function (data) {
$("#div7").html(data);
});
var url = "/Home/RegisterUser";
var first = "Bob";
var last = "Cravens";
$.post(url, { firstName: first, lastName: last }, function (data) {
$("#div5").html(data);
});
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function (data) {
$("#div6").html(data);
});
// works if div 7,div8,div9 are changed to div4,div5,div6
var url = "/Home/GetContactInfo";
var id = 123;
$.getJSON(url, { personId: id }, function (data) {
$("#div7").html(data.FirstName + " " + data.LastName);
$("#div8").html(data.State);
$("#div9").html(data.Age);
});
var url = "/Home/MyPartialView";
var info = "This is my information."
// note : data is the return data from the controller , we have to specify it here as a parameter for function
$.get(url, null, function (data) {
$("#div1").html(info);
});
</script>
<title>A study of population dynamics</title>
</head>
<body>
<div class="container">
<form id="myForm" action="/Home/FormPost" method="post">
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div5"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div6"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div7"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div8"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div9"><h2>Let jQuery AJAX Change This Text</h2></div>
<a href="#" class= "sum"> Sum </a>
<div id="result2"><h2> "result2 "</h2></div>
<div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
<div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
<div>Age: <input name="Age" type="text" value="43" /></div>
<input type="submit" value="Save Contact" />
<div id="postResult">?</div>
</form>
</div>
<button>Get External Content</button>
<button id="button2" >Get External Content</button>
</body>
</html>

masterinex

Re: How do I make a Sum button with ajax

6 years ago

the controller seems to be working fine, as i try http://localhost:58455/Home/Sum?a=1&b=2*/

it would display "3" in the browser, so there must be some issues with the Ajax request.

public ActionResult Sum(int a, int b)

{

return Content ( (a+b).ToString(), "text/plain") ;

}

jakecigar

Re: How do I make a Sum button with ajax

6 years ago

You need a unique identifier for each button…

<button id="button1">Get External Content</button>
<button id="button2" >Get External Content</button>

Then you use it like…

$("#button1").click(function () {…

and

$("#button2").click(function () {

If you use code like…

$("button").click(function () {

It would be called for every <button>

JΛ̊KE

masterinex

Re: How do I make a Sum button with ajax

6 years ago

just want to say thanks everyone who has responded to this thread , i finally managed to figure it out, ajax is so tricky , i really would like to know how u all started learning ajax.

jakecigar

Re: How do I make a Sum button with ajax

6 years ago

Back in the last millennium, I ignored the beasty called AJAX. Then one day, I read every document and example I could find. Asynchronous programming is a big deal to learn. And AJAX is just one part of it.

Later on jQuery was created, and it made it look easy.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

How do I make a Sum button with ajax

Replies(11)

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Re: How do I make a Sum button with ajax

Statistics

Tags

Actions

Related Posts