My child.html have a button which could click using script $('[value="Submit"]').click();
I want to invoke this from parent.html
Something like this:
var popUp = window.open('https://child.html');
popUp.$('[value="Submit"]').click(); //this line should be fixed
How could do this?
You should use window.postMessage API. Here is example code.
child.html
function functionToBeExecuted(event)
{
// do click or whatever you want
}
window.addEventListener("message", functionToBeExecuted, false);
parent.html
let child = window.open('child.html');
child.postMessage(); // notice that I did not pass message argument, since you just want to trigger the function, but if you want to pass some data to function using event parameter, just pass data to this function (for example string or object etc.)
I went in a similar kind of issue where I had iframe(containing child html) inside my parent html.
I solved this $(".DivClass iframe").contents().find("button").trigger('click');
In your case its pop window I don't no which popup you are using: custom pop or browser pop.
You can Add iframe inside your popup to achieve this issue using the same code as what I did.
Condition is that popup should be custom html popup not the other popup which is provided by browser provide.
Use this code in parent.html to click button:
let child = window.open('child.html');
let doClick = () => child.document.getElementById('my-button').click();
child.addEventListener('load', doClick(), true);
This is what you want... But my suggestion is to make function on child and use window.postMessage API to trigger it...
Related
I have the following JS code:
<script type="text/javascript">
$(document).ready(function () {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
</script>
This populate a dropdownlist with the value Select, the thing is, this dropdownlist appears in a form that it's called once the user clicks a button and then a modal windows opens, with the form in it.
But since it is mark as
$(document).ready
This JS won't execute with the modal, since the document is already 'ready'. How can I achieve this?
Thanks in advance!
Regards,
You can easily achieve this using bootstrap modal events. You can use following code snippet to achieve your objective:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
});
For reference Please check bootstrap modal events.
A useful way to load and execute javascript after the page is loaded, like modal window show ups, is to use ajax getScript function, which Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request through a pre-defined function in main page.
function loadJS(lnk){
$.getScript(lnk);
}
it can be a general way to load any script in a fully loaded page.
One solution is to use jQuery event.on
from this blog post https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html
I will quote the author, because I think it's a very neat explanation.
We can’t register a listener to an element that doesn’t exists.
A work around is to register the listener to an element that will
always exist in the page context. The #modal-book is the closest
element. It is a little bit more complex what happen, but long story
short, the HTML events propagate to the parents elements until it
reaches the end of the document.
More here: https://api.jquery.com/on/
Try something like this:
$('#idofselectelement').change(function() {
//grab the selected option and then do what you want with it.
});
I have a page we can call parent.php. In this page I have an iframe with a submit form and outside of that I have a div with the id "target". Is it possible to submit the form in the iframe and when success refresh the target div. Say load a new page into it or something?
Edit:
The target div is in the parent page, so my question is basically if you can make for an example a jQuery call outside the iframe to the parent. And how that would look?
Edit 2:
So this is how my jquery code looks like now. It is in the of the iframe page. the div #target is in the parent.php
$(;"form[name=my_form]").submit(function(e){
e.preventDefault;
window.parent.document.getElementById('#target');
$("#target").load("mypage.php", function() {
$('form[name=my_form]').submit();
});
})
I don't know if the script is active cause the form submits successfully but nothing happens to target.
Edit 3:
Now I'm trying to call the parent page from a link within the iframe. And no success there either:
Link
I think the problem may be that you are not finding your element because of the "#" in your call to get it:
window.parent.document.getElementById('#target');
You only need the # if you are using jquery. Here it should be:
window.parent.document.getElementById('target');
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
Have the below js inside the iframe and use ajax to submit the form.
$(function(){
$("form").submit(e){
e.preventDefault();
//Use ajax to submit the form
$.ajax({
url: this.action,
data: $(this).serialize(),
success: function(){
window.parent.$("#target").load("urlOfThePageToLoad");
});
});
});
});
I think you can just use window.parent from the iframe. window.parent returns the window object of the parent page, so you could do something like:
window.parent.document.getElementById('yourdiv');
Then do whatever you want with that div.
I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
I have some code that closes a modal in the parent when an IFrame's button is pressed.
This works well, but my problem is I need the IFrame to be fully postbacked before executing the close method.
var $MyFrame = $("#editScheduleFrame");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
var btn = frameBody.find('.schedule-submit');
btn.on('click', function () {
closeEditModal();
});
});
Is there any way I can instead call closeEditModal only once the schedule submit button has been pressed AND the IFrame child page has posted back?
The script on the server should somehow denote the page is a post back. It can be as simple as writing a content attribute: <body data-postback="true">. Then you can detect that with JavaScript and act accordingly.
I found a link that shows how to send parameters back to the opener browser window. But it works only with window.showmodal(). There should be an easy way to do the same if I use window.open() right?
If you are using window.open, you can call a function in the parent window and pass in pararmeters to that function.
Do this in child page javascript
var x="hello";//parameter I want to pass to the parent
window.opener.ParentPageFunctionName(x);
You want the parent property. See this for details:
http://www.w3schools.com/jsref/prop_win_parent.asp