Develop Reference

Javascript button event not working after page 1

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.

Loading exteral file with load(), modifying and then displaying with fancybox plugin

I'm trying to load an external file after the click of a button, modifying some html of the external file and then displaying it through the fancybox plugin.I have been trying for days now to do this and no success.
A button
<a id="preview" class="btn btn-lg btn-success">Preview</a>
Then some code to load the external html file into an element whose display is off (I know this is wrong, I don't know how else to do it). Then, I try to open this element with fancybox.
$('#preview').click(function() {
$('#loader').load("demo/external.html", function(page) {
$.fancybox.open({ content: $('loader'), type: iframe});
})
});
As you can tell, I'm an amateur at this. Any help would be really appreciated.

With more research I found that everything can be done through the Fancybox API. I used the beforeShow to modify what I wanted on the external page. $('.fancybox-iframe') was used to access the contents.
$.fancybox({
'href': 'demo/external.html',
'type': 'iframe',
'autoSize': true,
beforeShow: function () {
$('.fancybox-iframe').contents().find('#name').text(name);
}
});

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});

try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....

You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>

You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

Appended anchor link is not active on Safari / iPhone

I've got a function, used by a lot of different parts of my site which calls a confirmation box. When it's called it formats the box with the various elements and appends it to the body, like so...
$('body').append("<div id=\"confirmation\">confirmed cancel</div>");
Now, this works perfectly for everything accept the iPhone Safari browser, which doesn't seem to activate, or load the anchor into the DOM properly... it is not clickable. This is the problem, tho the box appears correctly, touching the anchor does nothing. Console.log proves this.
Any ideas?

Have you tried doing
$div = $('<div>', { id : "confirmation"});
$aConfirmed = $('<a>', { href : "#", class : "confirmed", text: "confirmed"});
$aCancel = $('<a>', { href : "#", class : "cancel", text: "Cancel"});
$div.append($aConfirmed).append($aCancel);
$('body').append($div);
And then use some event handlers like (this assumes jQuery > 1.7
$(document).on("click", "a.confirmed", function(){
confirmed();
});
$(document).on("click", "a.cancel", function(){
closeConfirm();
});

Try using something other than an anchor tag for testing and see if that works.

This very particular situation was solved by moving the anchor so it did not overlay an embedded video. When the anchor was placed over the embedded video on the iPhone - touch events above it were disregarded in favour of the touch to take to quicktime and play video event.

upgrade window.open popup to jQuery UI Dialog

I've created a form with a button. If users click the button, browser will generate a popup for user to upload and crop a photo.
onclick="window.open('upload.php');"
if uploaded
window.opener.document.getElementById
the popup will return the cropped pic to the opener window (form)
document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";
Finally, the popup will generate a "Use this pic" button.
Now, I want to upgrade this popup to jQuery Dialog to make it polish. How can I do that?
http://jqueryui.com/demos/dialog/#default

Try Using a Modal Form in which you can call the dialog for user to upload & crop the image and on clicking Use this pic on the dialog; return to your page and continue your application.
Better performances, you can use Jquery Modal Form with lighbox for a better UI.
Cheers!!!

What is the problem?
Take upload.php's code (the stuff within the BODY element) and put it inside the caller page, within a DIV.
Then apply a dialog with jQuery on that DIV. Then just activate that dialog when needed.
Now, as for the code itself - I'm sure you need to re-wire a few things but the idea is very simple and I really don't understand why this question has a bounty of +100 reputation, really. Not that I mind having it haha!

I hope I got what exactly you're trying to achieve.
Here is jsfiddle example: http://jsfiddle.net/nNw33/3/
Here is the code:
$(document).ready(function () {
$('#initUpload').click(function (event) {
$('#Dialog').dialog();
setTimeout(function () {
// upload completes
$('#errMsg')
.html("<input type=\'button\' value=\'Use this pic\'>")
.click(function () {
$('#Dialog').dialog('close');
});
}, 1500);
});
});
HTML:
<input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
Upload content here
<div id="errMsg"></div>
</div>

You should read this cute plugin, which allows you to upload files asynchroniously.
http://malsup.com/jquery/form/#options-object
Add following in body whereever on page it fits:
<button onclick="openPopup()">Show dialog</button>
<div id="modalFormDia"><!-- blank --></div>
Add following to head to load plugin. Nice example usage here
<script src="http://malsup.github.com/jquery.form.js"></script>
It works with a hidden iframe, submitting the results to your backend without opening any windows.
This way everything can be done in one 'window' or, lets make that the dialog popup youre probably looking for
Grab sample code from a fiddle here. Following code can be put anywhere as well, globally accessible
function onComplete(xhr) {
// Lets expect that the server sends back
// the URL pointing to uploaded image, an error if failed
if (xhr.responseText.match("error")) {
// failed
$("#feedback").html("Upload failed: " + xhr.responseText);
} else {
// uploaded
$("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
// image accepted, close dialog and set the image on main page
diaDom.dialog('close')
$('#targetOnPage') // ....
});
$('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');
}
}
function openPopup() {
// get the dialog DOM node (if first time, create)
var diaDom = $('#modalFormDia')
diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
buttons: {
"Cancel": function() {
$(diaDom).dialog('close');
}
},
closeOnEscape: false,
autoOpen: true,
modal: true,
title: 'Image Uploader'
});
// setup form with hooks
$('#myForm').ajaxForm({
beforeSend: function() {
$('#feedback').html('Upload starting')
},
complete: onComplete
});
}​