Develop Reference

jquery disable button until first button is clicked

I have a project in JQuery that requires a user to click a button to download a PDF before proceeding to the next screen. I've tried writing a conditional statement that would perform this action:
downloadPDF.js
function getPdf () {
$('.button-rounded').click(function () {
(pdf.fromHTML($('.message-container').html(), 30, 30, {
'width': 400,
'elementHandlers': specialElementHandlers
}));
pdf.save('example.pdf');
});
}
// continue new plan
function getPlan () {
$('.button-rounded-negative').click(function () {
var url = "http://www.example.com";
window.open(url);
})
}
if ($(getPdf).onClick(false)) {
$(getPlan).attr('disabled', true)
}else{
if ($(getPdf).onClick(true)) {
$(getPlan).attr('disabled', false)
}
}
The goal is to disable the getPlan button until the getPDF button is clicked which starts an automatic download of the file.
Unfortunately, I haven't got it to work yet. If I use ($(getPdf).click(false)) & the displayed code, both button are still enabled. If I use .onClick both buttons are then disabled.
How do I handle this event? Up until this point, I've mostly written apps/conditional statements in React so I'm not quite understanding where I am going wrong in my conditional statement logic.

This isn't how Javascript works. You cannot put event handlers in if statements. You should also not nest your event handlers (as I assume getPdf() and getPlan() are called from onclick attributes).
Instead you need to enable the second button in the DOM within the click handler for the first button. Try this:
jQuery(function($) {
$('.button-rounded').click(function () {
pdf.fromHTML($('.message-container').html(), 30, 30, {
'width': 400,
'elementHandlers': specialElementHandlers
});
pdf.save('example.pdf');
});
$('.button-rounded-negative').click(function () {
var url = "http://www.example.com";
window.open(url);
$('button-rounded').prop('enabled', true); // enable the button here,
// assuming it starts in a disabled state
});
});
Note that you should remove the implied onclick attributes from your HTML and only use the above JS.

DropzoneJS Event Listener won't loaded

I have followed the usage examples from the DropzoneJS documentation and some other from stackoverflow. However, I still can't make it work. Here is my Dropzone Code.
<p class="h6 my-0 mb-10">PEMERIKSAAN</p>
<form action="{{url('radiologi/upload/gambar')}}" class="dropzone" id="my-dropzone" method="POST">
<input type="hidden" name="saltPict" value="{{$key}}">
<input type="hidden" name="target" value="{{$transaksi->slug}}">
{{csrf_field()}}
</form>
And here, the javascript code that I've added to catch the event which isn't worked.
<script type="text/javascript">
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
init: function() {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
$("#submit-all").removeAttr("disabled");
}
});
this.on("processing", function (file) {
console.log("check");
$("#submit-all").attr("disabled", "disabled");
});
}
};
// $("#my-dropzone").dropzone();
Dropzone.options.myDropzone.init();
</script>
I've try to place the javascript code either inside the document ready function or not. Still, it doesn't work. The only error output is this
My only purpose is to catch the event when DropzoneJS has done uploading all of my files.

Wow, It's worked like magic. I just try one more example from the Dropzone documentation. Surprisingly, the code are simpler.
Dropzone.autoDiscover = false;
$(function() {
// Now that the DOM is fully loaded, create the dropzone, and setup the
// event listeners
var myDropzone = new Dropzone("#my-dropzone");
myDropzone.on("complete", function(file) {
console.log("halo");
/* Maybe display some more file information on your page */
});
})
And don't place this on $(document).ready function so it will be called before the Dropzone itself are attached. Thanks for anyone who has tried to help me.

You should't call myDropzone.init by your self, dropzone will do it for you.

Dropzone triggers events when processing files, to which you can register easily, by calling .on(eventName, callbackFunction) on your instance.
Since listening to events can only be done on instances of Dropzone, the best place to setup your event listeners, is in the init function:
// The recommended way from within the init configuration:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
};

Trying to get click function to work on website

Here is my website at http://tylerfurby.com - I am trying to get this following click function to work:
$("#click").click(function() {
console.log('clicked on #click');
enterSite();
});
It seems do be doing nothing at the moment, here is the HTML:
<div class="interact">
<h2 id="click"><a class="enterSite">Click here to continue</a></h2>
</div>
<script type="text/javascript" src="script.js"></script>
</div>
And here is the function I am trying to have called within the click function:
var enterSite = function () {
$("#click").addClass('blur');
$("#click").animate({ left: "100%" }, 2000,'easeOutElastic', function() {
$(this).removeClass('blur')
});
}
Thanks for your time.

Your problem is a z-index problem. The #click is not receiving the event. Also, "click anywhere" should probably use $(window).on("click") instead.

Can't explicitly render Google ReCaptcha and have a callback function working

I am building a form on a website, and I am having and issue getting a function to run when the ReCaptcha is submitted. This function removes the disabled attribute on the submit button.
There is also a chance that multiple forms may be used on one page so I implemented the following solution to allow multiple captacha forms on one page:
https://stackoverflow.com/a/33535769/2506219
It seems I can either allow multiple ReCaptcha forms or have the submit button allowed but not both.
Here is the code:
HTML
<div class="g-recaptcha" data-callback="verifyCallback"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
JavaScript
<script>
var CaptchaCallback = function() {
$('.g-recaptcha')
.each(function(index, el) {
grecaptcha.render(el, { 'sitekey': 'XXXX' });
});
};
function verifyCallback() {;
$('#submitBtn').prop('disabled', false);
}
</script>
Thank-you.

Worked it out!
I needed to call the function from the callback, having it in the HTML doesn't work
var CaptchaCallback = function() {
$('.g-recaptcha')
.each(function(index, el) {
grecaptcha.render(el, { 'sitekey': 'XXXX', 'callback': verifyCallback });
});
};

Trigger event not working inside Ajax Magnific popup

I'm loading a page inside a magnific popup vie ajax:
$("#operator").magnificPopup({
delegate: 'a.edit',
mainClass: 'mfp-fade',
closeBtnInside: true,
removalDelay: 300,
closeOnContentClick: false,
type: 'ajax',
ajax: {
settings: {
url: 'index.php?p=staff/operators',
}
},
callbacks: {
elementParse: function() {
this.st.ajax.settings.data = {
operator_id: this.st.el.attr('data-id')
}
}
}
});
Inside the modal window I want to fire a trigger event on a input type="file":
$('input[name^=\'upload\']').on('change', function() {
$('#form-upload').remove();
$('#staff').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');
$('#form-upload input[name=\'file\']').trigger('click');
if ($('#form-upload input[name=\'file\']').val() != '') {
$.ajax({
/* upload file code */
});
ecc...
});
But it doesn't trigger. Also, all other trigger events aren't working inside the magnific popup.
So how can I get trigger events working inside the magnific popup?

As the HTML is loaded by ajax, by the tiem you try to attach the event, the element is not available, so nothing is attached.
You have to change you '.on()' call, so that it selects an element which contains the popup element, and use a filter so that only the change by the name=upload is handled. Something like this:
$('body').on('change','input[name^=\'upload\']', function() { ...
By the way, to avoid escaping characters in javascript, you can exchange single and double quotes. So you can simply use this filter:
'input[name^="upload"]'
or
"input[name^='upload']"
(Please, do test them. I think only the first one is valid).