Reputation: 14736
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
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
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
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
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