I have an ExtJS window, with a toolbar at the top, and loads with plain Panel at the bottom with plain HTML. This works fine. On a button click, I'd like to be able to replace the bottom panel (called content), with another panel. If tried this
var clickHandler = function(calendar){
// 'content' is the panel id
// calendar is also an Ext.Panel object
Ext.getCmp('content').update(calendar);
};
What am I missing?
Update replaces HTML content.
You want to remove the old panel and add the new. Try .remove()ing the old panel and .add()ing the new one, and don't forget .doLayout().
Related
I am working with open video annotation JavaScript library (OVA) to annotate some content in a div tag. However, I would like to change the content of the div tag after page load "for example, using a text box and a button". The problem is that the annotation library does not work on the div content anymore (not on the text, nor on the video).
So, is there a functionality to reset the library to work again on the new content of the div tag.
I have got to solve my problem by destroying the plugin variable and then create a new instance.
The variable was initialized like this:
var ova = new OpenVideoAnnotation.Annotator($('#airlock'),options);
And I have destroyed it like this:
ova = null;
delete ova;
Then simply create a new instance of the variable:
var ova = new OpenVideoAnnotation.Annotator($('#airlock'),options);
And everything worked just fine.
I have a page with a "left" div, that contains a menu, and a "right" div, which holds a content that changes, loaded using javascript as in:
document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"> </object>';
It works okay the first time I click a link on the left menu. Now, this new loaded content has also some inputs that should do the same thing. Only it seems that they can't see the "content" div as having this id, or something else. How do I accomplish this? (fixed menu on left, and on the right we would have changing content - which would have several inputs as well). Thanks.
ADDENDUM - The contents of the js function is just the line pasted above. Probably the flow will clarify?
Step 1 - load menu on left and initial content on right. No user intervention
Step 2 - click "login" on left menu. Login page (separate html) loaded on right side. All fine.
Step 3 - click "cancel" in newly loaded login menu on right side... nothing happens, despite that button having the exact same onclick that the left side menu had (the one used to load the login scren in step 2)
When tracing through parents of this "cancel" button, the trace never "saw" the div.
This was the output of "parent hunting"
object HTMLParagraphElement (button is in a )
object HTMLTableCellElement
object HTMLTableRowElement
object HTMLTableSectionElement
object HTMLTableElement (so far so good... this should be a table containing the button clicked)
object HTMLBodyElement (mmm shouldn't I have a div here?)
object HTMLhtmlElement
object HTMLDocument
null
(now... shouldn't I have a div between body and table elements?)
Seems the partial html loaded inside the div cannot see it?
If that code-sample is used in your project, the missing > might be the source of your troubles.
document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"></object>';
Okay...
Seems the loaded content can't intrinsically "see" the parent div or its id by default. The solution was to have:
parent.document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"></object>';
instead of
document.getElementById("content").innerHTML='<object type="text/html" data="templates/login.htm"></object>';
I am trying to load specific html id content in Dojo content pane on click of a tree node.
I have a long html, which has several headings. I am trying to load content from this html on click on a tree node. I am able to get html loaded, but I am not able to bring content with specific id on top of content pane.
Say my html is abc.html and it has several ids say id1, id2 ...
if I open this html in IE with argument abc.html, page gets loaded, with first line on top. Now if I open it with argument abc.html#id9
This specific section of html get loaded to top of IE window.
I am trying to achieve same effect in dojo content pane - here content is loaded in Dojo ContentPane on click on tree node and goal is load specific #id associated with that tree node in content pane, instead of loading top of html.
It never loads specific id content on top of content pane. It always load as if argument is abc.html. I do not see any effect of abc.html#id9
below is code snippet on how I am creating content pane and loading content on click on tree node.
....
var CenterPane = new ContentPane({//content pane at center for loading urls of selected designs
content:"Click to get the details about node",
region:"center"});
bordContainer.addChild(CenterPane);//add content pane to the border container
....
....
var fileTree = new Tree ({
model: treeModel,
showRoot: false,
openOnClick:true,
autoExpand:false,
_createTreeNode: function (args)
{
return new MyTreeNode(args);
},
onClick: function(args) {
CenterPane.set("href", vHtmlPath); }
....
vHtmlPath is dynamically set to abc.html#id9 or abc.html#id1 ....
ContentPane does not load into an iframe. If you want to move, you have to change the current page url.
For instance
CenterPane.set("href", vHtmlPath).then(function() {
document.location.href = "#id9"
}
I am trying to create a Bootstrap popup dynamically. I am using the following code but it does not show anything.
function showDictionaryPopup(term) {
// create popover div
var popoverDiv = $("<div>");
popoverDiv.attr("data-toggle","popover");
popoverDiv.attr("data-content","This is a test");
popoverDiv.addClass("row");
popoverDiv.popover();
$("body").append(popoverDiv);
}
I do not get any errors or anything..
Looks like you are appending the div to the DOM but never letting the popover be shown. Try calling popoverDiv.popover('show');
You may also want to add some content to the popover. All the available options can be found here: http://getbootstrap.com/javascript/#popovers
I have been writing a CMS for a while now and am currently putting the last few touches on it. one of which includes using ajax to deliver a tinyMCE editor in a lightbox styled window.
when it is loaded, the first time it works perfectly, but when i do it the second time or more, the element names get messed up and it doesn't send data back, or display the current value in the TinyMCE window. When I use Chrome to inspect the element, I can see that the span that contains the previous tinyMCE window is still there.
I use document.body.removeChild to remove the div that is holding it. Does anyone have any ideas?
Addition:
when AJAX gets back from making the request (it has all the html code of what goes in the window), it creates a new div element and uses document.body.appendChild to add the element to the document and puts the html code into the div tag.
Then it travels through the new code and searches for the scripts in that area (of which one is the MCE initiator) and appends them to the head so they are executed.
if the user clicks cancel rather than save, it removes the div tag by using:
document.body.removeChild(document.getElementById("popupbox"));
which works fine,
however when i bring up popup and repopulate as said before, and inspect the elements there, there is still a span there which was created by TinyMCE and the naming has been changed (instead of being identified by 'content', it is now 8 for some reason) and there is no content in the editor region.
I have used:
tinyMCE.execCommand('mceRemoveControl',true,'mce{$Setting['name']}');
tinyMCE.editors[0].destroy();
but neither of them work. They return the tinymce window to a textarea, but the elements are still there.
Removing the editor as you described (using the correct tinymce editor id) before moving or removing the html element holding the tinymce iframe is a good choice. Where do you load your tinymce.js? If you deliver it using ajax i think it might be better to load it on the parent page(!). Some more code would be helpfull.
EDIT: I remember a situation where i had to remove a leftover span. Here is my code for this:
// remove leftover span
$('div .mceEditor').each(function(item){
if (typeof $(this).attr('style') !== "undefined" ){
$(this).removeAttr('style'); // entfernt "style: none";
}
else {
$(this).remove();
}
});