Passing Parameter though html server pages using '#' - javascript

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>

Related

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.

How to pass variable data between two html pages using jQuery

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');

How to reload a page with javascript sending both GET and POST, and append additional parameter?

I have a page with an select box, which fires an onChange event. In this Java-Script snippet, I would like to reload the current page, including the GET and POST parameters that where sent during request. AFAIK, this can be achieved by using window.location.reload(), or window.location.href = window.location.href when sending POST data is not required.
However, I need to append an additional value (actually, the value of the select element), additionally to the previously sent element. I do not care whether the data is sent using POST or GET. Is there a way to achieve the desired behavior?
To accomplish this you are going to have to rebuild a request from scratch. In the case of get requests, the arguments are easily accessible in the query string but post requests are a little trickier. You will need to stash all that data in hidden input elements or something so that you can access it.
Then you can try something like this:
var queryString = windlow.location.search; //args from a previous get
var postArgs = $("#myPostArgsForm").serialize(); //args from a previous post... these need to be saved and added to the html by the server
//your additional data... this part you probably need to adapt
//to fit your specific needs. this is an example
var myNewArgName = encodeURIComponent("newArg");
var myNewArgVal = encodeURIComponent("Hello!");
var myNewArgString = myNewArgName + "=" + myNewArgVal;
//if there is no queryString, begin with ?
if(!queryString) {
queryString = "?"
}
//if there is, then we need an & before the next args
else {
myNewArgString = "&" + myNewArgString;
}
//add your new data
queryString += myNewArgString;
//add anything from a previous post
if(postArgs) {
queryString += "&" + postArgs;
}
window.location.href = window.location.hostname + window.location.pathname + querystring
<form id="myPostArgsForm">
<input type="hidden" name="prevQuery" value="whats up?" />
</form>
Pretty simple really; have onChange fire a function that uses getElementById to figure out the selector value and then just use window.location to send the browser to the literal: http://yourdomain.com/yourpage.html?selectval=123
then, in the body onload() method, fire another JS function that checks the "get var" like:
function (GetSelector) {
var TheSelectorWas = getUrlVars()["selectval"];
alert(TheSelectorWas);
}
and do whatever you need to do in that function (document.writes, etc). BTW, posting the actual code you're using is always a good idea.
-Arne

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/

calling an Action using javascript

Fairly new to the PLAY Framework and because of restriction at my work we are using the 1.2.5 version, and while up til now was able to do all my process using the regular process from HTML to Controller via form submit. I would like to call an Application.Action from a JavaScript function.
While I have a form where information is inputted, another non-submit button could be clicked to go on a separate page for extra information. I want to call a JavaScript function via the "onClick" and inside the JavaScript function call the "#Application.Action(some param...)".
I need to get what is in a particular input field before calling the action.
I tried to do that with a PLAY "popup" but that does not seems to work as I can't pass the parameters along.
so here is the snippet I have:
in HTML file (extends the main.html who has all the javascript file "include")
<form>....
some input fields here
submit button here
</form>
<button onclick="myFunction()" data-role="button" style="width: 5em">Click here</button>
in the JavaScript file that is included in main.html I have something like this
function myFunction() {
var inputField1 = document.getElementById('inputField1').value;
var inputField2 = document.getElementById('inputField2').value;
var inputField3 = document.getElementById('inputField3').value;
window.location = "#{Application.moreInfo(inputField1, inputField2, inputField3)}";
}
Of course that does not work
Is there a way to do it like that?
Do I have to create a route for that?
I was able to reach a separate page by replacing
window.location = "#{Application.moreInfo(inputField1, inputField2, inputField3)}";
with
window.location.href='/goThere';
as long as I have a route
/goThere Application.goThere
but I could not figure out a way to pass parameters, I tried to set the route like
/goThere/{inputField1}{inputField2}{inputField3} Application.goThere(inputField1...)
but I guess I do not have the right syntax either.
Is there a way to call an Application.Action and pass it parameters/fields from a JavaScript function.
Any help is appreciated
The built-in #{jsAction /} template tag does exactly what you want.
Example:
Assume you have a route
GET /moreinfo/{foo}/{bar} Application.moreInfo
You can use the result of jsAction to get the correct URL with the parameters you want:
var fieldOne = "I'm a Javascript variable";
var fieldTwo = "Really? Me too";
var moreInfoAction = #{jsAction #Application.moreInfo(":foo", ":bar") /};
// and since it looks like you want to set the current location
// to your freshly obtained URL:
window.location.href = moreInfoAction({"foo": fieldOne, "bar": fieldTwo});

Categories

Resources