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
Solved

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

Posted on 2016-09-20
8
114 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

856 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