Ajax function to return value

JavaScript
1

I have a function that i want to call another function to get a result from the server web page (text format) and return it to the original function

this is not working - what am I doing wrong?

function cityconfirm()
{
var cityid=document.getElementById('city').value;
alert(getcityvalue(cityid));
return confirm('Are you sure you want to delete')
}

function getcityvalue(cityid)

{

jQuery.ajax({
url: 'http://mysite.com/lookupcity.asp?cityid=' + cityid,
type: 'get',
dataType: 'text/html',
success:function(data)
{
//alert('xx');
//alert(data);
return(data);
//document.write(data);
}
});
}
2

What you doing wrong in basic asynchronous AJAX. Look at my code and explain

function cityconfirm()
{
    var cityid = document.getElementById('city').value;
    alert(getcityvalue(cityid));
    return confirm('Are you sure you want to delete')
}


function getcityvalue(cityid)
{
    // this will generate another thread to run in another function
    jQuery.ajax({
        url: 'http://mysite.com/lookupcity.asp?cityid=' + cityid,
        type: 'get',
        dataType: 'text/html',
        success: function(data)
        {
            //
            return(data);
        }
    });
    // it will always return here in function
    return "Hello";
}

As you see the above code, it always return “Hello” because the ajax call is always generate another thread to run, not wait for it to return value

3

so what is the correct way to do this?

4

Remove the final return “Hello” and specify an error condition or some other reason why you would want to return something other than the data.


function getcityvalue(cityid){
    // this will generate another thread to run in another function
    jQuery.ajax({
        url: 'http://mysite.com/lookupcity.asp?cityid=' + cityid,
        type: 'get',
        dataType: 'text/html',
        success: function(data) {
            return(data);
        }, 
        error: function() {
           return "Hello";
        }
    });
}
5

This is the way people usually do


function cityconfirm()
{
    var cityid = document.getElementById('city').value;
    getcityvalue(cityid);    
}

function successCallBack(returnData){
    // the main process have to be here
    confirm('Are you sure you want to delete');
}

function getcityvalue(cityid)
{
    // this will generate another thread to run in another function
    jQuery.ajax({
        url: 'http://mysite.com/lookupcity.asp?cityid=' + cityid,
        type: 'get',
        dataType: 'text/html',
        success: successCallBack
    });  
}
6

I tried this but it’s not giving any errors but not giving the confirm either
why whoudl the successCallBack not be called

7

The confirm is not called because the ajax request is not success so that it will not call the successCallBack. Please check if you call the internal URL and it really return value. Do you use firebug or chrome debug to see the ajax return value?

8

yes I checked that and the url is returning a value

9

Not sure how you check but this code will work well. I has already checked it

function successCallBack(returnData){
    // the main process have to be here
    confirm('Are you sure you want to delete');
}

function getcityvalue(cityid)
{
    // this will generate another thread to run in another function
    jQuery.ajax({
        url: '?cityid=' + cityid,
        type: 'get',
        dataType: 'text/html',
        success: successCallBack
    });  
}
function cityconfirm()
{
    //var cityid = document.getElementById('city').value;
    var cityid = 1;
    getcityvalue(cityid);    
}
cityconfirm();

You can see I comment this line:

var cityid = document.getElementById('city').value;

Because I want to make sure we are in the case we can make sure the value of cityid 's fine

10

I don’t know why it’s not working for me
it’s nto calling the success call back

teh url just returns one word (a city)

here is a full test (it uses another file called city.html which has the word chicago in it (just for testing)

<!DOCTYPE html>

<html>
<head>


    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script language="Javascript">
function successCallBack(returnData){
    // the main process have to be here<br>
alert(returnData);
    confirm('Are you sure you want to delete');
}

function getcityvalue(cityid)
{
	
    // this will generate another thread to run in another function
    jQuery.ajax({
		
        url: 'city.html',
        type: 'get',
        dataType: 'text/html',
        success: successCallBack
    });  
}
function cityconfirm()
{
	
	alert("here");
   // var cityid = document.getElementById('city').value;
    var cityid = 1;
    getcityvalue(cityid);    
}






</script>

</head>
<body>

<a href=# onClick="cityconfirm()">click here</a>

</body>
</html>
11

Here is the code I edited and it work well

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

        <script language="Javascript">
            function successCallBack(returnData) {
                // the main process have to be here<br>
                alert(returnData);
                confirm('Are you sure you want to delete');
            }

            function getcityvalue(cityid)
            {

                // this will generate another thread to run in another function
                jQuery.ajax({
                    url: 'city.html',
                    type: 'get',
//                    dataType: 'text/html',
                    success: successCallBack
                });
            }
            function cityconfirm()
            {

                alert("here");
                // var cityid = document.getElementById('city').value;
                var cityid = 1;
                getcityvalue(cityid);
            }

        </script>
    </head>
    <body>
        <a href=# onClick="cityconfirm()">click here</a>
    </body>
</html>

As you see I comment this line

dataType: 'text/html',

You can read more detail about it here : https://api.jquery.com/jQuery.ajax/

12

thanks for your help
this works as an onclick for a href

it does not work when clicking on a button on a form - why not?