Confusingly, or perhaps not, I don't want it to postback, as it is loading a popup containing content, but the postback closes the popup.
The code is really simple, and its just a bog standard asp:Hyperlink. Theres nothing that I can see which could cause this, and I am mainly confused as to how and why it is being handled so differently by each browser.
The only thing I could think of was JS with
event.preventDefault();
Any one got any ideas what could cause this?
I am reloading an iFrame with a new source, which sits on the page, but it is forcing the entire page to postback on firefox only.
iFrame.attr('src', newSrc);
The rest of the code:
$('.button-try-glasses').on('click', function (event) {
var modal = $('#modal-container');
var newAsset = $(this).attr('data-asset');
var iFrame = modal.find('iframe');
var currentIFrameSrc = iFrame.attr('src');
var newSrc = currentIFrameSrc.substring(0, (currentIFrameSrc.lastIndexOf("/") + 1)) + newAsset;
iFrame.attr('src', newSrc);
Trylive.parse();
showPopup($(null), '#modal-container', true);
event.preventDefault();
});
If I comment out the .attr line, it doesn't update the source, but it also doesn't postback and then close the component.
To answer exactly we need your aspx and js code. For quick hit and try. There must be some Js error. You can write
return false;
at the end of your Js code.
As the others mentioned we need your aspx and js code.
But as a workaround you can try to wrap your ifram with asp UpdatePanel which should fix it.
$('.button-try-glasses').on('click', function (event) {
event.preventDefault(); //put it here
....
return false; //this must be last line
});
hope that works for you
Looks like the problem is with the page you are trying to load in the iframe. The javascript in the iframe could be doing something like top.location = "post url" or window.parent.location="post url".
Could you try opening another url like google.com in your iframe and see if the problem persists
iFrame.attr('src', "http://google.com");
You might wanna try checking the following options for errors -
Order of calling => It is always a better approach to call loading or contents of your modals after the modal is shown. Because until the containers of modals are shown, you might not be able to use them in codes. For example, calling iFrame.attr('src', newSrc); after executing showPopup($(null), '#modal-container', true); could be a good idea.
Check Url => Make sure url is properly generated and the url you are trying to load supprts CORS.
I have tested with Twitter Bootstrap to try to load an iframe inside a modal, it worked perfectly. You might wanna check out the codes at jsfiddle, this might help you solving yours.
Here is a screenshot of the content loaded in modal -
Related
I use featherlight to open a image upload/resize/cropping page via an iFrame.
I would like to call the closeTrigger as soon as the user hits save (within the iFrame) so that they don't need to close it manually
I'm a bit confused about this. I've checked the min.js but couldn't find anything, and I also didn't find the Javascript action tied to the closing button...
Any ideas?
This also works: parent.window.$.featherlight.current().close();
I found an answer here
How do I remove iframe within itself by using javascript
iFrame (after eveything is done):
<script>parent.window.postMessage("closetheiframe", "*");</script>
ParentWindow:
<script>
function receiveMessage(event){
if (event.data=="closetheiframe"){
var current = $.featherlight.current();
current.close();
}
}
window.addEventListener("message", receiveMessage, false);
theoretically, if featherlight.current works fine, this would help me also on a page, where I use different iFrames to be opened and closed (not at the same time though)
I am stuck at stupid problem. I am trying to develop a Firefox Extension in which I have a popup panel and in that panel, there is an iframe of a tasks.html File.
I want to postMessage to that iframe on click of a button in my web page(Say webpage interaction with the plugin) but its not working.
Here is the image to the Panel on how it looks.
This is the function, M using to send data to the iframe. The Post Function is called when the button in the webpage is clicked.
function Post() {
var iframe = window.document.getElementById("iframe").contentWindow;
postMessageToWindow(iframe, "Hello");
}
function postMessageToWindow(win, message) {
try {
win.postMessage(message, '*');
return true;
} catch(e) {
return false;
}
}
and In that html page, I have
window.addEventListener('message', function(e) {
var str_data = e.data;
document.getElementById('test').innerHTML = str_data;
});
but nothing gets shown in the test DIV.
Please help me with it. Thanks.
Ignore my message about win.postMessage I didn't know that postMessage was a "native" function. It's cool helping you I learned something.
Anyways yes it would be nice if your code worked on first time. Thanks to some info from Blargh I found your problem.
Find sample_button.appendChild(tasks_popup); and remove that, why were you doing that? Right now its cloning the original object and adding it.
Another thing, why go through postMessage? Instead of postMessage you can simply do tasks_iframe.contentDocument.querySelector('#test').innerHTML = 'why bother with postMessage, just do this? but i fixed postMessage for you too<br>';
Another thing, the interval of 300ms works but its intensive and not the best solution. It will work for now though.
Do you have plans to upload this to addons.mozilla.org? They don't like setting innerHTML, if you plan to release there let me know and I'll show you how to do it without innerHTML.
Also your "Refresh" button in the panel in overlay.xul needs fixing to document.getElementById('tasks-list').contentDocument.location.reload()
in the code you posted, im not seeing the toolbar button get added, its not even in the customize view, did you test your sample code you uploaded?
the addAsTask function is failing hard in your sample code because elements like #sample-button and #TasksPanel don't exist. please make sure your test case works before uploading
box.com/s/hxn16axnxbwc151h92g
the addon doesnt work on install but i see a problem here:
function postMessageToWindow(win, message) {
try {
window.top.postMessage(message, '*');
return true;
} catch(e) {
return false;
}
}
on line3 it says window.top. use win.top. also i dont think u need to use .top. just use win.postMessage
also is postMessage a function in the iframe? because when i look theres no postMessage function in tasks.html
I want the contents of a link get printed by jQuery. What do i do?
Following is my code:
DEMO:
Print
$(document).ready(function() {
$('ul#tools').prepend('<li class="print">Click me to print</li>');
$('ul#tools li.print a').click(function() {
window.open('www.google.com');
window.print();
return false;
});
});
"Printing the contents of a link" sounds ambiguous. I guess what you are trying to do is to print another web page? It might work if you opened the page in a new frame and printed that, it seems to me that this question might help you.
You would have to call print() on the window you are opening, not the one the original code is running in.
var foo = window.open(bar, 'bar');
foo.print();
(You might run into timing issues if the window hasn't had time to load the document).
However, in you example you appear to be trying to open a third party page (although you forgot the http://). The same origin policy will prevent you accessing the print method of the remote document.
Situation: for various reasons (mainly, that it will be used at times in situations where the Internet is not availble), some JavaScript-heavy HTML I am building has to be able to run at times strictly on the client, with no server involved. For the most part, I've been able to come up with workarounds that allow pages from this site to be saved by the usual browser 'Save Page As' mechanisms, embed all the pieces they need, and massage paths to refer where I want them to (on the local machine) when the browser isn't smart enough to fix the URL (which is more often than I might have thought).
One piece I haven't been able to solve yet, though: each main page can open a help page in a new tab/window. To do that, I embed the content of the help page in the main saved page. Then I can use helpWindow.document.write(helpContent) to open that. Problem: as far as the browser is concerned, the help page ends up with the same URL as the original page, so I can't effectively use page-internal links on that page: it tries to load the main saved page if you click one!
For example: <a name="target" /> ... link in the help page: if you click "link", the browser loads the main saved page, rather scrolling the help page.
My temporary workaround is to strip these links when I have to operate in this environment, but I'd sure rather have a way to make them work. Any suggestions? Suggestions could include an entirely different way to open a help page. I'd rather not use iframes, though, I'd really like it to stay in a separate tab/window.
You can scroll to the bookmark with JavaScript with element.scrollIntoView():
function goToBookmark(e)
{
e = e || window.event;
if (e.preventDefault)
{
e.preventDefault();
}
e.returnValue = false;
var bookmarkName = this.href.replace(/^#/, "");
var bookmark = document.getElementsByName(bookmarkName)[0];
if (bookmark)
{
bookmark.scrollIntoView();
}
}
for (var i = 0; i < document.links.length; i++)
{
var link = document.links[i];
if (/^#/.test(link.href))
{
link.onclick = goToBookmark;
}
}
Or, if you are using jQuery:
$("a[href^='#']").click(function(e) {
e.preventDefault();
var bookmark = $("a[name=" + this.href.replace(/^#/, "") + "]")[0];
if (bookmark) {
bookmark.scrollIntoView();
}
});
You should read this: http://en.wikipedia.org/wiki/Single-page_application
In particular try: http://en.wikipedia.org/wiki/TiddlyWiki
(Sorry, that this doesn't answer your question, but if you have not see those, maybe you can get ideas from them.)
Edit:
I tried this out a bit, and that's really strange! It almost seems like a bug to me. Do all browsers do this?
A solution could be to use ID instead of A NAME (which BTW you can/should do even if you wanted to link by anchor fragment) and then use
document.getElementById(elID).scrollIntoView();
To jump to the element.
I've been trying to get this right but any of the code i try works.. i looked here and i couldn't find an useful answer.
I have this code on the "onclick" event of a button:
function myFunction(){
window.open("mypage.html","_self");
}
that is supposed to open the url in the same tab, but it doesn't do anything. On the other hand if i take out the "_self" argument, it does work but it opens the url in another tab which is exactly what i don't want.
help please?..
Use this instead:
function myFunction() {
window.location = "mypage.html";
}
This will replace the current document in the current window/tab with a new document loaded from that URL.
If you want to open in the same tab replacing its contents you could perform a redirect:
window.location.href = 'mypage.html';
you are correct but just to make sure that the target page is in the same location or folder and must be in single quote.
if in the same location/folder then:
window.open('target.html';'_self');
if in different location/folder then:
window.open('folder/target.html';'_self');
Hope this works for you.