Develop Reference

jqueryui slider not working inside bootstrap popover

i have number of bootstrap popover and some of them have jqueryui slider as content of the bootstrap popover and that slider is not working
Fiddle
https://jsfiddle.net/yasirhaleem/43qfkjtb/
$( document ).ready(function() {
$('.triggerOverlay').popover({
html : true,
content: function() {
var $this = $(this);
var cont = $this.data('toggle');
return $('#'+cont).html();
},
trigger: 'manual'
}).click(function() {
$('.slider').slider();
});
$(document).on('click', function (e) {
// always hide them all.
var popov = $(".popover");
if (!popov.is(e.target) && popov.has(e.target).length==0 ){
$('.triggerOverlay').popover('hide');
} // if e.target has a popover toggle it.
if ($(e.target).hasClass('triggerOverlay')) {
$(e.target).popover('toggle');
}
});
$( "#slider" ).slider();
});

found the solution to my question posting reply to my own question hope it will be helpful for others.
if someone has better solution please post or suggest in comments.
here is the fiddle https://jsfiddle.net/yasirhaleem/s1ytug1c/
this fiddle http://jsfiddle.net/mmfansler/5kuB8/9/ was not helpful for me i had different schenario, my html was already generated i was using different solution for popover and than we decided to use bootstrap popover and we run into this problem.
All i needed was a callback function below code extend the popover and adds callback function
Extending popover
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
tmp.call(this); if (this.options.callback) {
this.options.callback();
}
}
Popover Call
$('.triggerOverlay').popover({
html : true,
callback: function () {
$('.slider').slider();
},
content: function() {
var $this = $(this);
var cont = $this.data('toggle');
return $('#'+cont).html();
},
trigger: 'manual'
});
HTML
button<br><br><br><br><br>
<div id="user-profile-overlay" class="customoverlay">content goes here<div class="slider"></div>
</div>

jQuery onclick function: Undefined is not a function

Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;

Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.

You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/

If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);

Combining masonry, imagesLoaded with ajax functionality

I'm making a site where all internal links make the current page fade out and the new page fade in. This works great for me now. The problem is that I'm trying to combine it with the great masonry plugin. On the first pageload masonry does work, but I can't seem to figure out how to re-fire masonry on the newly loaded content via ajax. I should add that all the items from the current masonry get deleted, and then replaced by new ones.
The masonry code is like this:
$container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
transitionDuration: 0
});
});
And the ajax load code is like this:
var newHash = "",
$mainContent = $("#ajaxcontainer"),
$ajaxSpinner = $("#loader"),
$el;
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
$(document).on('click', '.internal', function() {
window.location.hash = $(this).attr("href");
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(newHash + " #container", function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
});
});
};
});
$(window).trigger('hashchange');
Does anyone have any input as to how to achieve this? Thank you very much.

I finally managed to get it to work!
I hope other people will find this helpful so I'm posting it here for future reference.
One of the problems I had, seems to be that I hid the container while the data was loading. I hid it with fadeOut and fadeIn which seems to cause problems with masonry. Insted of hiding it per se, I now animate the opacity to 0 and back to 1 once the data is loaded. The script is as follows:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$('#ajaxcontainer').fadeTo(500, 0, function() {
$ajaxSpinner.fadeIn();
$mainContent.empty();
$.get(newHash, function(data){
var $data = $(data).find("#container > *");
$container.prepend($data).imagesLoaded(function(){
$container.masonry( 'prepended', $data, true );
});
$ajaxSpinner.fadeOut( function() {
$('#ajaxcontainer').fadeTo(1000, 1);
});
});
});
};
});

setting variables in javascript

I need to create on snippet of javascript that, based on an A tags id, the window will navigate to the proper html file. I've got something together that when I look at it, it should work but for some reason it doesnt. Here's what I got.
<script>
$(document).bind('pageinit', function() {
$('a').each(function (index){
var elementId = $(this).attr("id");
elementId= elementId + '.html';
$(function(){
$(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
});
});
});
});
</script>
This part is so that I can load an external html in an ios web app with out exiting the web app window
$(function(){ $(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
Did I write the variable wrong some how? Any help would be appreciated

I'll take a wild guess:
$(function(){
$('a').on('click', function(e) {
e.preventDefault();
window.location.assign(this.id + '.html');
});
});

This is a simplified version of what you have there...
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
window.location.href = this.id + ".html";
});
});
</script>

jQuery not working in IE, works in other browsers

Currently coding a mates portfolio and not to my surprise the code isn't loading in IE!
I'm coding it using standard AJAX, here's the relevant jQuery:
//ajax shtuff
$(window).load(function() {
// Ajax Cache!
$.ajaxSetup ({
cache: false
});
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $('.current').attr('href');
// Initial Page Load
$('#con').prepend($loadW);
$('#main').fadeOut('slow', function() {
$(this).load($loadurl + ' .page', function() {
$(this).parent().find('#whiteLoader').fadeOut('slow', function() {
$(this).parent().find('#main').fadeIn('slow').css({background: 'red'});
$(this).remove();
});
});
});
$('nav ul li a').each(function() {
$(this).click(function(e) {
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $(this).attr('href');
// Prevent default hotlink
e.preventDefault();
// Add the current state
$('*').removeClass('current');
$(this).addClass('current');
// Load the Page
$('#main').fadeOut('slow', function() {
$('#con').prepend($loadW);
$('#main').load($loadurl + ' #main', function() {
$('#whiteLoader').fadeOut('slow', function() {
$('#main').fadeIn('slow');
$(this).remove();
});
});
});
});
});
});
Literally have no idea why this doesnt work lol, here's a link to the live page (I've put the background as red just to show you the area.)
Also the reason the initial page is using the 'this' method is because I was testing it both ways.
http://212.7.200.35/~tfbox/zee/

have you tried
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
instead of window.load?

Often IE has trouble styling / selecting any of the new HTML5 elements such as section and nav. Try using something like this or simply using a div