Loading inline content from an iframe - ajax

First of all, I had all my buttons which opened the Colorbox using the "ajax" class. That class however caused me many problems:
1-When I open one window, it will appear, when I close it and re-click the same button, it will be loaded twice (so I need to click twice to close)
Is there a fix for this?
What I have done for the moment:
Use iframes; my only problem now is I cant load the other colorboxes that are linked in that iframe. I am using the inline class.
Let me re-phrase that: I click on button "generate" it opens first colorbox with the iframe class. Inside that iframe I have a "generate_2" button which has inline content. Once I click that second button nothing happens. This used to work when I had the first button set to ajax.
What can I do?
thanks!

I had the same problem before. Since JavaScript cannot affect iframes, you must add the JavaScript code inside a script tag in the iframe page itself.

when I close it and re-click the same button, it will be loaded twice (so I need to click twice to close) Is there a fix for this?
I'd wager you are using ajax to open a complete HTML document, aren't you? You shouldn't be doing that. It's not valid HTML to nest one HTML document inside another, and you are causing the scripts from both to be applied to the original document. Each time you load that content, those scripts are being loaded and executed all over again.

Related

How can I create a persistent extension page?

Is it possible to make the browserAction popup persistent so that it's not reloaded every time? Failing that, is it possible to have any viewable extension page that can be hidden instead of closed?
I have a complex layout involving a large number of elements that I'm currently saving and loading as a string or using importNode to work around the issue but neither option is great.
No, you can not cause an actual browserAction or pageAction popup to persist. However, just like any HTML page in your extension, you can open that HTML page in either a tab or window.
As to hiding an extension page: A tab does not need to be currently viewed. A window displaying the HTML page could be hidden by minimizing the window you desire to hide. Alternately, you could placed the window you desire to hide under another window by bringing the other window into focus. A third option would be to move the to-be-hidden window to coordinates that are off the screen. All of these are accomplished with windows.update().

Reusing the instance of CKEditor in the Jquery UI Dialog

First, I create an instance of CKEditor named 'richEditor' in a webPage.
Second, upon a button click I am making ajax call, which returns html data, and showing it in a jquery UI dialog.Then I am copying the HTML of 'richEditor' instance already present in the webpage and pasting it in a div in the dialog.
But the reused 'richEditor' instance does not work.Any button click in the editor is throwing javascript error and neither the textarea nor the source text area is editable.
Any help or thought is really appreciated.
You cannot basically copy the HTML of the editor and reuse it. First of all, DOM structure of the instance is strictly connected to the JS code driving the editor (and vice versa). It's much deeper than plain HTML. The second reason is that the editor you use is based on the iframe, which cannot be copied preserving its content.
In other words: You have to create another instance of the editor to run it somewhere else. Please refer to the official guide and API docs to know more about CKEDITOR.replace(), CKEDITOR.appendTo() and CKEDITOR.destroy().

Ordering issue in modal window

I have a problem with a component that loads in to a modal window. I am using the Alpha User Points system and it has a component that gives you a full list of yous site's users. It also gives you the ability to order by username, by points etc. If I use it outside of modal window it works fine. If I use it in to modal window, ordering don't work!!! When I put my mouse over table's headers, outside of modal window gives this...javascript:tableOrdering('aup.referreid','asc','');In to modal window I see this...javascript:tableOrdering('aup.referreid','asc','');?ml=1 Using Firebug, I remove this ?ml=1 and it works into modal also!!! So the question is, why in to modal window gives this ?ml=1, what is this? And how will I remove it?
Well here is the answer... I use the Modalizer extension of nonumber.nl. I was loading my component through modalizer's modal box, this is why I had this issue. So, if anyone use Modalizer to popup components and have the same problem with me, just go to modalizer's Plugin Manager, find the option Convert Links inside Window and disable it!!! But, after this, if you want to add link in to modal window and you don't want to show-up the whole front page but only the component or what ever this is, you have to add at the end of the link this &ml=1.

How can I make the jquery ui dialog opened even after page reload

I have a webapp that store a layout,
And on its edit mode the user should click on the layout option inside a jquery ui dialog.
After the user choose the template that he/she want, the page will automatically reload.
I want the jquery-ui keep open even after the page was reloaded...
Hope it makes sense.
Hoping for your replys.
King Pangilinan
I guess your whole page is being reloaded? If so you can't keep the dialog open but re-open it when your dom has been loaded. To do so you can do:
$(document).ready(function() {
$("dialog_selector").dialog('open');
});
That just opens it. Now if you want to do it on a page reload you would have to embed this javascript code in some conditional ERB-code (if you're using ERB) or similar which meets your conditions...
Hope it's clear what I mean.

Firefox back button vs iframes

In Firefox if the window.location of an iframe is changed, this gets populated to the history of the top level window.
If the user now clicks the browser back button, the contents of the iframe will change rather than the browser going back to the previous HTML page.
This is totally wrong for some architectures.
Is there any way with JavaScript to prevent Firefox (3.x) from doing this?
(Please stick to just this question, not why/when/how iframes versus other techniques should be used.)
Use .location.replace
I have the same issue and was researching possible ways around it when I read this. I don't know if you solved the problem, but I think I'm going to use the unload event in the IFrame'd window to notify the parent window when it's unloaded.
If the iframe is closed by a 'valid' method, a variable is set at the parent to say the iframe is expected to unload
If the parent reloads / changes the src of the iframe a variable is set to say the unload is expected
If an unexpected unload happens in the iframe I assume it was the back button and update the parent page accordingly (e.g. jump another step back in the parent's history, or do something else).
The only ugly case here is if the parent page is unloaded and the iframe also throws unload - depending on how quickly the parent page changes you might get a race condition where the parent's iframe unload handler is or isn't fired.

Resources