Solved

JS Functions, extracting data from data-varname input elements, Ajax, and DataTables().  What are some sequence options?

Posted on 2016-09-20
8
84 Views
Last Modified: 2016-09-23
I can extract data from a link (HTML5 input data-varname elements) fine, and use that data to do the ajax with it returning my result.

The success callback is invoked, but that's not the .ready() function of the page I next want to load.
I use named functions, keeping code out of HTML.

In all the info on DataTables() it looks like I want to acquire the ajax results in the .ready() or other destination page JS.

My quandary is how to get page 1's data- info into the ajax parameters.
// =================================================================================================
// This function responds to clicks in prelist_plan_levels.html

function listPlanLevelsClick(event) 
{ 
  event.preventDefault();
  
  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(data)
{
  alert("inside function load__list_plan_levels() with SQL results") ;
}

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

function list_plan_levels()
{
  alert("inside function list_plan_levels(), the new page's .ready() function.") ;
  $('#UpDownGrade').DataTable() ;
}

Open in new window


THANKS!
0
Comment
Question by:Ralph
  • 4
  • 4
8 Comments
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41807631
I'm not sure I completely understand, so let me state what I think you're asking:  The JS you've posted above is linked / referenced in Page 1, which contains your HTML elements.  You want to know how to get the data attributes from those HTML elements and use them in your JS.

You can reference the ID's of the elements from page 1.  The JS file is linked / referenced in the HTML page, so it will be able to access the HTML elements by ID.

var dataVal = $('#elementFromPage1ID').data("varname");

Open in new window

0
 

Author Comment

by:Ralph
ID: 41807744
Hi,

I am getting that data using jQuery via:
var UpDown        = $(this).data('updown'); 

Open in new window

just fine, since $(this) is the link clicked that invoked the JS.
I follow you.

My question, hopefully better explained, is, when I click on a link on page 1 that has embedded info, I want to use that data when I get to page 2's .ready() function.

I now have a .on("click"....) solution to get the embedded info, do the ajax, and return, but I want to do that ajax in page 2.

I'm sure there are several ways to do this, but what are my straight forward options?

Thanks!
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41807753
It depends.  How does the user get to page 2 ?
0
 

Author Comment

by:Ralph
ID: 41807770
Clicking that very link.

The .ready() in the new page won't know about the invoking link's data; will it?
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41807825
Nope.  But you have some options for how to get the data to page 2.  Perhaps the easiest would be to append an url parameter to your link to page 2, and then parse the url parameters on page 2 to get the value.  If you do not want the user to easily manipulate the url parameter, you should not use this method.  If the data you're sending is not sensitive (and does not lead to sensitive info in page 2), then using an url parameter is fine.

Another way would be to send the data to page 2 via POST (using AJAX), and then receive it in page 2.  This is a bit more complex because you can't receive POST values in JavaScript.  You would need to receive the POST data via server side script, add a hidden field to the DOM that holds the value of the data, and then use JavaScript to access the value of the hidden field.  This method is preferable if you don't want the user to simply change the url parameter on page 2.

So, for example, if the data is an id, and bring up a user's information on page 2, you would not want to use an url parameter.  The user could just change the url parameter and see someone else's info.
0
 

Author Comment

by:Ralph
ID: 41807832
Hmmm, like that, I'll keep it in mind.  This is all internal to my company so GET is fine.

However the data will be / can be hundreds of rows of data c/o AJAX to PHP to SQL and back.

I was thinking I might fit  "window.location = ..." into the solution somehow within the calllback function load__list_plan_levels(data).
Not sure how that would help though, as the data still won't get to page 2's JS.

Or, I guess I could use localStorage.myvariable.
I'm leaning that way for the 3 variables I need to generate the SQL to get that json array.

I'm still open to ideas!

Thanks zephyr_hex,
Ralph
0
 
LVL 42

Accepted Solution

by:
zephyr_hex earned 500 total points
ID: 41808991
If you have that much data, I suspect you may want to save it to a database when navigating away from page 1, and then retrieve what you need from the database for page 2.  You really ought to only need a variable or two passed between pages -- anything more should be a call to a database.
0
 

Author Closing Comment

by:Ralph
ID: 41813276
Yes.  The thought is to store the vars locally and do the sql once I get to the 2nd page.

Thanks zephyr_hex,
Ralph
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

706 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

21 Experts available now in Live!

Get 1:1 Help Now