How to pass variable data between two html pages using jQuery - javascript

How to pass variables between two html pages using jQuery? I have two html pages main.html and index.html. How to call a function from main.html?

This is not the best practice but you could do something like
from the first page, write an hyperlink to the next page,
line
click here
This will redirect you to page2 and you will get the variable in the URL.
This is called GET method
In page 2, you could write a method like,
var parseGetVariables = function(url) {
var urlParams = {};
url.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) {
urlParams[$1] = $3;
}
);
return urlParams;
}
and then,
var url = location.search;
var result = parseGetVariables(url );
and then access the variable as,
result.variable_name
As you can see, the parameters is decoded from the URL using regEx.

If you are linking from one to the other, look into query string attributes, session cookies or local storage. detecting if it is there and calling your function.
if index.html is a parent of main.html you could use the approach marked in this question.
if both pages are linked to from unique sources you will need some kind of socket server. my favourite being socket.io

localStorage (does not work on Private mode).
to set: localStorage.setItem('referal', referal);
to get var referal= localStorage.getItem('referal');

Related

Passing Parameter though html server pages using '#'

I am trying to pass a variable through an HTML page, and I got it working, but when I changed to a server, the HTML pages go from 'page1.html' to 'page1#' After this change I can no longer send parameters to my second page as they come out as 'undefined'. The passing of the variable works, it's just retrieving it.
The URL looks like this: http://localhost:1337/page1#?34
Here is the old working code on that no longer works:
// Takes parameters from HTML address and passes it through
var queryString = decodeURIComponent(window.location.search);
queryString = queryString.substring(0);
var queries = queryString.split("&");
var placeHolder = queries[0];
var Final = parseFloat(placeHolder)
I want to extract the number 34 from the URL and store it in a JS variable.
Thanks in advance for any advice
I'm not getting your point if you want some data from one page to another, so you can use localstorage for example
//index1.html
<script>
localStorage.setItem("item1", 34)
</script>
//index2.html
localStorage.getItem("item1")
var item = localStorage.getItem("item1");
</script>

passing js value to another php page using java script and receiving value

I want to to pass a js variable to another page ..what to do..code is given bellow..
Code
`
$('#disInfo').on('click','tr',function(){
var obj = $(this);
var result= obj.find('td').eq(1).html();
window.location.href='http://localhost/Trying/search_cus.php';
});
`
I want to send the value of result variable with page link and how to receive the value in another page
You could pass it via an url parameter. If result contains html or characters that cannot be used in an url then you need to encode it first.
$('#disInfo').on('click','tr',function(){
var obj = $(this);
var result = encodeURIComponent( obj.find('td').eq(1).html() );
window.location.href='http://localhost/Trying/search_cus.php?result=' + result;
});
On the target page you can get url parameters via window.location.search ... there's plenty of examples on stackoverflow on how to do that.
NOTE: be aware that the server will also get the request for ?result=whatever. If the server side code processes this (eg PHP: $_GET['result']) you must ensure it sanitizes the value to prevent malicious code injection.
BTW, other ways of passing data is via cookies, sessionStorage, localStorage, etc.

Retrieving the query strings from the URL

I am navigating from one page in to other pages, while navigating I am passing two query parameters in the javascript as
var redirect_page = '<%= ResolveUrl("~/GUI/ReviewNEW.aspx") %>'+"?testDate=" + lDate;
window.location = redirect_page;
So the passed date is in the URL looks like
In the called page ReviewNEW.aspx.cs, I need to retrieve the query parameter testDate. I am using
private string l_Date = Request.QueryString["testDate"].ToString();
I am not sure if this will be converting in to 10/14/2016 so I can use this value in the select statement.
Try this:
System.Web.HttpUtility.UrlDecode("12%2F10%2F2011+10%3A22%3A11");
Gives
"12/10/2011 10:22:11"

Sending and getting data via $.load jquery

I'm writing a system in HTML5 and Javascript, using a webservice to get data in database.
I have just one page, the index.html, the other pages i load in a <div>
The thing is, i have one page to edit and add new users.
When a load this page for add new user, i do this:
$("#box-content").load("views/motorista_add.html");
But, i want send a parameter or something else, to tell to 'motorista_add.html' load data from webservice to edit an user. I've tried this:
$("#box-content").load("views/motorista_add.html?id=1");
And i try to get using this:
function getUrlVar(key) {
var re = new RegExp('(?:\\?|&)' + key + '=(.*?)(?=&|$)', 'gi');
var r = [], m;
while ((m = re.exec(document.location.search)) != null)
r.push(m[1]);
return r;
}
But don't work.
Have i an way to do this without use PHP?
This won't work. Suppose your are loading the motorista_add.html in a page index.html. Then the JS code, the function getUrlVar(), will execute on the page index.html. So document.location that the function will get won't be motorista_add.html but index.html.
So Yes. To do the stuff you are intending, you need server side language, like PHP. Now, on the server side, you get the id parameter via GET variable and use it to build up your motorista_add.php.
You can pass data this way:
$("#box-content").load("views/motorista_add.html", { id : 1 });
Note: The POST method is used if data is provided as an object (like the example above); otherwise, GET is assumed. More info: https://api.jquery.com/load/

Razor #Url.Action returns with the optional id parameter to a javascript variable

Is it intended that the #Url.Action method returns the current url if the user is currently within the controller and action that the parameters reference?
I have a simple setup for our controllers.
OrderableTest/Details/Id
ResultableTest/Details/Id
If I call #Url.Action("Details", "Orderable") from the home controller (Home/Index) or from the Resultable/Details I will get the proper URL saved to a javascript variable ("/Orderable/Details"). If, however, I am on a Details page then the id gets included in the url. For example, I am on the page Orderable/Details/12345 and I call #Url.Action("Details", "Orderable"), instead of getting "/Orderable/Details" I get "/Orderable/Details/12345". Is this the intended functionality?
Routing map is default.
Javascript as requested:
var orderableDetailUrl = '#Url.Action("Details", "Orderable")';
var resultableDetailUrl = '#Url.Action("Details", "Resultable")';
alert(orderableDetailUrl);
alert(resultableDetailUrl);
As mentioned by #JotaBe in the comments above, the UrlHelper uses the context information. Thus an #Url.Action called for the page that you're currently on will also include optional id/parameters.
To get around this, you can pass in a blank optional parameter to the method. For my problem above, it was solved with the following code
var resultableDetailUrl = '#Url.Action("Details", "Resultable", new { id = "" })';
var orderableDetailUrl = '#Url.Action("Details", "Orderable", new { id = "" })';
Which both will properly return /Orderable/Details/ and /Resultable/Details/ regardless of which page the user is currently on.

Categories

Resources