I am trying to assign value to javascript variable without refreshing page but its not working.
Consider example:
<head>
<script type="text/javascript">
var id='';
var source='';
function assignvalue(_id,_source){
//open div load in dialog box
id = _id;
source = _source;
}
</script>
</head>
<body>
<div id='load'></div>
<script>
_login.push(['login', 'callback_uri', 'http://localhost/Login/index/?source='+source+'&id='+id']);
</script>
</body>
In head define some variable globally and onclick of a tag I am opening div with load id and having global varible with new value.But new value is not assign to it below divs javascript.Any suggestion.
Thanks.
you are declaring two global variables id and source, but in your function definition you declare two local variables with the same name, so your desired changes to global variables are applied to local ones. Just rename the variables in the function definition.
For instance:
var id, source;
function assignvalue (_id, _source) {
id = _id;
source = _source;
}
Because the way you pass value cannot be
function assignvalue(id,source)
cause id and source in the function here will become local variable instead.
Please replace the variable in parsing to other name so that it work, i.e
function assignvalue(passID,passSource){
id = passID;
source = passSource;
console.log(id+" "+source);
}
then the global variable value will change.
You are declaring id and source twice: once in the global scope, and once as function parameters.
To overwrite the values of the global variables inside the function, you need to use a different name for the parameters.
Try
function assignvalue(_id, _source) {
id = _id;
source = _source;
}
To execute the _login function when the link is clicked, you could simply call it in assignValue:
function assignvalue(id, source) {
_login.push(['login', 'callback_uri', 'http://localhost/Login/index/?source='+source+'&id='+id']);
}
In that case, it wouldn't be a bad idea to rename the function assignvalue to login
Yes, whatever you have written is correct.
But when you click on an HyperLink it will automatically refreshes the page.
Here you want to disable that auto refresh when you click on the Hyper link.For that you could amend your code like this:
<html>
<head>
<script>
var id,source;
function assignValue(_id,_source){
id = _id;
source = _source;
alert(_id+" and also "+_source);
}
</script>
</head>
<body>
<script>
alert(id+" I am in Body "+source);
</script>
Hello
</body>
OR alternatively you can try this
<html>
<head>
<script>
var id,source;
function assignValue(_id,_source){
id = _id;
source = _source;
alert(_id+" and also "+_source);
return false;
}
</script>
</head>
<body>
<script>
alert(id+" I am in Body "+source);
</script>
Hello
</body>
Extra Info:
To override the default browser functionality, just you have to return false.
Not only here, almost you can apply this in many situations.
One such situation is disabling right click(simply) is just
oncontextmenu= return false;
and another such situation is disabling a KeyPress Event and so on.
So, you can apply this almost anywhere.
Related
I have an HTML page say main.html which has an iframe (say id="myFrame")showing child.html page. Both of these pages have a button called "Hide frame". The onclick of these buttons calls hideFrame() JS function which is declared in main.js file. The hideFrame() function just change the display of myFrame to "none".
function hideFrame(){
document.getElementById("myFrame").style.display = "none";
}
The myFrame is in main.html file so the button in main.html when calls the hideFrame() function, it works. The frame gets hidden. But the same is not working if I call the function from child.html page.
How can I access this element (myFrame) form child.html page?
you should use the main.html's window object to assign the function to. So instead of
function hideFrame(){
document.getElementById("myFrame").style.display = "none";
}
you would do something like
window.hideFrame = function(){
document.getElementById("myFrame").style.display = "none";
}
Now the function is globally scoped on main.html's window.
The child frame has it's own window object. You need access to the parent window object to call the function from child.html.
From main.html, you can call hideFrame normally on click onclick = hideFrame(), but in child.html, you should put onclick = window.parent.hideFrame()
Instead of using an iFrame, I would use jquery to load in segments of html files from other files.
If that is not possible, you could inject Javascript code into the child frame that references objects in the parent. Ex:
child:
<script>
var x;
</script>
parent:
<script>
$("#myFrame").x = function(){
functionality / reference definitions
}
</script>
It took a while to understand what you are saying. From what I understand, you want to get access to an element on the top window from inside an iframe. Here is what to get access to the parent window:
var _parent = window.parent,
_parent_dom = _parent.document;
Then to get access to an element from the parent page (in this case #myFrame):
var my_frame = _parent_dom.getElementById("myFrame");
I am trying to make a simple webapp.
I want to put data from the main page into an input box on another window/tab but the input box is always empty when I'm opening it.
Here's the code:
global.js
function showUserInfo(event) {
// Prevent Link from Firing
event.preventDefault();
var _id = $(this).attr('rel');
var arrayPosition = userListData.map(function(arrayItem) { return arrayItem._id; }).indexOf(_id);
// Get our User Object
var thisUserObject = userListData[arrayPosition];
window.open('http://localhost:3000/editrecord', 'window', 'width=500,height=400');
var fName = thisUserObject.cName
$("#inputecName").attr('value', fname);
Running this would open the 'editrecord' window and the data I am trying to get should be in the input box in 'editrecord' page.
editrecord.jade
#editBox
fieldset
input#inputecName(type='text', placeholder='Customer Name', width = '50%')
br
button#btnEditRec(type='submit') Update Record
Thank you in advance.
js at Question attempts to set the value of an element at a separate document
$("#inputecName").attr('value', fname);
from the current document, without referencing that the element is within a separate document at a separate window.
You can use sessionStorage to access Storage object between browsing contexts, or window objects, that have same origin; utilize .ready() to check sessionStorage when editrecord.html is opened in browser and the document is loaded.
At original html document global.js
<script>
sessionStorage.setItem("id", 123);
var w = window.open("editrecord.html", "w");
</script>
at editrecord.html
<head>
<script>
$(document).ready(function() {
if (sessionStorage.id) {
$("#inputecName").val(sessionStorage.getItem("id"))
}
})
</script>
</head>
<body>
<input type="text" id="inputecName" />
</body>
plnkr http://plnkr.co/edit/7TRQOPYPX4bMpxr6pjyX?p=preview
You can send data via URL like,
Next page
By JS or Server side script you can fetch the data from URL and use it,
You can do like this one
var childWindow = window.open('http://localhost:3000/editrecord', 'window', 'width=500,height=400');
$(childWindow.document).load(function() {
var fName = thisUserObject.cName
$("#inputecName").attr('value', fname);
})
You can access the inputecName from chilld window using plain javascript
childWindow.document.inputecName
I'm stuck on this code...I'm trying to get the html page to, when you click the link, call the bms function, which should open internet explorer, go to google, and fill the search textbox with the word "test". This isn't exactly the website or word I want to use, but I needed to change it since the actual website/words are sensitive information. I want to use this through IE since our processes go through this browswer, specific with also using the -nomerge function. My code is below. Thanks for the help!
<html>
<head>
<script>
var WshShell = new ActiveXObject("WScript.Shell");
function BMS()
{
WshShell.Run("iexplore.exe -nomerge http://google.com");
WScript.Sleep (5000);
WshShell.SendKeys ("test");
WScript.Quit();
}
</script>
</head>
BMS
<br /><br />
DAY
</html>
Dont be thrown off by jade; it's just quicker. Just note I'm placing scripts just before the closing body tag.
html
head
title foo
body // body tag added
p notice that i've not declared script yet. Preference/good practice.
a#bsdTrigger(href='#') foo
a#ssddTrigger(href='#') bar
//- scripte here
The Important-ish part: here's a pen
(function() {
// now the variable will not pollute your global ns
var WshShell = {}; //ignore the OR only because there is no Active thing
WshShell.log = function() { // fake behavior for testing
console.log(arguments);
}
var bsd = function BSD() {
WshShell.log("foo");
window.alert('foo!');
return false;
}
document.getElementById("bsdTrigger").addEventListener('click', bsd);
})();
I hope this helps... It's very generic and contrived, but you'd employ the exact same methods in doing what you're trying to do.
I have a function to grab a video title from a YouTube json callback, which works - however I'm having issues inserting the variable into an element.
Here is the feed I'm grabbing:
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/2WNrx2jq184?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script>
The javascript function I'm using:
function youtubeFeedCallback(data) {
var info = data.entry.title.$t;
document.write(info);
}
This works fine, but I'd like to insert it into a div with the ID "box".
Usually I would use the following (and add it to the function - and remove the document.write):
var box = document.getElementById('box');
box.innerHTML = info;
I just cannot get this to work though. What would be the correct way to achieve what I'm trying to do? Thanks
http://jsfiddle.net/b3VYT/
Either make sure that the script is below the element or wrap your code in a document.ready callback so that it is not run until after the DOM is loaded.
http://jsfiddle.net/b3VYT/1
You need to make sure that the element that you are using is declared prior to your script executing:
<div id='test'></div>
<script>
function youtubeFeedCallback(data) {
document.getElementById('test').innerHTML = data.entry.title.$t;
}
</script>
Example
I coded the following JS
<html>
<body>
<img id="img" src="http://example.com/img.jpg" />
<script type="text/javascript">
//<![CDATA[
(function(){
img = document.getElementById("img");
img.src = "http://example.com/img.png";
})();
//]]>
</script>
</body>
but on IE6
some js errors are occured.
Because Should I use var img?
incidentally
<body>
<img id="img" src="http://example.com/img.jpg" />
<script type="text/javascript">
//<![CDATA[
(function(){
var img = document.getElementById("img");
img.src = "http://example.com/img.png";
})();
//]]>
</script>
</body>
</html>
is no problem
I can't get the reason why
Could you explain me?
If you omit var when you're declaring a variable, and that variable doesn't exist in current local scope, one of two things will happen:
you'll declare a new "global" variable, to which every function will have access to -> don't do this
you'll set an already existing global variable to a new value; if some other function relies on this variable, you could wreak havoc
So, don't use global variables and use var whenever possible. As Tomas already pointed out, your script could be run before the structure is loaded by the browser.
The script is running before the whole body structure is loaded by the browser. So, your function can't find the img element.
Invoking your function at the onLoad body event would fix the error.
I.e:
<html>
<head>
<script type="text/javascript">
//<![CDATA[
function loadImage(){
img = document.getElementById("img");
img.src = "http://example.com/img.png";
}
//]]>
</script>
</head>
<body onLoad="loadImage();">
<img id="img" src="http://example.com/img.jpg" />
</body>
</html>
The only problem is that you're not using var to declare the img variable. There is no problem with the fact that the rest of the body may not have been parsed, so don't worry about that.
The reason that the absence of var is causing a problem here is that img is colliding with property of the global object created for you by the browser. In IE, each element with an ID creates a property of the global object (which is therefore accessible everywhere) corresponding to that ID. This property is read-only, so if you try and assign to it, you get an error. If you declare it first, you create a new variable which doesn't interfere with IE's global property and it will work as you expect.
You would also find that changing the variable name not to collide with an ID or property of window would fix the problem:
banana = document.getElementById("img");
banana.src = "http://example.com/img.png";
... but this is not a good idea either since you're automatically polluting the global scope with your banana, which could have consequences in other code, and in ECMAScript 5 strict mode you would get an error.
Finally, unless you're using XHTML (which you almost certainly shouldn't be and your example doesn't have an XHTML doctype), there's no need for the CDATA mark-up. You should remove it.
Moral of the story: always declare your variables.