We Keep Coding

slider not working inside tab inside tab content

Im building a web app using the NativeDroid . Everything seems to be working fine but inside a tab panel, when i add a slider it doesnt work.
But it works when i refresh. But when i click the link through the menu it doesnt work until i refresh it
I have uploaded the pages over here Demo from the menu when u click on profile you will see the slider is not working.. There are no jquery errors on my console too.
below is code that i have used for the slider and a chart
$(document).on("pagecreate", ".page_bubble", function () {
$('.demo').percentcircle({
animate: true,
diameter: 100,
guage: 2,
coverBg: '#f4f8f9',
bgColor: '#f4f8f9',
fillColor: '#5c93c8',
percentSize: '19px',
percentWeight: 'normal'
});
$("#owl-demo").owlCarousel({
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
navigationText: ['']
});
});
Can someone tell me what might be causing it?

el.on("click",".nd2Tabs-nav-item:not('.nd2Tabs-active')",function(e) {
e.preventDefault();
_self.switchTab($(this),$(this).data('tab'),$(".nd2Tabs-nav-item").index($(this)[0]));
});
This is the event in nativedroid2.js where you need to add your percentcircle and owlCarousel binding event as below as #rory-mccrossan said on page load content doesn't exist that's reason it's not working change you js like below
el.on("click",".nd2Tabs-nav-item:not('.nd2Tabs-active')",function(e) {
e.preventDefault();
_self.switchTab($(this),$(this).data('tab'),$(".nd2Tabs-nav-item").index($(this)[0]));
$('.demo').percentcircle({
animate: true,
diameter: 100,
guage: 2,
coverBg: '#f4f8f9',
bgColor: '#f4f8f9',
fillColor: '#5c93c8',
percentSize: '19px',
percentWeight: 'normal'
});
$("#owl-demo").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
navigationText: ['']
});
});
Or You can make a delegate event and trigger that event here for more info please find This Answer

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();
}
});
});

jQuery Dialog Popup showing, but not popping up

I have a Login Control I'd like to popup. The control is rendering, in a UI-dialog box even, but it's rendering on the page itself, not in a dialog popup. This is my first project using jQuery UI dialogs, but I haven't had a problem in other locations.
Because my access check is all code side I have attempted to simply the issue with
autoOpen: true,
Here is the jQuery:
function OpenLoginDialog() {
$("#divLoginOpen").dialog({
autoOpen: true;
appendTo: "#divSurveyMainPage",
modal: true,
dialogClass: "no-close",
width: 650,
height: 400,
title: "Login Please",
show: {
effect: "size",
duration: 800
},
hide: {
effect: "clip",
duration: 800
},
closeOnEscape: false
}).css('z-index', '1005');
return false;
}
My JSfiddle (below) has the HTML included, I've also moved the control HTML into the div where it belongs.
http://jsfiddle.net/p10bcxuq/
Please help! Thanks!
Actual Example: http://www.codelogically.com/Forms/Surveys/Surveys.aspx

I have updated your fiddle here - it had a lot of server side stuff which needed to be removed. You also need an opener.
$( "#opener" ).click(function() {
OpenLoginDialog();
});

jquery dialog too many buttons

here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?

jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery

Which wysiwyg editor works fine with fancybox?

I used to work with tinymce, but it causes lot of troubles when I want to put it to fancybox (fails with second start of fancybox window). Cleditor doesn't work too (displays "true" instead of editor). Is there any editor which will work without making any strange tricks?
Edit:
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'fbwysiwyg'); }
});
Edit2 (fixed callbacks)
$('.fancybox_with_wysiwyg').fancybox({
padding: 1,
scrolling: 'no',
onComplete : function() {
tinyMCE.execCommand('mceToggleEditor', false, 'fbwysiwyg');
},
onCleanup : function() {
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
}
});
Solution (thanks to Thariama)
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
onComplete: function () { tinymce.execCommand('mceAddControl', false, 'fbwysiwyg'); },
onClosed: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});

>I used to work with tinymce, but it causes lot of troubles when I want to put
>it to fancybox (fails with second start of fancybox window).
The simple solution for this case is to shut down tinymce correctly before you reinitialize it the second time.
To shut your editor instance down call
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
Update: You need to use
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});

CKEditor definately works as I've been working on putting it inside a Fancybox this afternoon :)
The problem you may encounter is when a modal window plugin removes and recreates the textarea within the modal. In this case you will need to re-bind the WYSIWYG when the textarea is shown.