I created a jQuery plugin that loads data from AJAX and then display the data from popover. And when the user click the button again, the button will display the popover instead of reload the data from AJAX.
Here's the code (and this is the jsfiddle https://jsfiddle.net/petrabarus/spqdqqhL/)
$.fn.myButton = function () {
return this.each(function() {
$(this).on('click', function () {
var w = $(this);
w.off('click');
w.button('loading');
$.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
w.button('reset');
w.popover({content: content})
.popover('show');
});
});
});
}
$('.my-button').myButton();
The popover loads, but the weird thing is that after the popover being displayed for the first time, I have to click twice to hide the popover. But after that the popover works fine: one click to display and one more to hide so on.
What is that happening and how to fix it?
Try this :
$.fn.myButton = function () {
return this.each(function() {
$(this).on('click', function () {
var w = $(this);
w.off('click');
w.button('loading');
$.post('/echo/html/', {html: "Content", delay: 1}, function(content) {
w.button('reset');
w.popover({content: content});
//.popover('show');
w.trigger( "click" ); // this is not proper way but it is working
});
});
});
}
$('.my-button').myButton();
Related
How can I call jQuery Lightbox2 with AJAX.
I am using this function for my project.
$(document).ready(function() {
$(".paylasimi-goster").click(function() {
event.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "gonderiyi_goster.php?msg_id=" + id,
type: 'get',
beforeSend: function() {
$("#loader").fadeIn(100);
},
}).done(function(data) {
$("#loader").fadeOut(100);
$(".sidebar").fadeIn().find(".sidebar-content").animate({
"right": 0
}, 200).html(data);
imgResize(jQuery, 'smartresize');
});
});
$(".sidebar").click(function() {
$(".sidebar-content").animate({
"right": "-565px"
}, 200, function() {
$(".sidebar").fadeOut();
})
});
$(".sidebar-content").click(function(e) {
e.stopPropagation();
});
});
Also I have created this DEMO from jsfiddle. In this jsfiddle you can see there white div. Click any white div then see the right sidebar. So in the sidebar have one image. The problem is here : Lightbox2 does not work when you click on the image.
How can I call Lightbox2 with ajax.
The issue here is the e. stopPropagation() on the .sidebar-content click event which is preventing the lightbox from triggering. You can remove that altogether and inside the .sidebar click event instead call:
$(".sidebar").click(function(e){
var preventClick = $(".sidebar-content");
if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
//run the hide animate function + callback
$(".sidebar-content").animate({"right":"-200px"},200,function(){
$(".sidebar").fadeOut();
});
};
});
FIDDLE
I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});
Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?
I am using jquery UI dialog to show comments or other text depending upon what is clicked.
Here is my JSfiddle link Dialog Demo
I have used the code
$('.showComments').each(function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$('.showContractChanges').each(function () {
var panel = $(this).parent().siblings('.divContractChangeDetail');
$(this).click(function () {
panel.dialog('open');
});
});
$(".divCommentDetail, .divContractChangeDetail").dialog({
autoOpen: false,
modal: true,
open: function () {
$(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
},
show: {
effect: 'blind',
duration: 1000
},
hide: {
effect: 'explode',
duration: 1000
}
});
and the content is added dynamically on page load. I am trying to use $(document).on('each', '.showComments', function(e) {}); so that it can work with dynamically loaded content, but it doesn't work at all. here is my modified code.
$(document).on('each', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
$(this).click(function () {
panel.dialog('open');
});
});
but this doesn't work at all. Am i doing something wrong.
Thanks for the help.
If the .divContentDetail is added dynamically after page load, it's not the loop you need to change, but the event that you are registering:
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
.on bind event that work on dynamicly added elements. But 'each' is not an event, it's a method.
You should use on like that :
$(document).on('click', '.showComments', function () {
var panel = $(this).parent().siblings('.divCommentDetail');
panel.dialog('open');
});
I am trying to show a modal window using jquery.simplemodal.js JQuery plugin everytime I click on a row of a JQGrid.
After doing it, once the user click "Yes" on the modal window I show a document on an Iframe using the info retrieved from my row, if they click "No" then the Iframe shows a form to edit some info related to this document. The idea is to keep the Iframe content blank until the user clicks on one of the buttons. To accomplish this I am using JQGrid onSelectRow event as follows:
onSelectRow: function () {
var id = $("#tabResBusUbi").getGridParam('selrow');
var row = $('#tabResBusUbi').jqGrid('getRowData', id);
viewDocument = false;
myconfirm('Open the document view?', function () {
viewDocument = true;
});
if (viewDocument) {
$('#ifrShowPdf').ready(function () {
$('#divLoading').css('display', 'none');
});
$('#ifrShowPdf').attr('src', 'resource\\' + row.filepath);
$('#ifrShowPdf').css('display', 'block');
} else {
var rnd = Math.floor(Math.random() * 11);
$('#ifrShowPdf').attr('src', 'document.asp?r=' + rnd + '&o=d&a=a&p=' + id);
$('#ifrShowPdf').css('display', 'block');
}
return false;
}
function myconfirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%", ],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
$('.yes', dialog.data[0]).click(function () {
if ($.isFunction(callback)) {
callback.apply();
$('#confirm-overlay').css('z-index', 5000);
}
modal.close();
});
}
});
}
After I click on the row, the modal popups, but also the Iframe shows the edit document form even when I haven't clicked on any of the option buttons. If I click the "Yes" option after, the document is viewed but, this is not what I intend to do.
I would appreciate any suggestions to make this work.
I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.
function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}
I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}