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.

Why this .js script stops working and is causing a browser freeze?

I've downloaded this Drupal 8 template and the site is at www.plotujeme.sk. It has an responsive navigation with this .js script:
function sidebar_menu() {
var windowsize = jQuerywindow.width(),
jQuerynav = jQuery("nav"),
slide = {
clear: function () {
jQuerybody.removeClass('toggled');
jQuery('.overlay').hide();
jQuery('.easy-sidebar-toggle').prependTo("header");
//jQuery('#search').prependTo("body");
jQuery('.navbar.easy-sidebar').removeClass('toggled');
jQuery('#navbar').removeAttr("style");
},
start: function () {
jQuery('.overlay').show();
jQuerybody.addClass('toggled');
jQueryhtml.addClass('easy-sidebar-active');
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').prependTo(".easy-sidebar");
//jQuery('#search').prependTo("#navbar");
jQuery('#navbar').height(jQuerywindow.height()).css({
"padding-top": "60px"
});
},
remove: function () {
jQuerynav.removeClass('easy-sidebar');
}
};
if (windowsize < 1003) {
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", function (e) {
e.preventDefault();
if (jQuerybody.hasClass('toggled')) {
slide.clear();
} else {
slide.start();
}
});
/*
jQueryhtml.on('swiperight', function () {
slide.start();
});
jQueryhtml.on('swipeleft', function () {
slide.clear();
}); */
} else {
slide.clear();
slide.remove();
}
}
and:
jQuery(document).ready(function () {
"use strict";
sidebar_menu();
jQuery(window).resize(function () {
sidebar_menu();
});
});
Problem is, that if I open responsive navigation by clicking on hamburger button, it works several times and then it stops working, the page and a browser freezes or is unresponsive for a long time. I also noticed that (even in template preview) sometimes it does not work at all and nothing happens after clicking hamburger icon. When I resize window multiple times sometimes it works sometimes not.
Do you see any error in the script that could possibly cause this problem?
Update: I also tried to use jQuery('.easy-sidebar-toggle').off("click"); just before jQuery('.easy-sidebar-toggle').on("click", function() {...}); but got the same results.

jQuery(window).resize(function () {
sidebar_menu();
});
As a result, whenever sidebar_menu function changes the window size, this function is called again and again, like a recursion, hence the freezing

I think the reason might be the following lines in the resize handler:
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", ...
They are run every time the window is resized by even one pixel, so a few dozen times a second if you drag the window border. Not sure about the first line, whether it adds the class over and over, but the second line certainly adds an event handler multiple times and fills up the stack. That's the reason your browser freezes. It just can't process the hundreds of registered events.
Just a guess, though.

How do I get javascript to run when pdfjs is loaded?

Trying to auto-search with pdfjs, (and having hard time with the docs..)
THIS WORKS:
<input type="button" value="click-me" onclick="searchPDF('cpu');" />
THIS DOESN'T (jquery running ok)
$(document).ready(function() {
searchPDF('cpu');
});
HOW DO SUSPEND EXECUTION UNTIL THE PDF IS PARSED? (OR WHY ISN'T IT WORKING)
MODIFIED viewer.html (thanks to PDF.js - Using search function on embedded PDF )
// search with PDF.js
function searchPDF(td_text) {
//PDFView.findBar.open();
$('#findInput').val(td_text);
$("#tableDiv").focus();
PDFView.findBar.findNextButton.click();
var event = document.createEvent('CustomEvent');
event.initCustomEvent('find', true, true, {
query: td_text,
caseSensitive: $("#findMatchCase").prop('checked'),
highlightAll: $("#findHighlightAll").prop('checked'),
findPrevious: undefined
});
return event;

Finally found a solution for us that doesn't digest javascript for breakfast:
(thanks to
Based on viewer.html and added jquery:
$(document).ready(function() {
document.addEventListener('textlayerrendered', function (e) {
if (e.detail.pageNumber === PDFView.page) {
// finished rendering, call a JS-function..
searchPDF('cpu');
}
}, true);
});
function searchPDF(str) {
alert('working');
..add code from
http://stackoverflow.com/questions/38976490/how-do-i-get-javascript-to-run-when-pdfjs-is-loaded
}

Reset idleTimeout counter between ajax post

I am using JQuery idleTimeout plugin from here :
http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm
I'm using it in an mvc 4 application.
Below is the code snippet where i set the session timer.
<script type="text/javascript">
var sessionTimer = 60;
$(document).ready(function ()
{
// setup the dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
height: 210,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes, Keep Working': function () {
$(this).dialog('close');
},
'No, Logoff': function () {
// fire whatever the configured onTimeout callback is.
// using .call(this) keeps the default behavior of "this" being the warning
// element (the dialog in this case) inside the callback.
$.idleTimeout.options.onTimeout.call(this);
}
}
});
var $countdown = $("#dialog-countdown");
#* start the idle timer plugin *#
$.idleTimeout('#dialog', '#dialog-button-yes', {
idleAfter: (sessionTimer - 30),
keepAliveURL: '#Url.Action("KeepAlive", "Home")',
pollingInterval: 5,
serverResponseEquals: 'OK',
AJAXTimeout: 250 * 60,
onTimeout: function () {
window.location = '#Url.Action("Logout", "Login")';
},
onIdle: function () {
$(this).dialog("open");
},
onCountdown: function (counter) {
$countdown.html(counter); #* update the counter *#
}
});
});
This code is placed in the outermost/shared view. All my pages are loaded using partial views using jquery $.ajax. The above code is loaded only once, the sessionTimer gets set to 60 seconds. So the timer does not resets when a new page gets loaded calling ajax post. Even though the user is active, the timer is ticking between the posts.
Is there a way for me to reset the counter every time an ajax post takes place.
I can reset this on every inner views $.ajax success condition. But there are too many places. I would like to know if there is a common code I can write on this master page of mine, that will let me know that an ajax call has been placed and to reset the counter.

Try using the .ajaxSuccess() event handler from jQuery. You can check the documentation on how to use it here: http://api.jquery.com/ajaxsuccess/ .

Execute javascript once Record view is fully loaded in SugarCrm 7.2

You can add JS events in SugarCRM 7.2 by creating a custom record.js.
The problem I'm having is that they fire before the page is loaded so elements I'm trying to affect don't exist.
I have tried the following:
$(document).ready(function() { alert(0); }) // fires before page is loaded
$(document).on('load', function() { alert(1); }) // doesn't fire at all
$(window).load(function() { alert(2); }) // doesn't fire at all
Any help in resolving this would be much appreciated.
record.js
({
extendsFrom: 'RecordView',
initialize: function (options) {
this._super('initialize', [options]);
SUGAR.util.ajaxCallInProgress = function () {
alert(0);
$('[name="duplicate_button"]').hide();
},
})

The way I got this to work was to use the following code in custom/modules//clients/base/views/record/record.js
({
extendsFrom: 'AccountsRecordView',
initialize: function (options) {
this._super('initialize', [options]);
this.on("render", this.SetHomeButtons, this); //calls SetHomeButtons
},
SetHomeButtons: function () {
some code ....
},
})
The function SetHomeButtons is called once the page is loaded
Another way of doing it is to overwrite the render function to call your custom code

That doesn't work because of AJAX.
Edit: in Sugar 7 you have the function SUGAR.util.ajaxCallInProgress() it retruns false when every Request is done (all Content Elements have been loaded)