setting a variable in javascript to be used in another form - javascript

I have form with a Grid (telerik), i think the technology behind it doesnt matter. I let user click on a row in the grid. During the click I extract a value from the Grid with Javascript, like so:
function RadDrillDoubleClick(sender, eventArgs) {
var Code = eventArgs.getDataKeyValue("Status");
if (Code == "In Progress" || Code == "")
{
location.href = "Main1.aspx?mode=edit&DID=" + eventArgs.getDataKeyValue("D_ID");
}
else {
location.href = "Main1.aspx?mode=view&DID=" + eventArgs.getDataKeyValue("D_ID");
}
}
After user has clicked the grid, I call this JS function and send them to correct .aspx page with either VIEW or EDIT mode dependent directly on the Code.
What I'm trying to do is once I get to the Main1.aspx page, I want to be able to continue to hold the CODE value, because when users performs a certain action, I'll need to call a javascript function and use the actual CODE to determine what the user will be able to do.....
var Code = eventArgs.getDataKeyValue("Status");
is there any way I can somehow create like a GLOBAL Variable called
CodeValue
that I can pass around to another form without doing it in the URL?

When the browser navigates to a page, all current JavaScript is unloaded from the browser. This means any functions/variables, etc. will not be accessible on the new page unless you've persisted the value in some way.
Common ways of persisting the value include:
Add it to the query string of the URL the user is navigating to
Save the value to a cookie
Save the value to local/session storage
For your scenario, #1 is probably your best bet (keep in mind the user can have multiple browsers/tabs open to your site).

One way to get the value from URL is like this: on the page Main1.aspx, you add to your JavaScript a function that will run after page loads and that will get what it needs from the current URL
var globalValue; // variable that will receive the value from URL
window.onload = function() {
var thisURL = window.location.href;
globalValue = url.split("?").pop();
// this will store in globalValue everything that comes after the last "?"
// example: if the url is www.site.com/text?value, it will store string "value" to globalValue
};

Related

Sending parameters with history.back()?

Is it possible to send a track/api variable to the next cmp, while using history.back() in LWC.
this.var1 = false;
var compDefinition = {
componentDef: "c:Component-to-navigate",
attributes: {
leadId: this.SomeLeadId,
SomeId: this.SomeId,
Variable-To-send: true
}
};
var encodedCompDef = btoa(JSON.stringify(compDefinition));
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: '/one/one.app#' + encodedCompDef
}
});
Instead of this i want to use history.back(), and also need to pass ' Variable-To-send' with this is this even possible ? tried directly with onclick funtion, not working.
Apart from navigation any other way ? basically i dont want to reload the previous page. ? tried history.back(), windows.location = etc, but not able to pass the same..
Please help with the approach if possible thanks.
well, history.back() method loads the previous URL (page) in the history list and only works if a previous page exists.
So, we cannot set any parameter while calling the history.back().
However, we can simulate the same thing by using some temporary storage that can store the parameter value that we want to communicate to the other component between the pages.
to do so we can either make use of:
local storage
session storage
cookie
or any other storage place where we can keep the data and access :)
Example:
we can use local storage like below:
// to set the param value
localStorage.setItem('param1', 'value1');
localStorage.setItem('param2', 'value2');
// going back or any navigation
history.back();
// to get the value at any other place
const param1 = localStorage.getItem('param1');
const param2 = localStorage.getItem('param2');
// to remove the data from storage
localStorage.removeItem('param1');
localStorage.removeItem('param2');
// or
localStorage.clear();

Storing a variable from an html document to display it in another

On the first page, the user is asked to select a name from a list (select/option tags) and click the "edit" button. User's choice is stored using the "option" variable and we redirect him/her to the next page.
When the body of the next page loads, it triggers the second function, which displays the option made previously as the main header of the page.
The problem is that, although onEdit() runs, displayOption() displays the variable as the empty string (as declared above the functions).
Why doesn't the second function "see" the alteration?
var option = "";
//"edit" button (onclick)
function onEdit() {
var selector = document.getElementById("selector");
option = selector.options[selector.selectedIndex].value;
window.location.href = "nextPage.html";
return false;
}
//"nextPage.html" body (onload)
function displayOption() {
var header = document.getElementById("header-main");
header.innerHTML = option;
}
Use local storage for that, it is easy to use and in this case highly appropriate.
See mdn docs
Example
on first page simply declare
localStorage.setItem('option', 'selectedOption');
on the second page get the var
var option = localStorage.getItem('option');
EDIT
as wendelin commented it is even more appropriate to use session storage, because it remove itself automatically.
The reason this doesn't work is that when nextPage.html loads, the entire script is re-evaluated, and option is now back to its default value of "".
You'll need another solution to persist the user's choice across refreshes. One of the more common approaches to something like this is to set the value as a query string parameter that can be read from within displayOption.

xpages href computed in javascript

