I have a popup (which I used by necessity) that is opened on a link click. I have the user going through a series of pages picking attributes to then be sent to a shopping cart.
My problem: After the user reaches the end of the selection process i want to kill the open popup and send the request back to the original browser (parent) so the user can checkout.
Any idea how I would do this?
Javascript: in the child (popup) window.
window.opener.location = 'page.html";
window.close();
Is that what your looking for?
The parent window can be accessed using "opener" in JavaScript.
Example:
window.opener.title='hello parent window';
or
window.opener.location.href='http://redirect.address';
Script in my child form:
<script language="JavaScript" type="text/javascript">
function SetData() {
// form validation
// var frmvalidator = new Validator("myForm");
// frmvalidator.addValidation("name","req","Please enter Account Name");
// get the new dialog values
var str1 = document.getElementById("name").value;
var winArgs = str1;
// pass the values back as arguments
window.returnValue = winArgs;
window.close();
document.myForm.submit();
}
</script>
Script in my parent form:
<% #account_head= current_company.account_heads.find_by_name("Sundry Debtors")%>
<script type="text/javascript">
function OpenDialog() {
var winSettings = 'center:yes;resizable:no;help:yes;status:no;dialogWidth:450px;dialogHeight:200px';
// return the dialog control values after passing them as a parameter
winArgs = window.showModalDialog('<%= "/accounts/new?account_head_id=#{#account_head.id} #man" %>', winSettings);
if(winArgs == null) {
window.alert("no data returned!");
} else {
// set the values from what's returned
document.getElementById("to_account_auto_complete").value = winArgs;
}
}
</script>
This is work but not as i want, any one if found good solution please suggest.
Related
I'm trying to create a popup (new window) that appears when a person clicks anywhere on the page , but the problem is that my script creates a new tab for every click . I created a blogspot account just for test : http://faqetest123.blogspot.al/
what should I do for that ?
(example of a site that is using the popup that im trying to create is :atdhe.so)
Here is my code :
<script type="text/javascript">
document.onclick=function()
{
window.open('http://www.facebook.com');
}
</script>
Thanks
The window.open() function returns a reference to that window. So you should be able to use that reference to navigate to a new URL at a later time. Something like this:
var myPopup;
document.onclick=function()
{
if (!myPopup) {
myPopup = window.open('http://www.facebook.com');
} else if (myPopup.closed) {
myPopup = window.open('http://www.google.com');
} else {
myPopup.location.href = 'http://www.stackoverflow.com';
}
}
Note that this also attempts to check if the user has closed the pop-up and re-opens it.
Edit: Based on your comments below, it looks like I misunderstood. In order to have the popup execute once and then not again, you can simply remove the event handler after processing it. Something like this:
document.onclick=function()
{
window.open('http://www.facebook.com');
document.onclick = null;
}
In my Polymer 1.0 app, I have an on-tap function which dynamically adds another button into the page based on a few parameters in the form. The problem is that after adding the element and its event listener to the page, the new button won't actually fire the on-tap event.
JSFiddle for testing: https://jsfiddle.net/dme6tb7z/
index.html
<template is="dom-bind" id="app">
<div id="output"></div>
<paper-button id="myButton" on-tap="_addButton">Add Button</paper-button>
</template>
<script src="app.js"></script>
Here is where I create the new button and give it a listener in JS. Is there some kind of extra step I need to take so that Polymer can "see" the new on-tap event listener?
app.js
app._addButton = function(e) {
var el = document.createElement('paper-button');
el.innerHTML = "New Button";
el.id = "newbutton";
el.addEventListener('on-tap', '_testEvent');
this.$.output.appendChild(el);
// I also tried adding the event listener after appending
// the element to the page, like so...
// this.$.newButton.addEventListener('on-tap', '_testEvent');
};
app._testEvent = function(e) {
console.log(e);
};
EDIT
I'm thinking maybe I need to use something like Polymer.dom(parent).appendChild(node) to keep the two DOMs in sync. I did this in my app.js like so, but the event still doesn't fire.
app.js scope
(function(document) {
'use strict';
var app = document.querySelector('#app');
...
app._addButton = function(e) {
var el = document.createElement('paper-button');
el.innerHTML = "New Button";
el.id = "newbutton";
el.addEventListener('on-tap', '_testEvent');
var parentNode = document.getElementById('output');
Polymer.dom(parentNode).appendChild(el);
};
...
})(document);
Surely, there must be some way to add event listeners after initial page load? I've done this same thing countless times in other setups, but there's something weird going on with Polymer... I understand there are two DOMs to update, but I'm using the Polymer.dom method, so what in the world is preventing this from happening?
More Info
I noticed that after appending the new button to the page, I can successfully run this:
document.getElementById('newbutton').innerHTML = 'Hello World';
whereas this:
document.getElementById('newbutton').addEventListener('on-tap', '_testEvent');
has no effect (and no errors). Isn't that bizarre? Is there some sort of reinvented registration process in Polymer to add event listeners?
Okay, I think I figured it out.
First of all, on-tap in this context should be tap.
Second, the function name from JS should be formatted like this: this.functionName, or app.functionName if your template has an id of "app" and app is defined as var app = document.querySelector('#app');
All together, it looks like this:
var newElement = document.getElementById('newbutton');
newElement.addEventListener('tap', this._testEvent );
This doesn't work in the JS Fiddle for some reason, but does work in a real Polymer environment.
I am having one issue with document.ready jQuery function.
On load the document.ready function is working fine. When I click on the button or href link, I want to reconnect with the document.ready function where I have set of code in JavaScript file.
Here is the actual scenario. Please find below sample JS code:
$(document).ready(function() {
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
});
After clicking submit button i am adding the input fields data in the below table row. In which description texts are also added in one of table row columns. If description field has more than 100 character, I am pushing the above mentioned JavaScript code from external .JS file. How can i refresh the Java script function without refreshing the page? Anyone have idea?
Please share your opinion.
Create a function, that you can call both in document.ready, and also anywhere else, such as a buttons click event:
function myfunc(){
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
}
$(document).ready(function() {
//call when document is ready
myfunc();
//call again when button is clicked
$('#button').click(myfunc());
});
I'm new to Dojo and have a problem with my onChange() event, it runs when the page loads and not when the value in the Select box is changed. Here's my code, its all in the body section section of the page. Thanks for your help.
<div id="supportCentersListBox" data-dojo-type="dijit.form.Select"></div>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.Select");
function populateSupportCenters() {
var supportCenters = new dijit.form.Select({
maxHeight:"300",
id: "supportCenters",
onChange: changeTest(),
store: new dojo.data.ItemFileReadStore( { url: "some url address here" })
}, 'supportCentersListBox');
}
function changeTest() {
alert("Changed");
}
populateSupportCenters();
</script>
Fix your code so that the onChange is not a function call but instead a function pointer/reference
You have this 'problem':
<div id="supportCentersListBox" data-dojo-type="dijit.form.Select"> DOM renders (data-dojo-type is for parseOnLoad (dojo.parser) only, dont need it since youre creating it yourself
you instantiate a store
you instantiate a Select and render in supportCentersListBox - with store set, that fetches the url
fetch completes and Select is filled in
the item which has attribute selected:true or the first in index is set as value
onChange fires
I have a view with a credit card payment form hosted on Domain A. Domain B has a seperate website with an iframe to the credit card form on domain A.
The form on domain A uses an ajax form like this:
<% using (Ajax.BeginForm("CreditCard", "Framed", new { id = Model.SID },
new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "credit-card-wrapper",
LoadingElementId = "loading-pane"
},
new { id = "new-creditcard-form" }))
{ %>
Then on domain b, I am using a custom jquery plugin to manage my iframe by allowing external events to change the src of the iframe. The usage looks like this
$('#myIframe').frameplugin('creditcard');
Which causes the iframe to change it's src to the credit card page. I also have attached an onload to the iframe like this:
$(this).bind('load', function () {
var src = $(this).attr('src').toLowerCase();
//do stuff based on url
});
What I want to do is when the credit card form is submitted and the replacement is done, I want the document within the iframe to trigger the iframe's onload event, so that domain b knows something happened.
Another solution would be to somehow bind custom events to the iframe and trigger them within the framed document. I'm not sure how/if that would even work. Any ideas?
EDIT:
I am attempting to use an event trigger from the iframe up to the parent and I get an error.
Unsafe JavaScript attempt to access
frame with URL
http://localhost:59905/Home/Framed
from frame with URL
http://localhost:27412/Framed/Index/.
Domains, protocols and ports must
match.
Here's my event binding
$(document).bind('success:myframe', function (event, referenceId) {
//do something
});
and here's the javascript call from the framed page. This is called from OnSuccess in the ajax.beginform
function paymentReceived() {
var referenceNumber = $('#referenceNumber').text();
$(top.document).trigger('success:myframe', referenceNumber);
}
I think you just want to pass events from iFrame to the parent window. Please correct me if I'm wrong.
From your iFrame, can't you just do this?
$(document).ready(function() {
parent.alertPageWithIFrameThatLoadIsComplete();
});
Edit:
Let me try again.
This works for me:
<script type="text/javascript">
function oniframeLoad() {
alert("Loaded!");
}
function changePage() {
frames["my_iframe"].location.href = "http://google.com";
}
setTimeout(changePage, 2000);
</script>
<iframe onload="oniframeLoad()" name="my_iframe" id="my_iframe" src=""></iframe>