user20358
user20358

Reputation: 14736

jquery get not working as per documentation

This is my code with this version of jquery

<script>

    jQuery(document).ready(function ()
    {
        $("#theOption").change(function ()
        {
            var urlString = '';

            if (this.value == 1) {
                urlString = 'http://localhost:10304/jsondata/1.json';
            }
            else {
                urlString = 'http://localhost:10304/jsondata/2.json';
            }



            alert("About to call service." );
            $.get(urlString, function (data)
            {
                alert('data returned: ' + data);
                $( "#results" ).html( data );
                alert( "Load was performed." );
            });
        });


    });

</script>


<div class="row">
   Select
   <select id="theOption">
       <option value="1">one</option>
       <option value="2">two</option>

   </select>
</div>

<div id="results">


</div>

On change of drop down I get the alert About to call service message. Then when I see the browser's network tools, I can also see the json url being called as per selection made in the drop down. This means that till the part of calling the url, everything works. However, the alert data returned doesnt get called, nor does the resultant div layer get the values from the json url called. As per this documentation here, I am doing nothing wrong. So what is going on?

Upvotes: 0

Views: 64

Answers (4)

Abhinav
Abhinav

Reputation: 408

i think $.get is meant for getting data from server side. so you cannot grab data from json. it works fine when i changed 1.jsom and 2.json to php and echo a string in these php file.

    <script src="jquery-1.8.1.js"></script>
<script>

    jQuery(document).ready(function ()
    {
        $("#theOption").change(function ()
        {
            var urlString = '';

            if (this.value == 1) {
                urlString = '1.php';
            }
            else {
                urlString = '2.php';
            }



            alert("About to call service." );
            $.get(urlString).done(function (data)
            {
                alert('data returned: ' + data);
                $( "#results" ).html( data );
                alert( "Load was performed." );
            });
        });


    });

</script>


<div class="row">
    Select
    <select id="theOption">
        <option value="1">one</option>
        <option value="2">two</option>
    </select>
</div>

<div id="results">


</div>

and this what i done in php file

<?php
echo "saasfafassfafafafsasf";
?>

Upvotes: 0

Janaka Dissanayake
Janaka Dissanayake

Reputation: 547

what are you returning from URL, have a look at the following sample

 $("#theOption").change(function ()
    {
        var urlString = '';

        if (this.value == 1) {
            urlString = 'http://ip.jsontest.com/';
        }
        else {
            urlString = 'http://ip.jsontest.com/';
        }



        alert("About to call service." );
        $.get(urlString, function (data)
        {
            alert('data returned: ' + data.ip);
            $( "#results" ).html( data.ip );
            alert( "Load was performed." );
        });
    });

Upvotes: 1

asprin
asprin

Reputation: 9823

This may not get you a working solution but will definitely help you assess the problem.

Attach the fail handler to your ajax call and see if that returns something.

$.get(urlString, function (data)
{
     alert('data returned: ' + data);
     $( "#results" ).html( data );
     alert( "Load was performed." );
}).fail(function(jqXHR, textStatus, errorThrown) {
    alert( "Ajax Error: "+textStatus );
});

More information about this can be found here.

Moreover, the same error (if it exists) should be shown in the browser console too.

Upvotes: 1

Samir
Samir

Reputation: 1368

Might be the issue with your URL, According to your code, it seems you are accessing your local Json file. If so then try using your folder structure instead of 'http://localhost:10304/jsondata/1.json'.

Upvotes: 0

Related Questions