Solved

Convoluted JS program flow?  Can this muck up a subsequent page's .ready() JavaScript?

Posted on 2016-10-04
3
54 Views
Last Modified: 2016-10-05
Easiest to first look at simple page populated by 3 Ajax calls.  See attachment 1 for appearance after query_number=1, and attachments 2, 3 for after a dropdown value has been selected.

The query_number=1 populates the dropdown.
The query_number=2 populates the first two tables, and =3 populates the 3rd table.

I have all code, invoking, ajax, successes, all in one function, and maybe a bad return (or two).
CAN this muck up what follows when a link is clicked and the subsequent page is miss-directed?

The JS code below works, but something bad happens afterwards.

The links (numbers) in the first two tables do not load the subsequent page into the right data-target, instead it fills the browser.
// ***************************************************************************************
// ***************************************************************************************
function review_plan_levels()
{ 
  
  $('body').one( "click", 'a.UpDowngrade', prelistPlanLevelsClick ) ;
  
  var alert_msg1_1='Did not find Table `Invoice`.' ;
  var alert_msg1_2='Did not find data in Table `Invoice`.' ;
  var alert_msg2_1='Did not find computed table(s) `yUpgradeable_3mo` or `yDowngradeable_3mo`.' ; 
  var alert_msg2_2='Table `yUpgradeable_3mo` contains 0 rows' ;
  var alert_msg2_3='Table `yDowngradeable_3mo` contains 0 rows' ;
  var alert_msg3_1='Did not find Table `yImport_Changes`.' ;
  var alert_msg3_2='Did not find data in Table `yImport_Changes`.' ;
  var posted_period ;
  
  $('#PleaseWait1').fadeOut("fast") ;
  $('#reference_period').css('width', '250px') ;
  
  // -----------------------------------------------------------------------------------------------
  
  var query_number=1;
  var php_params = 'job=Metrics_Lists&formToProcess=PlansMetricsSummary&PostingPeriod=&QueryNumber='+query_number ;  
  $('#debug').html(php_params) ;
  
  var jqXHR = $.ajax({
    url:        '/cmdb/PHP/do_Workflow_query.php' , 
    method:     "GET" ,
    cache:      false ,
    data:       php_params ,
    success:    populate_PlansMetricsSummary
  }) ;
  
  // -----------------------------------------------------------------------------------------------
  function review_plan_levels2()
  {
    query_number=2; 
    php_params = 'job=Metrics_Lists&formToProcess=PlansMetricsSummary&PostingPeriod='+posted_period+'&QueryNumber='+query_number ;  
    $('#debug').html(php_params) ;

    jqXHR = $.ajax({
      url:        '/cmdb/PHP/do_Workflow_query.php' ,  
      method:     "GET" ,
      cache:      false ,
      data:       php_params ,
      success:    populate_PlansMetricsSummary
    }) ;
  }
  return ;
  // -----------------------------------------------------------------------------------------------
  function review_plan_levels3()
  {
    query_number=3;
    php_params = 'job=Metrics_Lists&formToProcess=PlansMetricsSummary&PostingPeriod='+posted_period+'&QueryNumber='+query_number ;  
    $('#debug').html(php_params) ;

    jqXHR = $.ajax({
      url:        '/cmdb/PHP/do_Workflow_query.php' , 
      method:     "GET" ,
      cache:      false ,
      data:       php_params ,
      success:    populate_PlansMetricsSummary 
    }) ;
  }
  
  // ===============================================================================================
  function populate_PlansMetricsSummary(data, status, jqXHR)
  { 
    localStorage.ajax_outstanding-- ; 
    if ( localStorage.ajax_outstanding < 0 ) { localStorage.ajax_outstanding = 0 ; }
    
    $('#AjaxMessage').html(localStorage.ajax_outstanding+" Active Searches") ; 
    if (localStorage.ajax_outstanding <= 0) {  $("#progress_bar").hide() ;  }
    
    if (status !== "success")
    { 
      if ( query_number==1 ) { alert(alert_msg2_1) ; } 
      if ( query_number==2 ) { alert(alert_msg2_1) ; }
      if ( query_number==3 ) { alert(alert_msg2_1) ; }
      $('#AjaxResults').html("") ;
    }
    else
    { 
      var nrows = JSON.parse(data).nrows ; 
      if (nrows === 0) 
      {
        if ( query_number==1 ) { $('#AjaxResults').html(alert_msg1_2) ; }
        if ( query_number==2 ) { $('#AjaxResults').html(alert_msg2_2) ; }
        if ( query_number==3 ) { $('#AjaxResults').html(alert_msg3_2) ; }
        
        $('#AjaxResults').addClass('flashBkgrndRed');
        setTimeout(function() { $('#AjaxResults').removeClass('flashBkgrndRed'); }, 1000); 
        return ;
      }
      else 
      {
        var answer = JSON.parse(data).values ;
        if ( query_number==1 ) 
        { 
          PlansMetricsSummary_select_list(nrows, answer) ;
        }
        if ( query_number==2 ) 
        { 
          PlansMetricsSummary_up_gradeable(answer) ;
        }
        if ( query_number==3 ) 
        { 
          PlansMetricsSummary_import_changes(answer) ; 
        }
        
      }  // EO have rows
      
      // -------------------------------------------------------------------------------------------
      if ( query_number === 2 )
      { 
        nrows = JSON.parse(data).nrows2 ;

        if (nrows === 0) 
        {
          $('#AjaxResults').html(alert_msg2_3) ;
          $('#AjaxResults').addClass('flashBkgrndRed');
          setTimeout(function() { $('#AjaxResults').removeClass('flashBkgrndRed'); }, 1000); 
          return ;
        }
        else 
        {
          var answer = JSON.parse(data).values2 ;
          PlansMetricsSummary_down_gradeable(answer)
          review_plan_levels3() ;
        }
      }  // EO query_number=2
      
  
    }  // EO success
  }  //EO AJAX
  
  // ===============================================================================================
  function PlansMetricsSummary_select_list(nrows, answer) 
  {
    var posting_periodDD = $('#select_posting_period') ;
    for (var i=1; i<=nrows; i++)
    {
      posting_periodDD.append('<option value="' + answer[i].posting_period + '">' + answer[i].posting_period + '</option>') ;
    }
    
    
    $('#select_posting_period').change( function()
    {
      posted_period = $('#select_posting_period option:selected').val() ; 
      
      $('#reference_period').css('width', '550px') ;
      $('#PleaseWait1').fadeIn(4000) ;
       
      
      review_plan_levels2(  )  ;
    }) ;
  }
  // -----------------------------------------------------------------------------------------------
  function PlansMetricsSummary_up_gradeable(answer)
  { 
    
    $('#PleaseWait1').fadeOut("fast") ;
    setTimeout(function(){ $('#reference_period').css('width', '245px') ; }, 2000);
    
    $('#body1_1_1').html(posted_period) ;
    
    var Up1 = answer[1]['Upon Import'] ;
    var RemainingUp = answer[1]['# Remaining'] ;
    var Up2 = answer[2]['Upon Import']  ;
    var Up3 = answer[3]['Upon Import']  ;
    
    if ( Up1 != 0 )
    {  $('#body1_1_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP" data-updown="UP">'+Up1+'</a>') ; }
    else
    {  $('#body1_1_2').html('0') ; }
    $('#body1_1_3').html(answer[1]['# Reviewed']) ; 
    $('#body1_1_4').html(answer[1]['# Resolved']) ;
    if ( RemainingUp != 0 )
    {  $('#body1_1_5').html(RemainingUp) ; }
    else
    {  $('#body1_1_5').html('0') ; }
    
    if ( Up2 != 0 )
    {  $('#body1_2_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP-1" data-updown="UP">'+Up2+'</a>') ; }
    else
    {  $('#body1_2_2').html('0') ; }
    $('#body1_2_3').html(answer[2]['# Reviewed']) ;
    $('#body1_2_4').html(answer[2]['# Resolved']) ;
    $('#body1_2_5').html(answer[2]['# Remaining']) ;
    
    if ( Up3 != 0 )
    {  $('#body1_3_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP-2" data-updown="UP">'+Up3+'</a>') ; }
    else
    {  $('#body1_3_2').html('0') ; }
    $('#body1_3_3').html(answer[3]['# Reviewed']) ;
    $('#body1_3_4').html(answer[3]['# Resolved']) ;
    $('#body1_3_5').html(answer[3]['# Remaining']) ;
    
  }
  // -----------------------------------------------------------------------------------------------
  function PlansMetricsSummary_down_gradeable(answer)
  {
    $('#body2_1_1').html(posted_period) ;
    
    var Dn1 = answer[1]['Upon Import'] ;
    var RemainingDn = answer[1]['# Remaining'] ;
    var Dn2 = answer[2]['Upon Import']  ;
    var Dn3 = answer[3]['Upon Import']  ; 
    
    if ( Dn1 != 0 )
    {  $('#body2_1_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP" data-updown="DOWN">'+Dn1+'</a>') ; }
    else
    {  $('#body2_1_2').html('0') ; }
    $('#body2_1_3').html(answer[1]['# Reviewed']) ;
    $('#body2_1_4').html(answer[1]['# Resolved']) ;
    if ( RemainingDn != 0 )
    {  $('#body2_1_5').html(RemainingDn) ; }
    else
    {  $('#body2_1_5').html('0') ; }
    
    if ( Dn2 != 0 )
    { $('#body2_2_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP-1" data-updown="DOWN">'+Dn2+'</a>') ; }
    else
    { $('#body2_2_2').html('0') ; }
    $('#body2_2_3').html(answer[2]['# Reviewed']) ;
    $('#body2_2_4').html(answer[2]['# Resolved']) ;
    $('#body2_2_5').html(answer[2]['# Remaining']) ;
    
    if ( Dn3 != 0 )
    { $('#body2_3_2').html('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-target="center_body" data-pp="'+posted_period+'" data-scope="PP-2" data-updown="DOWN">'+Dn3+'</a>') ; }
    else
    { $('#body2_3_2').html('0') ; }
    $('#body2_3_3').html(answer[3]['# Reviewed']) ;
    $('#body2_3_4').html(answer[3]['# Resolved']) ;
    $('#body2_3_5').html(answer[3]['# Remaining']) ;
    
  }
  // -----------------------------------------------------------------------------------------------
  function PlansMetricsSummary_import_changes(answer)
  { 
    var ChangedPlans = answer[1]['# of Modems']  ;
    var ChangedStatus =  answer[2]['# of Modems'] ;
    
    $('#body3_1_1').html(answer[1]['Import Changed data for:']) ;
    if ( ChangedPlans != 0 )
    { $('#body3_1_2').html('<a href="#" ID="ImportChangedPlans">'+ChangedPlans+'</a>') ; }
    else
    { $('#body3_1_2').html('0') ; }
    
    $('#body3_2_1').html(answer[2]['Import Changed data for:']) ;
    if ( ChangedStatus != 0 )
    { $('#body3_2_2').html('<a href="#" ID="ImportChangedStatus">'+ChangedStatus+'</a>') ; }
    else
    { $('#body3_2_2').html('0') ; }
  }
  
  return ;
}

Open in new window

after-query_number-1.PNG
after-query_number-3.PNG
populated-page.txt
index.html
0
Comment
Question by:Ralph
  • 2
3 Comments
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
Technically, a page must "unload" before another page loads. So what happens in one page wouldn't affect another page. The DOM is cleared before the next page loads.

It's impossible to tell what you're trying to do here without a working page to view. What do you hope to achieve by nesting all these function definitions inside another function. This means that those functions aren't defined until the main function is executed.
0
 

Author Comment

by:Ralph
Comment Utility
Hi Kim,

No, it's fine that they aren't defined until their parent is invoked.  Single purpose code.

-- -- --

So, it's good to know that there is no 'confusion' persistence; now I just have to figure out why the next page doesn't load correctly.

Thanks Kim,
Ralph
0
 

Author Closing Comment

by:Ralph
Comment Utility
Already commented.
Thanks.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now