Events not triggered when posting json string using jquery

Question

I'm totally new to this, so apologies if I'm not explaining this correctly.

I want to post some data in json format to a rest service. I'm trying to get this work with JQuery in a simple .cshtml (razor) page.

My json string looks like this:

{
   "ListRequest":{
      "Values":[
         {
            "Name":"SC",
            "Value":"PRO001"
         },
         {
            "Name":"PC",
            "Value":"Z0R14"
         }
      ]
}

}

I need to pass 2 values from a form into this string and then post it but I'm not sure how do I declare this in javascript and then post it to my $.post function.

My HTML looks like this:

<form action="/" id="getListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get List">
</form>

I thought I'd just declare a var:

var jsonText = '{"ListRequest":{ "Values":[' +
'{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
'{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';

Is that the correct way to handle this??

Then I've got my 'post' code to test:

var posting = $.post( url, term);

posting.done(function (data) {
    var content = $(data).find("#content");
    $("#result").empty().append(content);
});

But whenever I call this, it put these 2 values as part of a query string, instead of doing an actual post where this data is not visible in the url.

http://localhost/WebTest/WebDataService.svc/GetList?txtSC=brc001&txtPC=12345

Can someone tell me how to fix this??

Thanks.

UPDATE:

Here is the full code from my test page as it still not working for me. I just noticed that the submit event is not triggered. It seems to be putting the textbox and value automatically because they are part of the form, but my event is definitely not triggered as I've just commented all the code and put a alert('test'); and it didn't show up.

Any ideas?

Thanks.

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>

<script type="text/javascript">

// Attach a submit handler to the form
$("#getListForm").submit(function (event) {
    event.preventDefault();

    //var jsonText = '{"ListRequest":{ "Values":[' +
    //       '{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
    //       '{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';


    var obj = {
        ListRequest: {
            Values: [
                 {
                     Name: "SC",
                     Value: $('input[name="txtSC"]').val()
                 },
                 {
                     Name: "PC",
                     Value: $('input[name="txtPC"]').val()
                 }
            ]
        }
    }


    var jsonObj = JSON.stringify(obj);

    var $form = $(this), term = jsonText, url = 'http://localhost/WebTest/DataService.svc';

    $.post(url + '/GetList', jsonObj,
    function (data, status) {
    alert("Data: " + data + "\nStatus: " + status);
    });

    // Send the data using post
    //var posting = $.post( url, term);
    //posting.done(function (data) {
    //    var content = $(data).find("#content");
    //    $("#result").empty().append(content);
    //});

});
</script>

@{
    ViewBag.Title = "Json Test";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>


<form id="getListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get List">
</form>

<div id="result"></div>

Thanks.

UPDATE:

Latest code where I've updated the term to use the jsonObj and I've put my code in the $(document).ready block as suggested:

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {
    // Attach a submit handler to the form
    $("#getDocumentListForm").submit(function (event) {

        event.preventDefault();
        alert('test1');

        var obj = {
            ListRequest: {
                Values: [
                     {
                         Name: "SC",
                         Value: $('input[name="txtSC"]').val()
                     },
                     {
                         Name: "PO",
                         Value: $('input[name="txtPC"]').val()
                     }
                ]
            }
        }


            var jsonObj = JSON.stringify(obj);

            var $form = $(this), term = jsonObj, url = 'http://localhost/WebTest/DataService.svc';

            alert(term);
            alert(url);

            $.post(url + 'GetList', jsonObj,
            function (data, status) {
                alert("Data: " + data + "\nStatus: " + status);
            });

            //Tried posting using term but no luck. Same problem.
            //$.post(url + 'GetList',
            //function (data, status) {
            //    alert("Data: " + data + "\nStatus: " + status);
            //});

            // Send the data using post
            //var posting = $.post(url, term);
            //posting.done(function (data) {
            //    //var content = $(data).find("#content");
            //    //$("#result").empty().append(content);
            //    alert(data)
            //});

            alert('test2');
        });
    });

</script>

@{
    ViewBag.Title = "Test";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>


<form id="getDocumentListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get Document List">
</form>

<div id="result"></div>

Finale Update on this question

MAKE SURE:

1. NOT TO USE IE11 WITH JQUERY, WELL AT LEAST JQUERY 2.1.1! DON'T KNOW HOW WELL IT WORKS WITH OTHER VERSIONS OF IE.

2. ALWAYS TEST WITH OTHER BROWSERS

3. MAKE SURE TO SET YOUR JQUERY SRC TO THE CORRECT HTTP OR HTTPS DEPENDING ON WHAT YOU USE.

That's it.

Answer 1

I suppose what's going on there is that you are trying to pass an undefined variable named term instead of jsonText, so the javascript code is throwing an uncaught exception and gets ignored, and you get a normal action from your form element.

You should pass the correct data. And also, knowing about JSON.stringify can probably save you a lot of time and headaches ;). You could build your object like so:

var obj = {
    ListRequest: {
        Values: [
             { 
                 Name:  "SC",
                 Value: $('input[name="txtSC"]').val()
             },
             {
                 Name:  "PC",
                 Value: $('input[name="txtPC"]').val()
             }
        ]
    }
};

var jsonObj = JSON.stringify(obj);

Another pitfall I can think of in your code, is that you have bound your AJAX to a click event on your submit button, or to an onsubmit event, and you are not preventDefault()ing.

Edit

Given the code you posted, you have a couple of mistakes:

1. Did you wrap your code into a jQuery(document).ready() block?
2. You commented out jsonText but still assign it to the variable term, causing an uncaught exception.

Fix these two things and your POST request will be done correctly.

On the other hand, why on Earth are you using jQuery version 1.5?