I need to fetch the offset info for a submit button that is buried deep within an iframe in a div. I want to position another element adjacent to the submit button after the iframe is loaded. The iframe is loaded from the same origin as the containing page.
<div id="editBox">
<iframe id="ifr" src="mysource">
<html>
<head></head>
<body>
<form id="dataForm" enctype="" method="POST" action="">
<div>
<table> some form elements </table>
<button id="submitButton" onclick="" type="submit">Save to file</button>
I've tried
$('#editBox').contents().find('#submitButton').offset();
and
$('#ifr').contents().find('#submitButton').offset()
But both return undefined.
I've also wrapped the .contents statements in a setTimeout to determine if the problem is that I'm checking before the iframe is loaded. (if that had worked I'd add a loaded event handler), but no change, result still undefined.
How can I get the position info I need?
Wrap your code in a load() function for the iframe. This works just like the document ready function, or window load function:
$("#ifr").on("load", function(){
var offset = $(this).contents().find('#submitButton').offset();
});
Related
I have an old JSP page in my project. I need to include this page into my new page, where my new UI side is complete EmberJS.
Things that I have tried
I got the rendered HTML from JSP using an ajax call and try to render with {{{ var }}} handlebar, But there are lots of scripts inside the page. They are not getting parsed or executed.
How can I load the page into an iframe? The page is POST type.
You can create a hidden form that point the target to the iframe, then trigger the click() event on the hidden submit button when document loaded.
For Example
<form action="YOUR_JSP_URL" method="post" target="myIframe">
<input id="postToIframeBtn" style="display: none" type="submit" value=" " />
</form>
<iframe name="myIframe" src=""></iframe>
<script>
document.getElementById("postToIframeBtn").click();
</script>
Short answer, try to insert them into DOM inside components didInsertElement hook using jQuery.
Do not use {{{}}} it only work with HTML inserting.
So I am trying to make a function that can replace the src of the iframe. In the iframe there would be a map with two places. In the html code there are two forms for the place ID-s.
I just cannot get this to work.
Here is the HTML code:
<div id="start">
<label for="startLocation">Start location ID:</label>
<input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>
<div id="dest">
<label for="destination">Destination ID:</label>
<input type="text" id="destination" name="destination" ><br><br>
</div>
<button onclick="changeMap()">Show the map!</button><br><br>
</form>
<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>
This would be the function:
function changeMap(){
//place IDs to put into url
var start = document.getElementById('startLocation').value;
var dest = document.getElementById('destination').value;
//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";
var mapSource2 = "&destination=place_id:";
var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";
var mapSource = mapSource1+start+mapSource2+dest+mapSource3;
//iframe
var iframe = document.getElementById('map');
//changing the src of the iframe
iframe.src = mapSource;
}
The line
<button onclick="changeMap()">Show the map!</button><br><br>
may be causing the problem.
To begin with, button elements, if not given a type="button", are considered submit buttons. So every time the button is pressed, the form gets submitted and the browser starts loading a different page before the JavaScript has time to do much.
Secondly, I see you are using onclick to attach the event handler. If your script has to be above the form in your HTML, this will result in changeMap being undefined. I would suggest attaching the event handler with JavaScript, something like this:
<button type="button" id="show-map">Show the map!</button><br><br>
var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);
Note that because the this is selecting the button element right here, either the script tag must be placed below the button (so the button is around--can't select nothing!) or the JavaScript needs to be placed in a document.onReady function, so that the script won't fire until the page finishes loading (which means the button will be fully loaded).
Unless you're using document.onReady, the order of the script tag and button really matter. If the script references the button, the button comes first. If the button references the script, the script must come first.
Wrapping in some sort of document.onReady is common practice. jQuery has a function ($.ready) that can be used to do this, but if you're brave you can also do it without jQuery.
Also, keep in mind addEventListener doesn't work on older IE. You could polyfill it or use jQuery.
Located outside the iframe, input into, what value is sent.
iframe outside
<input id="a_input_id" type="text">
iframe within
<a href="javascript:;" class="special_field_link">#r.SpecialField<a>
Javascript Code;(iframe in working)
<script>
$(function(){
$(".special_field_link").click(function(){
$("#a_input_id").val($(this).text());
});
});
</script>
http://i.stack.imgur.com/nnjWH.jpg
As long as the iframe and the parent are in the same domain, you need to use the parent document context
$("#a_input_id", parent.document).val($(this).text());
I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
The script works with the submit function like this:
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
But if I try to use the load function like this, it does not work, but it works for my loading animation, any suggestions on what I am doing wrong?
$(document).ready(function () {
$('#iframe1').load(function(){
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
This is the loading animation script which works
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
/ in ready()
$('#form_710370').submit(function(){$('#loader1').show();return true;});
Here is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>
<iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
</div>
Here is the CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling load again because the submit is being stopped.
Assuming that you want to show #mydivhide1 and #mydivhide2 when the form is submitted and then hide them when the iframe finishes loading, I came up with a fiddle that should do what you want: http://jsfiddle.net/CST4t/3/
Basically I just removed the e.preventDefault( ); and instead of returning false, I returned true so the form submission went through. I also cleaned up some items like the form action attribute and moved the submit function override to $(document).ready( );.
Edit
One other thing that I did was I changed the form target and the name of the iframe to a more commonly used name that seems to work better across more browsers. Apparently the name and target values are really touchy from browser to browser, see this answer.
$('#iframe1').contents().load(function() {
//window loaded
});
How to call a javascript function in ifram from parent window.
i have a jsp page which contains an iframe.
jsp page is served by "a.yenama.net" server and iframe is served "b.yenama.net" server.
<iframe width="1200" height="640" name="data" id="dataId" >
</iframe>
<br/>
<input type="button" name="data" value="Save data" onclick="callSaveData();" />
tried below code from parent jsp page and recieved permission denied error in IE
window.frames['data'].callData();
also tried
document.getElementById('dataId').contentWindow.callData(); //didn't work
Function in iframe
window.callData = function(){
alert('Iframe function');
}
your help is truly appreciated.
you can do that by declaring your function in a common .js file
Therefore, you can access your function from wherever you want.
Have a nice day
i would suggest you to use jquery.load method instead of iframe to load your second page in a div of first page and then you can call any methods from both the pages
$('#result').load('PageWhichYouAreOpeningInIFrame.html');
or if you still wants to go with IFrame then you can use:
Invoking JavaScript code in an iframe from the parent page
http://api.jquery.com/load/