I have this weird problem on Chrome - on my page I am injecting elements using Mootools specifically a lightbox that contains a jwplayer video. The problem on chrome is that referring to an element ie. $('grid_01'); returns null the second time I click on it. To get around this I'm trying to test the element is null and re-inject it
var ss = $('holderdiv');
var x = $('mb_inline_0_-1');
if(x == null)
{
var el = new Element("div", {id: "mb_inline_0_-1"});
//if this line below runs without error...
ss.inject(el);
}
//.........why would x2 be null?
var x2 = $('mb_inline_0_-1');
Chrome says its null. Is there something I can do to ensure the DOM is updated ?
Thanks
You mean to use grab, not inject.
ss.grab(el); // Or el.inject(ss);
Your code has ss being injected into el, which is never attached to the DOM.
Injecting a newly created Element is written in the format newElement.inject(existingElement, position);.
So in your case, if you are planning to inject the newly created div (contained in el) into $('holderdiv'), it should be done thusly:
var el = new Element('div', {
. . .
});
el.inject('holderdiv', 'bottom'); // Although 'bottom' is assumed if nothing is passed
Related
I have a popup that loads some html for messages. When I open the popup and trying to get the html, i get undefined.
see this http://codepen.io/patrioticcow/pen/LZNraz
this doesn't seem to work:
$$(document).on('opened', '.popup-messages', function() {
var mMessages = $$('.messages')[0].f7Messages;
console.log(mMessages);
});
this doesn't work either
var myMessages = myApp.messages('.messages', {autoLayout: true});
console.log(mMessages);
Any ideas?
Because there is no attribute f7Messages inside $$(.messages)[0], Instead of that you can use innerHTML. ie :
var mMessages = $$('.messages')[0].innerHTML;
console.log(mMessages);
Hope this helps.
By the way,why you need html?Use messageBar concept of framework7.
I am running an HTML 5 application using the KendoUI framework. Once of the screens deal with XML data that needs to be parsed and processed.
This screen needs to be shown as a popup and that data is shown in a grid inside this popup. To do this, I am calling a function on clicking the "show-popup" button inside which I have the following piece of code :
var tTranslationXML = XMLFromString(_SelectedCategoryValueRecord.DisplayTextTranslation);
.
.
.
// other stuff but nothing that changes "tTranslationXML"
.
.
if (_SelectedCategoryValueRecord.DisplayTextTranslation) // and there are values in the translation field
{
var $language = $(tTranslationXML).find('Language');
var $oldTranslation = $($language).find("en-US");
if ($oldTranslation.length == 0)
$oldTranslation = $($language).find(GetCorrectedCase("en-US"));
if ($oldTranslation.length == 0) {
var $newTranslation = $.createElementNS("en-US").text(_UpdatedDisplayText);
$language.append($newTranslation);
}
}
And if you are wondering what "XMLFromString" is, its nothing but a simple helper to parse the XML data from a string variable
function XMLFromString(pXMLString)
{
if (!pXMLString)
pXMLString = "<Language></Language>";
if (window.ActiveXObject) {
var oXML = new ActiveXObject("Microsoft.XMLDOM");
oXML.loadXML(pXMLString);
return oXML;
} else {
return (new DOMParser()).parseFromString(pXMLString, "text/xml");
}
}
My issue is that this works fine on Chrome and Firefox but I get an error in IE10 when this particular line executes -
"$language.append($newTranslation);"
I am basically trying to append a new translation value to the contents of my variable here.
The error is as follows :
SCRIPT13: Type mismatch
jquery-1.8.3.min.js, line 2 character 71981
Any ideas on how to solve this?
Sorry for the delayed response.
I figured out that the issue was to avoid using the method "createElementNS" and instead use the "createElement" method when creating the parent node. Subsequent appendages to this node do not throw up any issues. However there will issues when you append to a node that was originally created using "createElementNS".
This seems specific to IE10 because the NS method worked fine on chrome, FF and Safari.
Thank you all for the tips and ideas.
I'm currently building a HTML/JS AIR application. The application needs to display to the user a different 'window' - dependant on whether this is the first time they've launched the application or not. This part is actually fine and I have the code below to do that:
if(!startUp()) { // this simply returns a boolean from a local preferences database that gets shipped with the .air
// do first time stuff
var windowOptions = new air.NativeWindowInitOptions();
windowOptions.systemChrome = 'none';
windowOptions.type = 'lightweight';
windowOptions.transparent = 'true';
windowOptions.resizable = 'false';
var windowBounds = new air.Rectangle(300, 300, 596, 490);
var newHtmlLoader = air.HTMLLoader.createRootWindow(true, windowOptions, true, windowBounds);
newHtmlLoader.load(new air.URLRequest('cover.html'));
}
else {
// display default window
// just set nativeWindow.visible = true (loaded from application.xml)
}
However, what I want to be able to do is manipulate the html content from within cover.html after it has loaded up. There seems to be plenty of tutorials online of how to move, resize, etc. the NativeWindow, but I simply want access to the NativeWindow's HTML content.
For example, how would I add a new paragraph to that page? I've tried the following:
newHtmlLoader.window.opener = window;
var doc = newHtmlLoader.window.opener.document.documentElement;
Using AIR's Introspector console, ....log(doc) returns [object HTMLHtmlElement].
Hmm, seems promising right? I then go on to try:
var p = document.createElement('p');
var t = document.createTextNode('Insert Me');
p.appendChild(t);
doc.appendChild(p);
...but nothing gets inserted. I've also tried the following replacements for doc:
var doc = newHtmlLoader.window.opener.document.body; // .log(doc) -> [object HTMLBodyElement]
var doc = newHtmlLoader.window.opener.document; // .log(doc) -> Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
...as well as the following with jQuery:
$(doc).append('<p>Insert Me</p>'); // again, nothing
So, anyone had any experience in accessing a NativeWindow's inner content programmatically? Any help will be greatly appreciated.
Hmm, so I think I may have found out how to do it...If we amend the original code and add an event listener on the loader:
var newHtmlLoader = air.HTMLLoader.createRootWindow(true, windowOptions, true, windowBounds);
newHtmlLoader.addEventListener(air.Event.COMPLETE, doEventComplete);
newHtmlLoader.load(new air.URLRequest('cover.html'));
You can then interact (assuming you're using jQuery) with the contents of the newly created window by using:
function doEventComplete(event) {
doc = $(event.currentTarget.window.document.body);
doc.append('<p>Insert Me!</p>')
}
:)
I'm not sure this has the effect you intended:
newHtmlLoader.window.opener = window;
var doc = newHtmlLoader.window.opener.document.documentElement;
What is does is set var doc = window.document.documentElement;, so 'doc' is your local document, not the one in the other window.
I think what you want is
var doc = newHtmlLoader.window.document.documentElement;
Do note that this will not work until the document has loaded.
I am currently using code similar to this:
try {
// IE ONLY
var theElement = "myElementName";
window.frames[theElement].focus();
var selection = window.frames[theElement].document.selection.createRange();
alert ( selection.htmlText );
} catch(e) {
var selection = window.frames[theElement].document.getSelection();
alert ( selection );
}
As you can see, I am accessing a node from an iframe (no fun already). I am definitely in new territory here, so am sure there are more issues to arise, but right now, I am trying to get Firefox to give me the same result as IE.
In IE, I can access the HTML code of the selection by using the (apparently IE-only) htmlText property of the object returned by createRange(). What I am looking for is the Firefox equivalent to that (or a function that I can use to give me the same result).
Anyone know how to do this?
This works in Firefox 2 and later (untested in earlier versions):
var selection = window.frames[theElement].getSelection();
var range = selection.getRangeAt(0);
var div = document.createElement("div");
div.appendChild(range.cloneContents());
alert(div.innerHTML);
I've spent a long time trying different things to get this to work but nothing does and documentation is not helping much.
I'm trying to populate a form inside an iframe that I dynamically inject into a page. To inject that iframe I do:
myObject.iframe = document.createElement("iframe");
myObject.iframe.setAttribute("src", data.url);
myObject.iframe.setAttribute("id","extension-iframe");
myObject.window.document.getElementById('publisher').appendChild(myObject.iframe);
myObject.iframe.addEventListener("load", function(){
myObject.populate(data);
}, false);
which works fine and DOES trigger the populate() method. My problem is getting the document or window objects for that iframe. I've tried all of the following:
myObject.iframe.window
myObject.iframe.document
myObject.iframe.content
but these are all undefined.
I also tried passing the event object to that iframe's load event listener and then doing:
event.originalTarget
But that didn't work either.
I am reading the following documentation:
https://developer.mozilla.org/En/Working_with_windows_in_chrome_code
https://developer.mozilla.org/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages
But either I'm not understanding it or it's just not properly explained.
Can anyone shed some light?
Thanks!
Have you tried using the contentWindow property?
var doc = iframe.contentWindow.document;
Try myObject.iframe.contentDocument
Something along the lines of this:
// For accessing browser window from sidebar code.
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
var gBrowser = mainWindow.gBrowser;
var iframes = gBrowser.contentDocument.getElementsByTagName("iframe");
for (var i=0; i < iframes.length; i++) {
var check_elem = iframes[i].contentDocument.getElementById('myid');
if (check_elem) {
...;
}
}
I'm passing in the event object and then event.originalTarget (like you mentioned) and it's working fine. Although I had to set useCapture parameter of addEventListener to true in order to get my event called.
So if I understand correctly you need to access document in populate method...
I would pass event.originalTarget as a parameter to your method
or
in load event I would set for example myObject.document property and then use it in populate method.
myObject.iframe.addEventListener("load", function(event){
var doc = event.originalTarget;
myObject.populate(data,doc);
}, false);
I almost had the same problem. Using the following code gets me the iframe (Firebug is used for debugging):
iframes = window.content.document.getElementsByTagName('iframe')
for (var i = 0; i < iframes.length; i++) {
var elmInput = iframes[i];
Firebug.Console.log(elmInput);
}