I have an <a> tag which I'm using to redirect the user to another xpage.
Its href property is:
<a target="_blank" href="http://serv/MyBase.nsf">
I use a simple view listing a doc. which contains the server and the name of the application.
So, I want to use some #DbLookup function in javascript to get into 2 var the above server and app name:
var server = #Unique(#DbColumn(#DbName(), "myVw", 1);
var name = #Unique(#DbColumn(#DbName(), "myVw", 2);
var concat = server+"/"+name;
return concat;
How can I compute the href property to return the concat variable?
Create a Link control xp:link and calculate the URL in attribute value:
<xp:this.value><![CDATA[#{javascript:var server .... }]]></xp:this.value>
Knut's approach is correct, but your code isn't :-). For every XPages load (or refresh) you do 4 #DbLookup. You can do a set of optimisations here:
Combine the result you want in the view itself, so you only need one lookup
Cache the value in the session (or application scope)
something like this (add nice error handling):
if (sessionScope.myHref) {
// Actually do nothing here
} else {
sessionScope.myHref = #Unique(#DbColumn(#DbName(), "myVw", 3);
}
return sessionScope.myHref;
The 3rd column would have the concatenation in the view already. That little snippet does a lookup only once per session. If it is the same for all users, use the applicationScope then it is even less.

Getting value to append to url with javascript

I'm working on updating some code that someone else initially wrote. I found out they are passing a value to the url onClick, which redirects to the url and allows me to get the value with $_GET. They use a function to handle this process. I have a need to change the redirect url, but keep the rest of the process the same. I copied their function, changed the name, and changed the redirect url. For some reason, it's not passing the value and I can't access it through GET
Here is their code, which still works on my system:
function lab_popup2(id)
{
// alert(id);
jQuery('#lab_popup').fadeIn();
var param = RU+'includes/earningdetail2.php?id='+id;
jQuery('#lab_popup_ifram').attr({'src':param});
var v = jQuery('#lab_popup_ifram').html();
jQuery('#consult_popup_ifram').html(v);
jQuery('#lab_popup_ifram').fadeIn();
}
I pass this function the value like this:
<a href="#" onClick="lab_popup2('test');">
The new code that I'm trying to create is below. You'll see the only difference is where it redirects, so I'm not sure why it wouldn't pass the value this time. I did a var dump on GET to make sure, and there was nothing.
function lab_popup_emails_completed(id)
{
//alert(id);
jQuery('#lab_popup').fadeIn();
var param = RU+'includes/earningdetail4.php?id='+id;
jQuery('#lab_popup_ifram').attr({'src':param});
var v = jQuery('#lab_popup_ifram').html();
jQuery('#consult_popup_ifram').html(v);
jQuery('#lab_popup_ifram').fadeIn();
}
Once again, I use this code to send a value to the function:
<a href="#" onClick="lab_popup_emails_completed('completedpaid');">
Since the way I call the function is identical, and the functions themselves are the same except the redirect, I just don't see why the first example works and the second doesn't.

Variable not updating in script string, yet it updates

Very confused here.
I have a search box which reads a list of school names from my database. When I select a school, the id (from the db) gets put in a hidden textbox.
I also have a search box which reads a list of courses from my database. However, I made the query so that it only reads the courses from the selected school.
It does that, in theory.
I was planning to pass the school id, which I grab from the hidden box, to the search script which in turn passes it to my database query. However, the variable I put my school id in doesn't seem to be updating.. yet it does. Let me explain.
I come on the page. The school for my test account has id 1. The id number in my hidden box is indeed 1. I search for a school which I know has some courses assigned to it: the id number in the box changes to 3.
I have a JS variable called school_id which I declared outside of my $(document).ready. I assume that means it's global (that's what I got taught even though SO told me once it isn't really the correct way to do this. Still have to look into that). I wrote a function which updates this variable when the school search box loses focus:
$("#school").blur(function() {
school_id = $("#school_id").val();
});
A quick javascript:alert(school_id); in my browser bar also shows the updated variable: it is now 3 instead of 1.
Onto the search script part of my page (excerpt of the script):
script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&"
As you can see, I pass the school_id variable to the script here. However, what seems to be happening is that it always passes '1', the default variable when the page loads. It simply ignores the updated variable. Does this string get parsed when the page loads? In other words, as soon as the page loads, does it actually say &id=1? That's the only idea I can come up with why it would always pass '1'.
Is there a way to make this variable update in my script string? Or what would be the best way to solve this? I'm probably missing out on something very simple here again, as usual. Thanks a lot.
EDIT
Updated per request. I added a function getTheString as was suggest and I use the value of this function to get the URL. Still doesn't work though, it still seems to be concatenating before I get a chance to update the var. HOWEVER, with this code, my ajax log says id:[object HTMLInputElement], instead of id:1. Not sure what that means.
<script type="text/javascript">
var school_id;
$(document).ready(function() {
$("#school").blur(function() {
school_id = $("#school_id").val();
});
// zoekfunctie
var scholen = {
script:"/profiel/search_school?json=true&limit=6&",
varname:"input",
json:true,
shownoresults:false,
maxresults:6,
callback: function (obj) { document.getElementById('school_id').value = obj.id; }
};
var as_json = new bsn.AutoSuggest('school', scholen);
var richtingen = {
script: getTheString(),
varname:"input",
json:true,
shownoresults:true,
maxresults:6
};
var as_json2 = new bsn.AutoSuggest('studierichting', richtingen);
});
function getTheString() {
return "/profiel/search_richting?json=true&limit=6&id=" + school_id + "&";
}
</script>
This is because the URL is static, it is not updated as the ID changes.
You should update the URL as part of the code you wrote to get the ID:
$("#school").blur(function() {
school_id = $("#school_id").val();
// update URL here ...
});
Aren't you concatenating script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&" before the event is fired and the var updated?
Okay. So the problem was my third party plug-in instead of the code I wrote. I fixed this by editing the code of the autoSuggest plugin so it now includes my id field in the AJAX request.
var url = this.oP.script+this.oP.varname+"="+encodeURIComponent(this.sInp)+"&id="+ $("#school_id").val();
Thanks to everyone who tried to help me out!

Categories