Ralph
asked on
AJAX function() is succeeding, but not posting correctly
I'm using jQuery to catch a click on a link. The jQuery command invokes a function that correctly reads a counter next to it to the link to determine the row ID to use in the subsequent SQL query.
In that function, (named loadTables(event)), I call function clicked_rightmarginTableLi nk(tablena me, rowno, url, uniqTableID),
which does the AJAX, and that works fine.
It invokes the PHP with does the query right and generates the path to the newly created html page to load.
Two problems.
A hopefully simple one first.
The page gets generated into a DIR I've named "temp", but it immediately disappears!
Might that be a netbeans 'feature'?
Now the real mystery.
An alert to notify me of the final page name fires off BEFORE the function below it that does the call to the AJAX-running function.
What am I overlooking here?
Thank you.
In that function, (named loadTables(event)), I call function clicked_rightmarginTableLi
which does the AJAX, and that works fine.
It invokes the PHP with does the query right and generates the path to the newly created html page to load.
Two problems.
A hopefully simple one first.
The page gets generated into a DIR I've named "temp", but it immediately disappears!
Might that be a netbeans 'feature'?
Now the real mystery.
An alert to notify me of the final page name fires off BEFORE the function below it that does the call to the AJAX-running function.
// =================================================================================================
// This prepares prepares for clicks to the views and tables links on the right side
function RightMargin() // ready() for right_margin.html
{
$( 'a.tables' ).on("click",loadTables) ;
$( 'a.views' ).on("click",loadViews) ;
}
// =================================================================================================
// As per set up in function RightMargin(), this responds to table links clicked in the right margin
function loadTables(event)
{
event.preventDefault() ;
var thislink=$(this).attr('href') ; // The URL of the link clicked
var destination='#' + $(this).data('target'); // The TARGET of the link clicked
var id_of_rowno='#' + $(this).data('link'); // Add'l info in the <input> element
var rowno = $(id_of_rowno).val() ; // Reads the value the the counter
var tablename= $(this).data('link'); // Use this value, ~ RtMgn_tablename
tablename = tablename.substring(6) ; // to extract the table whose data must be loaded
// getRandomIntInclusive(min, max) // Thinking (now) that I'll populate the form
var uniq_file_id = getRandomIntInclusive(1, 9999999999) ; // and have to save it uniquely before loading it
// This function will do the AJAX and return the page to load the the form populated
// after the SQL activity
// HOWEVER when I run this, I'm getting the alert message below as the very first thing,
// before it even calls this function!!!
var new_url = clicked_rightmarginTableLink(tablename, rowno, thislink, uniq_file_id) ;
// This alert is the first thing I see!
alert("new_url="+new_url) ;
// Load the file
$(destination).load(new_url, function( response, status, xhr )
{
if ( status == "error" )
{
var msg = "Sorry but there was an error: ";
alert( msg + xhr.status + " " + xhr.statusText );
}
}) ;
}
// *************************************************************************************************
function clicked_rightmarginTableLink(tablename, rowno, url, uniq_file_id)
{
// Get data from form element to be used for PHP SQL search
var php_params = "job=SearchUsing&FormName=form_RightMargin&tablename="+tablename+"&rowno="+rowno ;
php_params = php_params+"&uniq_file_id="+uniq_file_id+"&url="+url ;
// Would like to use DIV to keep user informed while waiting
$(window.parent.document).find('.header-container .header #AjaxSearches').html(ajax_outstanding+" Active Searches") ;
// -----------------------------------------------------------------------------------------------
// Do the magic
// Change the url to your PHP page
// I'm using php_params (see above) to pass info to PHP
// Change the names of your beforeSend, fail, and success JS functions that will respond to
// this AJAX call. (beforeSend line is optional)
var jqXHR = $.ajax({
url: 'http://localhost/Cell_Modems/PHP/do_sql_query.php' ,
method: "GET" ,
cache: false ,
data: php_params ,
beforeSend: beforeSend_rightmarginTableLink ,
fail: fail_rightmarginTableLink ,
success: success_rightmarginTableLink,
stop: stop_rightmarginTableLink
}) ;
// -----------------------------------------------------------------------------------------------
function beforeSend_rightmarginTableLink(jqXHR, settings)
{
// Again, I'd like to keep the user updated
ajax_outstanding++;
$(window.parent.document).find('.header-container .header #AjaxSearches').html(ajax_outstanding+" Active Searches") ;
$(window.parent.document).find('.header-container .header #AjaxResults').html("") ;
// Clear now irrelevant values
return ;
} ;
// -----------------------------------------------------------------------------------------------
function fail_rightmarginTableLink(jqXHR, errDesc, exception)
{
// Deliver the bad news
ajax_outstanding-- ;
$(window.parent.document).find('.header-container .header #AjaxSearches').html(ajax_outstanding+" Active Searches") ;
alert(errDesc);
} ;
// -----------------------------------------------------------------------------------------------
function success_rightmarginTableLink(data, status, jqXHR)
{
// Update the user
ajax_outstanding-- ;
$(window.parent.document).find('.header-container .header #AjaxSearches').html(ajax_outstanding+" Active Searches") ;
if (status !== "success")
{
alert('Search results not found.') ;
$(window.parent.document).find('.header-container .header #AjaxResults').html("") ;
}
else
{
alert("Before var nrows") ; // This alert shows 1 row returned, but AFTER the the alert() that's supposed to come later!
var nrows = JSON.parse(data).nrows ;
alert("nrows="+nrows) ;
if (nrows === 0)
{
$(window.parent.document).find('.header-container .header #AjaxResults').html("There is no data with that ID.") ;
}
else
{
alert("Got an asnwer! "+JSON.parse(data).FileToLoad) ;
return JSON.parse(data).FileToLoad ;
} // EO nrows != 0
} // EO success
}; // EO function success_4ModemSwap_Aircraft((data, status, jqXHR)
// -----------------------------------------------------------------------------------------------
function stop_rightmarginTableLink( response, status)
{
// Not sure about this. May just report when all done
ajax_outstanding = 0 ;
$(window.parent.document).find('.header-container .header #AjaxSearches').html(ajax_outstanding+" Active Searches") ;
}
} // EO AJAX function clicked_rightmarginTableLink()
//
What am I overlooking here?
Thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Netbeans with messing with me here too, as the new .html is showing up in the desired DIR, but in the IDE they don't show up.
I hope that's a GUI error only and not at a level that affects me.
Ciao!
I hope that's a GUI error only and not at a level that affects me.
Ciao!
Like I said, I don't use an IDE so I don't have those problems. I always run the pages from the web server so I can see how they will actually work.
ASKER
I think your approach, rather than promises, (which as far as I'm concerned are 'promises to work', but I have no clue how I'd implement one), is the method I'm going to take.
Thanks Dave.
Thanks Dave.
You're welcome.
ASKER
I guess I'm going to have to loop and look, which blows away the ASync benefit.
I'm saved though by this being a 1-user application, she'll just have to wait for the URL or some other return value to be addressed before the AJAX .load function.
That would explain the load not loading, because it already did!
Thank you again Dave,
Ralph