Link to home
Start Free TrialLog in
Avatar of Ralph
RalphFlag for United States of America

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_rightmarginTableLink(tablename, 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.

// =================================================================================================
// 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()
// 

Open in new window


What am I overlooking here?

Thank you.
ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Ralph

ASKER

Didn't let that percolate to higher brain functions.  Oops.

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
Avatar of Ralph

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!
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.
Avatar of Ralph

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.
You're welcome.