I'm loading dynamic pages into Html id using load() function. So i want to destroy/clear/fly all Elements(including javascript objects) which are loaded previously into the Html id After destroy the previous loaded elements then new content should be load in to Html id. I'm rendering Extjs form panels and popup in each pages.When i'm trying to load same page again popups are not displaying because previous elements not destroying. Whts the wrong with my approch.
var content_div = Ext.get(div_id);
content_div.load({
url:BASE_URL+url_href,
scripts:true,
text: 'Loading...',
params:{id:'123'}
});
content_div.show();
Any ideas?
Try the following:
var content_div = Ext.get(div_id);
content_div.update("");
content_div.load({
url:BASE_URL+url_href,
scripts:true,
text: 'Loading...',
params:{id:'123'}
});
content_div.show();
Related
I have added magnific popup gallery in my web page, everything works great. Just I want to know, is there any possibility add bullets in popup gallery below image in .mfp-bottom-bar.
The gallery example on Magnific's demo/homepage shows at least one way to achieve this, by feeding some markup into the return value of a function in the titleSrc option in the image option of the popup. In that example (from the page's source):
$('.popup-gallery').magnificPopup({
...
image: {
...
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
The above case appends a <small> element to the current link's title attribute value/text, but you could presumably return some other <ul><li>...</li></ul> markup, or use jQuery to grab some existing <ul> in the markup (if relative to the current item, then presumably using item.el to help locate it).
I am passing an element ID using the location hash like so:
https://example.com/object/id#sub-object
However, the list of sub-object elements is loaded dynamically from an api after page load.
How can I scroll the viewport to the given element once the async request completes? Given that it's location is not available in the DOM on page load.
I solved this myself, I used jquery for the scroll animation because, easy.
if(window.location.hash && !this.hasScrolled){
var hash = location.hash.substring(1);
$('html, body').animate({scrollTop: this.$refs[hash][0].offsetTop -200} ,800);
this.hasScrolled = true;
}
This had to happen in the updated() hook on the component as this is the point when the element's offset is known. I added a hasScrolled property (initially set to false) so I can make sure it only does the scroll on initial page load.
I'm writing some javascript for a Windows 8 app. I'm trying to render a drawing to a canvas element that is a child of a dynamically created document.
I've got this function returning a new document:
initPrintDoc: function () {
var emptyDoc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null),
emptyBody = document.createElement('body'),
emptyCanvas = document.createElement('canvas'),
debugDiv = document.createElement('div'),
debugMsg = document.createTextNode("[PRINT] : This is a test print source.");
//Initialize attributes for elements
emptyBody.setAttribute('id', 'pdf-container');
emptyCanvas.setAttribute('id', 'render-output');
debugDiv.setAttribute('id', 'debug-output');
debugDiv.appendChild(debugMsg);
emptyBody.appendChild(debugDiv);
emptyBody.appendChild(emptyCanvas);
emptyDoc.documentElement.appendChild(emptyBody);
return emptyDoc;
},
The returned document object is not the document object that is displayed in the Windows 8 App UI at runtime. I am using this dynamically created document as the parameter for the MSApp.getHtmlPrintDocumentSource(). Unfortunately, no matter what I do to the canvas element that is inside this document, the canvas never shows a rendering in the actual printout, nor in the simple preview window found in the charms bar after clicking a selected printer.
My question is: does a canvas element require its container document to be displayed in the browser window? Can you manipulate a canvas element in a dynamically created document, and expect those manipulations to show when you display that document?
I have a form panel and i have added a tabpanel to it. Tab Panel has 2 tabs. When the form panel is loaded the first tab's grid loads fine but when i click on the second tab i do see the grids but data is not loaded by default. But it does refresh with data When i click on the grid header.
Below is the piece of code that i use to load the grids from controllers.
var store = this.getDeficiencyDeficiencyStoreStore();
store.on('load',function() {
var accountDeliverySettingsGrid = Ext.getCmp('accountDeliverySettingsGrid');
accountDeliverySettingsGrid.reconfigure(model.allQuartesListStore);
accountDeliverySettingsGrid.getView().refresh();
})
Any help/suggestions/advice is appreciated.
I finally figured this out. I had to use event: activate to explicitly invoke refresh method to get the grids loaded. Below is the piece of code.
listeners: { activate: function(tab)
{ //alert("Put Your Logic Here");
Ext.getCmp('accountDeliverySettingsGrid').getView().refresh();
Ext.getCmp('compositeRelationship').getView().refresh();
}
I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!