Semantic-ui popup Dynamic content - javascript

Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.

The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});

Related

Qtip hide on destroy, show on hover, Dom cleaning like bootstrap tooltip

I am using jquery qtip2
I want its behaviour just like bootstrap tooltips where
on hover tooltip shows up , also in DOM
on mouseout tooltip hides, removed from DOM as well
Objective:
My objective is I am using lots of qtips, and they are taking unnecessary space in DOM and I want qtip2 to create dom element only when it is active.
JSFIDDLE: https://jsfiddle.net/bababalcksheep/5unavg0q/4/
Can't seem to make it work.Should it not be feature by default. Am I missing something from Docs ?
HTML:
Hover here!
JS:
$(document).ready(function() {
$('.qtiptxt').qtip({
prerender: false,
overwrite: true,
hide: {
event: 'mouseout'
},
events: {
hide: function(event, api) {
var target = api.elements.target;
var targetOptions = api.options;
// Destroy it immediately
api.destroy(true);
//re initialize using existing options
$(target).qtip(targetOptions);
}
}
});
});
It seems I did miss the docs. Here is the solution
https://jsfiddle.net/bababalcksheep/5unavg0q/7/
$(document).ready(function() {
//
// from https://github.com/qTip2/qTip2/wiki/Events-Guide#delegation-on--live--delegate
//
$('.qtiptxt').on('mouseover', function(event) {
$(this).qtip({
prerender: false,
overwrite: true,
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout'
},
events: {
hidden: function(event, api) {
// Destroy it immediately
api.destroy(true);
}
}
}, event);
});
//
//
});

AlloyUI modal reuse modal

I'm working on a AlloyUI modal window that is present in many pages of my application. The modal structure is actually the same, the only thing that changes is the bodyContent text for each page. I'm trying to reuse the AlloyUI modal script, only updating the bodyContent parameter rather than create 20 modal scripts for each page, but it's script nightmare for me as I have not found any code I can look at. I created a jsfiddle as an example and down below is the script I've been working. I'd appreciate your help.
http://jsfiddle.net/x9t3q0bs/
YUI().use('aui-modal', function(Y) {
var helpModConfIdent = Y.one('#showHelpPageConfirmIdentification'),
helpModQuestions = Y.one('#showHelpPageQuestions'),
helpPageConfirmIdentRetCust = Y.one('#showHelpPageConfirmIdentRetCust')
var modal = new Y.Modal({
bodyContent: "<p>Here will show help modal1.</p>",
centered: true,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 800,
toolbars: {
}
});
modal.addToolbar([{
label: 'Close',
cssClass: 'btn-primary-content',
on: {
click: function() {
modal.hide();
}
}
}]);
modal2 = new Y.Modal(
{
bodyContent: "<p>Here will show help modal2.</p>",
centered: true,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 800,
toolbars: {
}
}
);
if (helpModConfIdent) {
helpModConfIdent.on('click', function (e) {
modal.show();
});
} else if (helpModQuestions) {
helpModQuestions.on('click', function (e) {
modal2.show();
});
}
});
Thanks
The bodyContent is one of the attributes that is available to be set if you have access to the modal instance. Otherwise, you can always manipulate the html within the template that has been rendered.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: "<p>Default implementation</p>",
centered: false,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 250
});
Y.one('#modalInstance').on('click', function(){
modal.set('bodyContent', "<p>Something loaded using the orginal modal instance</p>")
modal.show()
})
Y.one('#nodeInstance').on('click', function (e) {
Y.one('#modal .modal-content .modal-body').setHTML('<p>Set using the node instance</p>')
modal.show()
})
});
<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div id='modalInstance'>Modal Instance</div>
<br/>
<div id='nodeInstance'>Node Instance</div>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>

Pace.JS Qtip how to ignore the Pace Animation

How we can ignore URLs with Pace.js progress animation to one of my ajax calls,
I followed the following as mentioned in the documentation, I am trying to ignore a URL 'getTip' but it still triggers the pace animation.
ajax: {
trackMethods: ['GET', 'POST'],
trackWebSockets: false,
ignoreURLs: ['arterySignalR', 'browserLink', 'getTip']
}
Or how can I use the Pace.ignore in the following call:
$("a[name^='qtipname']").each(function() {
var $this = $(this);
var id = $this.attr('rel');
$this.qtip({
content:{
text: 'Loading...',
ajax: {
url: urlTip,
type: 'GET',
loading: false,
data: {"objectID": id}
}
},
show: 'mouseover', // Show it on mouseover
hide: {
delay: 200,
fixed: true // We'll let the user interact with it
},
style: {
classes: 'ui-tooltip-light ui-tooltip-shadow',
width: 290
}
});
});
I realize this is an older post, however I recently had this requirement and this post was one of the first to come up...thought I would put my resolution here in case anyone else needs it.
Set pace options for the ignoreURLs before you load the pace.min.js library
<script>
paceOptions = {
ajax: {ignoreURLs: ['some-substring', /some-regexp/]}
}
</script>
<script src="../dist/js/pace.min.js"></script>
Example of one of my ignoreURLs:
<script>
paceOptions = {
ajax: {ignoreURLs: ['staffNameAutoComplete']}
}
</script>
<script src="../dist/js/pace.min.js"></script>
Where 'staffNameAutoComplete' is part of the ajax URL I am calling.
http://www.website.com/json.php?request=staffNameAutoComplete

jQuery does not work when reload the page content via ajax

I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});

how to load mask while the grid is double clicked to wait for the detail window

forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});
Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');

Categories