We help IT Professionals succeed at work.

jQuery .on("click", handler) not doing what I need it to do

Ralph
Ralph asked
on
164 Views
Last Modified: 2016-09-20
Likely an obvious mistake, but I cannot get links and functions to behave as I want them to.

Our story so far:
The .ready() function for prelist_plan_levels.html is $(document).ready(review_plan_levels);

That function's  jQuery populates the page, including some links, one of which is:
<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP" data-updown="UP">17</a>

Open in new window

Also, the first line of that function is
$('.UpDowngrade a').on( "click", listPlanLevelsClick ) ;

Open in new window


On clicking one of the links like the one shown above, I'm trying to get the following (incomplete) code to work:
// =================================================================================================
// This function responds to clicks in prelist_plan_levels.html

function listPlanLevelsClick(event) 
{ 
  event.stopPropagation();
  
  alert("inside function listPlanLevelsClick()") ;
  
  var UpDown='#' + $(this).data('UpDown');
  var posted_period='#' + $(this).data('PP');
  var scope='#' + $(this).data('scope');
  
  var php_params = 'job=UpDownGrade&UpDown='+UpDown+'&posting_period='+posted_period+'&scope='+scope ; 
  
  $('#debug').html(php_params) ;

    var jqXHR = $.ajax({
      url:        '/cmdb/PHP/do_DataTables_query.php' , 
      method:     "GET" ,
      cache:      false ,
      data:       php_params ,
      success:    load__list_plan_levels 
    }) ;
}

// -------------------------------------------------------------------------------------------------
// This function is the success callback for the AJAX that retrieved UpDowngradeable data
// When the page loads its .ready() function takes over.

function load__list_plan_levels()
{
  alert("inside function load__list_plan_levels()") ;
}

// =================================================================================================
// .ready() function for page:  list_plan_levels.html

function list_plan_levels()
{
  $('#UpDownGrade').DataTable() ;
  alert("inside function list_plan_levels()") ;
}

Open in new window

===============================
What happens is I get the alert for the third function, function list_plan_levels(), not either of the first two functions' alerts.
I need to do that ajax lookup and some other things before I get to that third function.

In real time I'm getting smarter WRT DataTables() and I will make some structure changes, but I still need to get past this hangup.

I've done this before, but I must be having a brain fart.

Thanks all,
Ralph
Comment
Watch Question

Kim WalkerWeb Programmer/Technician
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Thank you both, each of you answered a question that I had, whether I knew the question in advance or not!

Ralph
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions