I have a page where it loads an iframe (contains a form on same domain) which is hidden until the user clicks on a button, which invokes jQuery slideToggle() to show/hide it.
When a user submits the form it loads a 'thank you' page in the iframe. What then happens is that if the user then clicks on the button again, jQuery checks the ID of the iframe body element to see if the form is there, if not then it loads the form iframe and displays it.
The code I have got works in Chrome but falls over in Firefox;
Error message in console => TypeError: frames['form-iframe'] is undefined
(and I imagine IE when I get to testing it).
Any ideas on why, or how to solve this issue would be greatly appreciated.
HTML snippet
<label id="tell-a-friend-button">
<div class="radio-button radio-button-grey">
<div class="label-text">YES</div>
</div>
<span>Tell a friend</span>
</label>
<div id="tell-a-friend">
<iframe src="me.asp?email=foo" frameborder="0" id="form-iframe"></iframe>
</div>
jQuery snippet
$("#tell-a-friend-button").click(function(){
// set iframe content
$("#form-iframe").ready(function () {
var frame = $('body', frames['form-iframe'].document).attr('id');
if (frame == "tell-form") {
$('#tell-a-friend').slideToggle();
} else {
// is the thank you page
// load the iframe
$("#form-iframe").attr("src", "me.asp");
}
});
});
Related
So, I have an iframe inside my application page (different domains) where the iframe has few fields and a hidden button that has a click event on there to do all the necessary stuffs (like the CRUD operation). The post is called via ajax, so there is not POST method on the iframe. The parent page has a button which is what should be used to when clicked, should trigger the click event inside the iframe. I did look into the postMessage and cross-origin and was able to find something that i have implemented on my solution. With that being added, when I click on the button on the parent page, nothing happens. I do not see any console error but nothing fires. This is what I have in my code.
<div id="main">
<iframe id="cardIframe" src="#($"https://localhost:44320/handlers?userId={Model.UserId}")"
width="100%" height="300px" style="border: none;" scrolling="no"></iframe>
<hr class="mb-4" />
#Html.UI().Button("Continue to Checkout", size: UIElementSize.Block, uiClass: UIElementClass.Primary, htmlAttributes: new { #class = "checkoutsubmit" })
<script type="text/javascript">
$('.checkoutsubmit').click(function (e) {
var iframe = document.getElementById('cardIframe').contentWindow;
window.iframe = iframe;
iframe.postMessage("createvault", "*");
});
</script>
And in my iframe application (http://localhost:43402)
<script type="text/javascript">
window.addEventListener("click", clickEvent, false);
function clickEvent(event) {
$('.processbraintree').trigger('click');
}
$('.processbraintree').click(function(e) {
..Do something
});
</script>
Not sure what am I doing wrong here. The fact that I do not see any error on the console doesn't help any. I have to have the iframe do the post of the form as it has all the braintree dropin ui stuffs. So, the parent has to be able to trigger the event inside of an iframe which currently does not happen right now.
I've created a form on my website using Google Forms, and through a couple of tutorials I've prevent the page from navigating to the Google Forms thank you page and instead using my own thank you page.
The way this has been done is using a hidden iframe as a target on the form and then the iFrame checks if the form has been submitted successfully before switching the window to my thank you page.
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted == true)
{window.location='https://www.normadorothy.com/sample-thanks';}">
</iframe>
This works fine and submits the form before showing the thank you page, however if the user then clicks the back button, the form is submitted again.
I've tried console.log(submitted) which returns false so not sure why this is being submitted twice.
Just for clarity, the form code is:
<form id="sample-form" class="validate" action="google-url" method="post" target="hidden_iframe" onsubmit="return validate();">
The validate function checks all the fields, sets submitted to true and then submits the form.
Any help would be great, I've been banging my head against a wall with this!
I would guess this is happening because the back button tries to take you back to the iFrame's last known state (which is the form POST URL) and not the "raw" state you expect. You could try writing the iFrame using JS on the parent page to work around this:
var iframe = document.createElement('iframe');
iframe.onload = function() { if(submitted == true) {window.location='https://www.normadorothy.com/sample-thanks';}};
iframe.style.display = 'none';
document.body.appendChild(iframe);
I have an app I'm working on which needs to display craigslist ads. I am parsing the html to get the attributes off of the page. But herein lies the problem:
The reply button is a javascript button. In it is the email/phone# for the ad.
I need to get the info from the pane that is generated when the button is clicked and then parse its information.
You can register a callback in click event and target the affected div to probe for the content required to be parsed...
Hypothetically, lets consider a scenario...
<!-- CONSIDER THIS AS THE TARGET DIV WHERE CONTENT IS POPULATED-->
<div id="replydiv"></div>
<!-- BUTTON WHICH POPULATES THE DIV-->
<button id="clickme"></button>
<script>
$(function()
{
$("#clickme").click(function()
{
//Will check if the div is populated
doCheckReply();
})
})
</script>
function doCheckReply()
{
if($("#replydiv").children().length > 0)
{
//start parsing
}
}
If the replydiv is taking some time to load, use setInterval() to keep checking for availability of content.
It would help me a lot if you could share a snippet of the code
Hope it helps!
I am using colorbox for a modal display, which opens for the user when clicking on an image to update it. Once the user uploads a new image and hits submit on the colorbox modal, the modal should close and refresh the image on the parent page.
I am using the following onClick event within the submit button:
<input onClick='window.parent.location.reload(true);' type='submit' value='Submit' name='save_button' id='save_button'>
This closes the modal and refreshes the parent page.php. But for some reason, it does not refresh the old image to show the new image the user just uploaded.
EDIT: Added Colorbox Code
The script that calls the color box was conflicting with other javascript code, so I added the following script above the colorbox code, and changed the $ to jQuery in the code:
<script>jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("iframe").hide();
});
$('input').hide();
</script>
<script>
jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%"});
});
</script>
Any ideas?
The browser creates a cache for faster browsing and if your image src[location] is the same after your page refresh, the browser shows you the previous copy of the image. You have to change target of the the image src attribute each reload or do the same via a function, like this:
$('img').each(function(){
$(this).attr('src',$(this).attr('src')+Datetime.now());
});
Here is the code, specific to colorbox script, which ended up working for me. I added onClosed:function(){ location.reload(true); } in the last part of the script below:
<script>jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("iframe").hide();
});
$('input').hide();
</script>
<script>
jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%", onClosed:function(){ location.reload(true); } });
});
</script>
Then I added the onClick event inside the submit button code:
<input type='submit' value="Submit' onClick='parent.jQuery.fn.colorbox.close();'>
This closes the colorbox modal while refreshing the parent page, along with the image for all current versions of FF, IE, Opera, and Chrome. It refreshes page, but not the image in Opera.
Very likely the image is cached in the browser, give your image control an ID and call window.parent.document.getElementID("image").src += "?" + [some random number, or maybe the miliseconds]; this will cause it to go back to the server for and reload the image.
EDIT
more fleshed out script:
<script language="javascript" type="text/javascript">
function onSubmitClick(){
parent.jQuery("#img")[0].src += "?" + Math.floor(Math.random()*1001);
//note the above will append a random number between 0 and 1000 to the src.
parent.jQuery.colorbox.close()
}
</script>
<input onClick='onSubmitClick();' type='submit' value='Submit' name='save_button' id='save_button'>
<img src="pic.jpg" id="img">
I also realized a failing in my suggestion is that when the page is reloaded it's just going to load the same image from cache again. So this script is written without the page refresh.
i tried to load a page inside a div tag using a script,the page is a login page,when i logged in i need to open the corresponding output page inside the same div,i dont have any idea how to proceed further because it is two different pages which should opened one after the other
<script>
$(document).ready(function() {
$(".link1").click(function(event){
event.preventDefault();
var url =$(this).attr("href");
$('#clear').load(url);
});
});
</script>
the above script will load the login page inside the div tag
<a class="link1" href="display.jsp">link to open the login page</a>
the corresponding page after the login contains table which should be displayed in the same div.
You have to disable the default-behaviour so that the browser doesn't navigate: either by return false; or by event.preventDefault(), see this thread