Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-09-20
8
Medium Priority
?
152 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
[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
  • 4
  • 4
8 Comments
 
LVL 44

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 44

Expert Comment

by:zephyr_hex (Megan)
ID: 41807753
It depends.  How does the user get to page 2 ?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 44

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 44

Accepted Solution

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

610 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