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
Related
I am attempting to manipulate the hyperlink of a button and I'm getting nowhere with this and not sure where I am going wrong.
The Code:
<link rel="stylesheet" href="https://cdn.site.td/Calendar.css">
<script type="text/javascript" src="https://cdn.site.td/Calendar.js"></script>
<div id="the-calendar"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var options = {
fullNames : false
};
var myCalendar = new Calendar(document.getElementById('the-calendar'), options);
});
</script>
This generates an event calendar that is loaded on a separate website. It works perfectly when loading it on a separate domain except for one thing. There is a more info button for events and when you click that it attempts to go to:
/folder/folder/folder/event-name-1
So of course, when I generate it on a separate domain it attempts that same folder path except with the current domain. Therefore it goes nowhere since the folders are not the same on both domains.
I want to add an onClick event to the button to manipulate the path of the hyperlink.
The button is:
<button class="calendar-icon-info-action">More info</button>
Keep in mind this button is not generated until the initial script above loads and populates the page with the HTML for the calendar.
So once the calendar is loaded, I need each more info link for each event to be manipulated to add the original domain path. I would need a variable to store the original path because that will not change too.
So to recap more info leads generates:
/folder/folder/folder/event-name-1
I want this stored in a variable and then another var for the domain stored together so it becomes something like this:
var a = "domain.tld";
var b = "/folder/folder/folder/event-name-1";
var c = a + b;
document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(){
document.getElementsByClassName("calendar-icon-info-action")[0].href = var c;
});
The href attribute is applicable only for a tags (links). Since you have a <button>, what you could do is intercept and block the original event, and redirect the page to the desired URL.
Something like this:
document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(event){
// This will stop the original event:
event.preventDefault();
// This will open your desired URL:
window.location.href = c
});
If you have multiple buttons and want to update the event of all of them, you could loop the buttons:
document.querySelectorAll(".calendar-icon-info-action").forEach((elem) => elem.addEventListener("click", function(event){
event.preventDefault();
window.location.href = c;
}))
For future reference, if you had links instead of buttons, and wanted to change the href attribute, the proper way to do is:
document.getElementsByClassName("calendar-icon-info-action")[0].setAttribute('href', 'your-url-here')
I am trying to get html of newly open window after activating a link that uses javascript by zombie.js.
Here is the html code
<html>
<head>
<script type="text/javascript">
function newin(id)
{
var url="page.php?id="+id;
window.open(url,id,"toolbar=no,location=top,directories=no,status=no,scrollbars=yes,hscroll=no,resizable=yes,copyhistory=no,width=1025,height=1250");
}
</script>
</head>
<body>
<div>
123<br/>
234<br/>
345<br/>
</div>
</body>
The Script I am using is:
var Browser = require("zombie");
var browser = new Browser();
browser.visit("http://localhost:8000/testpage.html", function () {
browser.wait(function(){
var selector = "a[href*='newin']";
var elements = browser.queryAll(selector);
for (var e=0;e<elements.length;e++){
browser.clickLink(elements[e],function(){
browser.wait(function(){
console.log(browser.html());
});
});
}
});
});
I am not able to get HTML of any window.Any ideas what is wrong in this code ? Or is this possible with phantomjs??
Finally I come to know that if a link contains JavaScript directly in the href or action, Zombie seems to understand that as opening a new page like a normal hyperlink would. While the JavaScript is still executed correctly, the DOM is lost as a result of Zombie trying to load the invalid target as a new page.
A problematic link would be e.g.
test
There’s no support for javascript:links, it is still an open issue:
https://github.com/assaf/zombie/issues/700
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.
I load a pdf that the user clicks on via a URL call. See the following javascript:
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
document.location = "/archives/entry/" + $(this).attr("data-entry-id");
}
);
I want to change the browser title of the pdf that comes up, so that it is not just the url. Adding document.title("New Title") to the function block does not work because it is not synchronized with the server returning the file that's being displayed in the browser. How can I overcome this?
Perhaps I could open a new page (rather than changing the document location) that wraps the URL call in html so that I can set the title - something like this:
<html>
<head>
<title>New Title</title>
</head>
<body>
<iframe src="/archives/entry/98"></iframe>
</body>
</html>
And that way, I could set the title. How can I write this html to a new page from within the javascript function block I have that responds to a click? Thanks in advance.
Instead of changing location you can load data by ajax.
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
var title = $(this).text();
var url = "/archives/entry/" + $(this).attr("data-entry-id");
document.body.innerHTML = "<p>Loading...</p>"; // Or a loading image
$.ajax(url).done(function(data){
$(document.body).html(data);
document.title = title;
})
}
);
If you set a title in the PDF document you can make it display as your browser title.
Follow these instructions:
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html
A jQuery approach, relatively easy to modify for plain JavaScript:
$('body').html('<iframe src="/archives/entry/98">');
document.title = "New Title";
I want to access the currently loaded document of an iframe and link that document to another iframe, for this I tried:
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again. I want to access the document already loaded in #if1. How can I do this?
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again.
Err, yeah, that's what you are doing: you are setting if1's src to if2's src. That's why it reloads the iFrame... If you exchange if1 and if2 in your code it might do what you're trying to do -- if I managed to understand you.
Check out this running demo: http://jsfiddle.net/aymansafadi/BanTV/5/show/
The key part you might be interested is:
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1')[0].contentWindow.location.href = iframe2;
$('#if2')[0].contentWindow.location.href = iframe1;
});
NOTE: This, and anything else you you try, will only work if both iframes are under the same domain as the parent window.
You can also use .src('attr') to set the URL, but not get the current URL.Demo: http://jsfiddle.net/aymansafadi/BanTV/7/show/
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1').attr('src', iframe2);
$('#if2').attr('src', iframe1);
});