In my grid.js
template: "<div>#if(data.c> 0){#<a class='undo' onClick='showDiv(#:id#)'>#:c# test</a>#} else{#N/A#}#</div>",
first I have bind data like above.
in my showDiv function
$.ajax({
type: 'GET',
url: ",
dataType: 'json',
success: function (data) {
$(document).ready(function () {
var dialog = $('#dialog'),
undo = $('.undo');
console.log("first");
undo.click(function () {
console.log("second");
dialog.data("kendoDialog").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
dialog.kendoDialog({
width: "450px",
title: "Site Name",
closable: false,
modal: false,
content: data,
actions: [
{ text: 'close'}
],
close: onClose
});
});
}
});
as I log first and second , for each click first console log one time but second each click increasing.
let say I clicked 2 time then console log for second is two time .
because of this I need to close 2 time .
seen 2:- if I click line 2 ,one time and line 3 one time , then third try with line 2 click , need to close 2 time and data populated from line 2 for first close and line 3 for second close .
what is the issue here . any idea ?
You are adding new handler to .undo click event each time showDiv function is executed. The easiest way to fix this is to change
undo.click(function () {
to one
undo.one('click', function () {
added handler will be executed only once after binding.
Related
Im working on a website which has a popup for a product information. Inside the popup is a link which opens a second popup for the shipping information.
What we want is to replace the popup content when the second link is clicked.
Is this possible?
This is what I have been trying so far (no luck)..
// first popup
$('.pop-ajax').magnificPopup({
type: 'ajax',
closeBtnInside: true, // put close button on inside
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = $(mfpResponse.data).find('.l-main');
},
ajaxContentAdded: function() {
// console.log('it works');
}
}
});
// Second popup (loads first popup when a link inside is clicked)
$('.pop-product').magnificPopup({
type: 'ajax',
closeBtnInside: true, // put close button on inside
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = $(mfpResponse.data).find('#product-ajax');
},
ajaxContentAdded: function() {
console.log('First popup');
// var mfp = $.magnificPopup.instance;
// mfpContentContainer = mfp.contentContainer;
// mfpContent = mfp.content;
$('.pop-ajax').click(function(){
$('.pop-product').magnificPopup('close');
$('.pop-ajax').magnificPopup({
type: 'ajax',
closeBtnInside: true, // put close button on inside
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = $(mfpResponse.data).find('.l-main');
},
ajaxContentAdded: function() {
// console.log('it works');
}
}
});
});
}
}
});
The second popup is a large content area on the site. One of the links inside this area has a link with the .pop-ajax class. However we can't seem to update or replace the popup content with the new content.
Can anyone help shed light on what I am doing wrong here?
Are you trying to create nested popups then according to this below link, it is not allowed.
Issues for Simultaneous Popups
But if you want to open just one popup,in which after the click on the inner link just replace the content of the pop up. Then refer to the following link.
Nested Popups
$('.first-popup-link, .second-popup-link').magnificPopup({ closeBtnInside:true});
In the above code you can find that for two different links same magnificPopup instance was created.
I have several "Purchase Now" buttons of different articles. When the button has the class "sold-out" it shouldn't do anything otherwise it should open a jQuery Magnific Popup. So far that works. My problem is, that when I click for the first time I visit the homepage the purchaseable "Purchase Now" button, it isn't doing anything. When I click for the second time on it, it opens the jQuery window. But why it doesn't work for the first time already ??
My HTML:
Purchase Now
My JQuery:
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true,
mainClass: 'mfp-fade'
});
$('.ajax-popup').click(function(e){
e.preventDefault();
if($(this).hasClass("sold-out")) {
return false;
}
var region = $(this).data('region');
var quantity = $(this).data('quantity');
if(typeof quantity == 'undefined') quantity = $(this).parent().find('select').val();
var packageid = $(this).data('packageid');
$(this).magnificPopup({
type: 'ajax',
ajax: {
settings: {
data : {
region : region,
quantity : quantity,
packageid : packageid,
}
}
},
closeOnContentClick: false,
closeOnBgClick: false
});
});
It might be because you are declaring the popup definition within the click function. Can you try declaring the function outside the click function?
It doesn't open on first click cause this is the time you BIND it to the element.
Hovewer, we see in documentation that we can instantly open MagnificPopup.
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
I am having some issues getting the jquery ui dialog redirecting always. When I click a delete link it asks if you are sure. If you click the delete button it should be redirected. THe problem is it doesnt always redirect the first time. It usually only works after you click the dialog window delete the second time. Does anyone know why this might happen? I have tried using the redirect in multiple places including after the query happens and before and after the delete query closes.
Page where dialog redirects(at bottom);
Delete
<script>
var id = "";
//run function after jquery dialong confirm
//step 1 - the action
$(".delete").click(function(e) {
e.preventDefault();
id = $(this).parent().attr('id');
//console.log(id); // check you get it first
$('#dialog').dialog('open');
});
//step 2 - the dialog modal
$("#dialog").dialog({
resizable: true,
height: 100,
modal: true,
autoOpen: false,
buttons: {
"Delete": function() {
//console.log(id + " made it to dialog"); // make sure our id makes it this far
deleteUser(id); // run delete photo function
window.location.href = "http://www.speechvive.com/adminSLP.php";
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
//step 3 - php function
function deleteUser(user_id) {
//console.log(user_id + " made it to function"); // make sure our id makes it this far
$.ajax({
type: "POST",
url: "/adminSLP.php#delete",
data: {user_id: user_id}
}).done(function(msg) {
console.log(msg);
//no message bc we did a fadeOut
//var msg would show any errors from our php file
});
}
;
</script>
I have an ASP.NET website which uses jQuery 1.8.2. I have a dialog box which lists UserReporting Settings from a DB whether a column is displayed or not. The User can change this by clicking the change columns buttons which open the dialog box - there are then a list of Available Columns and Current Columns and the User can drag and drop from one side to the other.
The code in the Update button off the dialog button is what is not working - the 'Hello' alert fires but if I set a breakpoint in my ashx Handler it never gets hit?
$("#UserReportSettings").dialog({
resizable: false,
autoOpen: false,
height: 600,
width: 525,
modal: true,
buttons: {
"Update Columns": function () {
var columns = [];
$('#currentColumnsList').each(function () {
// this is inner scope, in reference to the .phrase element
var column = '';
$(this).find('li').each(function () {
// cache jquery var
var current = $(this);
// check if our current li has children (sub elements)
// if it does, skip it
// ps, you can work with this by seeing if the first child
// is a UL with blank inside and odd your custom BLANK text
if (current.children().size() > 0) {
return true;
}
// add current text to our current phrase
column += (current.text() + ',');
});
// now that our current phrase is completely build we add it to our outer array
columns.push(column);
});
$.ajax({
type: 'POST',
url: '/MyWebsite/Handlers/UpdateUserReportingSettings.ashx',
data: { reportingSettings: columns.join() },
beforeSend: function (xhr, opts) {
},
success: function (data) {
alert("Hello");
window.top.location.href = "landing.aspx";
},
error: function (xhr, ajaxOptions, thrownError) {
alert('error' + xhr.responseText);
}
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
EDIT - Following Archers comment
If I paste localhost/Handlers/UpdateUserReportingSettings.ashx into the browser I can hit break point in my Handler.
So changed my URL in ajax call to :
url: '/MyWebsite/Handlers/UpdateUserReportingSettings.ashx',
and did a shift refresh to reload the js for page and hit the breakpoint.
I have the follwoing JQuery/AJAX code:
<script>
$('.warning-dialog').click(function () {
alert($(this).data("id"));
});
$(function () {
//twitter bootstrap script
$("button#delete").click(function () {
$.ajax({
type: "GET",
url: "deleteArticleType.php",
data: { 'typeID': $('.warning-dialog').data("id") },
success: function (msg) {
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function () {
alert("failure");
}
});
});
});
</script>
The first function gets the data-id of a button . The second function calls a PHP page and with the method GET should get the value from the first function.
I tried the code above but it didn't work.
My question is why and how can I fix it?
If these are two separate events, disconnected in time and you want to store the value from the first click and then use it in the second click, then you will have to store it somewhere. There are several options, the simplest being a variable.
$(function () {
var lastClickId;
$('.warning-dialog').click(function () {
lastClickId = $(this).data("id");
});
//twitter bootstrap script
// FIXME: you need to add logic here for what to do if lastClickId isn't set yet
// or create a default behavior in that case
$("button#delete").click(function () {
$.ajax({
type: "GET",
url: "deleteArticleType.php",
data: { 'typeID': lastClickId },
success: function (msg) {
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function () {
alert("failure");
}
});
});
});
Since it looks like you are requiring the first click to happen before the second click can have something to operate on, then you should probably either modify the UI to use different types of controls or you will need to add some error handling if the user doesn't click in the right order.
Actually it should have worked using $('.warning-dialog').data("id")
If your page contains only a single class warning-dialog, you approach will be worked. It seems you're referring this class to many elements.