Solved

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

Posted on 2016-10-04
3
113 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41829131
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
ID: 41830439
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
ID: 41830442
Already commented.
Thanks.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

734 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