Solved

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

Posted on 2016-09-20
8
122 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 43

Expert Comment

by:zephyr_hex (Megan)
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 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41807753
It depends.  How does the user get to page 2 ?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
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 43

Accepted Solution

by:
zephyr_hex (Megan) 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

726 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