I am currently working on a bit of JS, and have run into an interesting issue. I'm not sure what I'm doing wrong here, as I don't see any reason it shouldn't work, but I'm not getting any results. I am running the following code:
$('#am_schedDetailModal').dialog('option', 'buttons', [{
text: 'Delete',
click: function () {
$('#am_confirmationDialog').html('Are you certain you wish to delete this entry?');
$('#am_confirmationDialog').dialog('option', 'buttons', [{
text: 'Yes',
click: function () {
deleteScheduledEntryAt(cellID);
$('#am_schedDetailModal').html('');
$('#am_schedDetailModal').dialog('close');
$('div', this).html('');
$(this).dialog('close');
}
}, {
text: 'No',
click: function () {
$('div', this).html('');
$(this).dialog('close');
}
}]);
$('#am_confirmationDialog').dialog('open');
}
}]);
The problem is that when I run this code, the second dialog doesn't appear. The first dialog appears, and the other buttons work fine, but the 'Delete' button has no effect at all. There is no error (according to FireBug), but nothing shows up. Any suggestions?
EDIT: Thanks to Kevin van Hoorn, it appears that this was a pretty simple mistake- I created the second dialog in the code, but forgot to actually initialize it.
You have to append that div to something before trying to use it.
Like
document.append('<div id="am_confirmationDialog" />');
Related
Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}
When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});
is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.
I am using the jQuery-confirm library on a project and when used in conjunction with a jQuery animate the page scrolls to the top and then right back down to the bottom. Here's the code:
$.alert({
boxWidth: '50%',
useBootstrap: false,
title: '<p>Questionnaire Errors Found</p>',
titleClass: 'alert_title',
content: "<p class='alert_body'>Errors were found in the submitted questionaire and are highlighted in red\n\nPlease review and correct the missing information</p>",
buttons: {
okay: {
text: 'Okay',
btnClass: 'alert_button',
action: function() {
$('html').animate({
scrollTop: $('#voters_guide_form').offset().top
}, 500);
}
}
}
});
If I don't use the confirm library the behavior works as expected. Also not using the animate doesn't case the page to scroll at all. I have tried using html,body in the animate with no change and I have moved the animate code in and outside of the alert code but it still does the same thing.
Been through their docs and the internet and I can't seem to find anything like this.
You should use $('body') instead of $('html')
Answer source
So you need to change your code to:
$.alert({
boxWidth: '50%',
useBootstrap: false,
title: '<p>Questionnaire Errors Found</p>',
titleClass: 'alert_title',
content: "<p class='alert_body'>Errors were found in the submitted questionaire and are highlighted in red\n\nPlease review and correct the missing information</p>",
buttons: {
okay: {
text: 'Okay',
btnClass: 'alert_button',
action: function() {
//Changed to body and added stop
$('body').stop().animate({
scrollTop: $('#voters_guide_form').offset().top
}, 500);
}
}
}
});
Also, its a good practice to stop the animations running in body before you run a new animation. That's why I added the stop() method.
Do note: If you import this code through an iframe it won't work, because with an iframe, you page will now have 2 (or more) bodies and $('body') should return an array instead of an object.
I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!
After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)
I have the following code that I call on page load:
$('#postcodes-link').fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
Now this works fine to open the fancybox (fiddle example), but when I click on the row, it doesn't close the fancybox and just throws the following error:
Uncaught TypeError: Cannot read property 'close' of undefined
yet if I make the above into a jQuery function:
(function ($) {
$.fn.setUp = function () {
return $(this).each(function () {
$(this).fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
});
};
})(jQuery);
and call the following in the same place as I called the top code
$('#postcodes-link').setUp();
The fancybox will now close (fiddle example). My question is why does the first one not work whereas the second one does, and how can I make the first one work? I figure it is something to do with the scope of fancybox but then I would have expected the second one not to work as it is wrapped inside a further function
Please note I have tried various version of trying to close the fancybox:
$.fn.fancybox.close()
jQuery.fancybox.close()
parent.$.fn.fancybox.close()
$('.fancybox-close').trigger('click') //tried this one as a dirty hack but didn't work either
Ok, so I found out what the problem was when trying to get the fiddle to replicate the error:
On the table page, I was using the jQuery data-table plugin so I included all the scripts need to load that. As I was ajax loading the page into the modal, it meant jQuery was being loaded for a second time on the current page. This caused the error I was seeing.
Removing the jquery script made the fancybox work as I wanted or another workaround (if you want the target page to still work if it is not opened in a modal - eg if you have other links to that page) then you will have to use a fancybox iframe instead of the fancybox ajax modal
I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?
After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.