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
Related
I'm using https://sweetalert2.github.io/
I tried using one single sweet dialog, but due to the others I couldn't make it work, and i've seen examples with fetch, but I'm using ajax, I saw a example with nested dialogs but once again, with fetch. In the code I put there are 2 comments where I would like to handle the loading dialog.
This is my script:
$(document).on("submit", "#formNuevoEstudiante", function (event) {
event.preventDefault();
$("#btnSubmit").prop("disabled", true);
let ap_paterno = $("#ap_paterno").val();
let ap_materno = $("#ap_materno").val();
let nombre = $("#nombre").val();
let sexo = $("#sexo option:selected").val();
let no_control = $("#no_control").val();
let carrera = $("#carrera option:selected").val();
let semestre = $("#semestre option:selected").val();
let sexo2 = sexo == "F" ? "Femenino" : "Masculino";
let mensaje = `x`;
let mensaje2 = `x`;
//Here is where I wan't to integrate the loading dialog
$.ajax({
url: "utils/ajax/nuevo_estudiante.php",
method: "POST",
data: {
ap_paterno: ap_paterno,
ap_materno: ap_materno,
nombre: nombre,
sexo: sexo,
no_control: no_control,
carrera: carrera,
semestre: semestre,
},
success: function (resp) {
if (resp == "existe") {
Swal.fire({
title: "Ya se encuentra registrado",
text: "x",
icon: "warning",
confirmButtonText: "Aceptar",
confirmButtonColor: "#0275D8",
}).then(function () {
window.location.href = "index2.php";
});
} else if (resp == "error") {
Swal.fire({
title: "Error",
text: "x",
icon: "error",
confirmButtonText: "Aceptar",
confirmButtonColor: "#0275D8",
});
} else if (resp == "ok") {
//Here is where I wan't to close the loading dialog
Swal.fire({
title: "Registro exitoso",
html: "<pre>" + mensaje + "</pre>" + mensaje2,
icon: "success",
confirmButtonText: "Aceptar",
confirmButtonColor: "#0275D8",
}).then(function () {
window.location.href = "index2.php";
});
}
},
});
});
The example given in the SWAL2 website isn't very suited for your use as it creates an input form itself while you already have an HTML form that gets input from the user. A basic easy-to-implement solution would be to use the showLoading and hideLoading methods with what you already have. From the documentation :
Swal.showLoading(): Shows loader (spinner), this is useful with AJAX
requests.
By default the loader be shown instead of the "Confirm" button, but if
you want another button to be replaced with a loader, just pass it
like this: Swal.showLoading(Swal.getDenyButton())
Swal.hideLoading(): Hides loader and shows back the button which was
hidden by .showLoading()
Just after the event.preventDefault(); line, you can add a loading dialog that will just display a loading message:
Swal.fire({
title: "Loading...",
html: "Please wait a moment"
})
Swal.showLoading()
Then, at the beginning of the success callback of your ajax request, just before entering the if condition, simply add a Swal.hideLoading() to stop displaying the loading animation.
Why does hideLoading and showLoading work on an already displayed popup?
The reason is because SweetAlert2 kind of (it seems to work like that but I didn't confirm it) works using static methods which takes their execution to a "global" scope, meaning that when you call one of SweetAlert2 methods, it runs and stores data in the same place: the Swal class which is shared everywhere. (If you want to know more about static class, there are several articles you can read on the internet)
Disclaimer! Now, I didn't take a look at how Swal stores data, or how it handles everything, but for the sake of argument, let's say it stores inside static properties like currentTitle, isLoading (which dictates whether or not a loading animation should be added to the popup), and more. That is effectively one reason why there's only one popup displayed at a given time (although by definition, there should be only one displayed).
So, when you call Swal.fire(), it essentially updates the Swal class properties (setting the currentTitle to Hello for example). When you call it again, it updates it again and effectively overwrites the values set by the previous call of fire(), replacing them with new ones.
But, unlike fire() which completely overwrites every property for the currently displayed popup, hideLoading and showLoading methods only overwrite ONE property: isLoading (reminder: this is how we've postulated SweetAlert works, the implementation could be made otherwise but for simplicity's sake, we assume it's like that) and let the others as is. That is why, when you use fire(), a new popup is displayed, but when using hideLoading and showLoading, the current popup displayed is changed.
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.
I have a CKEDITOR plugin that I'm having trouble disabling when there is no selected copy in the editor. Right now, the user can click the button without any highlighted text in the editor. I would like to modify it so that the plugin button is only active when there is copy highlighted in the editor. I've followed the suggestion here, but it isn't working.
Main Plugin Code:
CKEDITOR.plugins.add('cta', {
icons: 'cta',
init: function (editor) {
// Funciton depending on editor selection (taken from the scope) will set the state of our command.
function RefreshState() {
console.log('RefreshState');
var editable = editor.editable(),
// Command that we want to control.
command = editor.getCommand('source'),
range,
commandState;
if (!editable) {
// It might be a case that editable is not yet ready.
console.log("editable not ready yet");
return;
}
// We assume only one range.
range = editable.getDocument().getSelection().getRanges()[0];
console.log(`range: `);
console.log(range);
// The state we're about to set for the command.
commandState = (range && !range.collapsed) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;
console.log('commandState');
console.log(commandState);
command.setState(commandState);
}
// We'll use throttled function calls, because this event can be fired very, very frequently.
var throttledFunction = CKEDITOR.tools.eventsBuffer(250, RefreshState);
// Now this is the event that detects all the selection changes.
editor.on('selectionCheck', throttledFunction.input);
// You'll most likely also want to execute this function as soon as editor is ready.
editor.on('instanceReady', function (evt) {
// Also do state refresh on instanceReady.
RefreshState();
});
editor.addCommand('ctabtn', new CKEDITOR.dialogCommand('ctaDialog'));
editor.ui.addButton('cta', {
label: 'Insert Call to Action button',
command: 'ctabtn',
toolbar: 'insert'
});
CKEDITOR.dialog.add('ctaDialog', this.path + 'dialogs/cta.js');
}
});
My dialog code is here:
CKEDITOR.dialog.add('ctaDialog', function (editor) {
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Call to Action',
minWidth: 400,
minHeight: 200,
// Dialog window content definition.
contents: [{
// Definition of the Basic Settings dialog tab (page).
id: 'tab-basic',
label: 'Basic Settings',
// The tab content.
elements: [{
// Text input field for the Call to Action text.
type: 'text',
id: 'cta',
label: 'Call to Action',
// Validation checking whether the field is not empty.
validate: CKEDITOR.dialog.validate.notEmpty("Call to Action field cannot be empty.")
},
{
// Text input field for the link text.
type: 'text',
id: 'url',
label: 'URL',
// Validation checking whether the field is not empty.
validate: CKEDITOR.dialog.validate.notEmpty("URL field cannot be empty.")
}
]
}],
// method invoked when the dialog button is clicked
onShow: function () {
var element = editor.getSelection();
var link = CKEDITOR.plugins.link;
var _this = this.getParentEditor();
var CTAhref = link.getSelectedLink(_this);
this.setValueOf('tab-basic', 'cta', element.getSelectedText().toString());
if (CTAhref != '' && CTAhref !== null) {
this.setValueOf('tab-basic', 'url', CTAhref.$.href);
}
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function () {
var dialog = this;
var CTA = editor.document.createElement('a');
CTA.setAttribute('href', dialog.getValueOf('tab-basic', 'url'));
CTA.setAttribute('class', 'btn btn-special--lg');
CTA.setText(dialog.getValueOf('tab-basic', 'cta'));
editor.insertElement(CTA);
}
};
});
Any ideas on why the plugin icon button on the toolbar doesn't become inactive when there is no copy highlighted in the editor? I can see in the console that CKEDITOR.dom.range.collapsed is toggling between TRUE/FALSE depending upon whether text is highlighted or not. It's just not disabling the button.
As stated, the suggested way of handling this was not working for me. What was working was using range.collapsed in returning a true value if a selection was made in the editor. With that, I turned to using Jquery to handle the rest.
// Hacky. But it gets the job done.
// a.cke_button.cke_button__cta.cke_button_off is the selector for my toolbar button.
// The onclick function listed was pulled from looking at the CKeditor functions
// to initiate my plugins modal.
// The setting of the "onclick" prop to null is needed to override the modal onclick
// binding when there is no selection.
range = editable.getDocument().getSelection().getRanges()[0];
if (range.collapsed === false) {
$('a.cke_button.cke_button__cta.cke_button_off').attr("onclick", 'CKEDITOR.tools.callFunction(83,this);return false;');
$('a.cke_button__cta').toggleClass('cta_button_disabled');
} else {
$('a.cke_button.cke_button__cta.cke_button_off').prop("onclick", null);
}
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 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>