Can't Focus on dojo Button OK - javascript

I'm trying to run a dojo (searchNotFound) if another dojo of searching (searchDlg) not finding result
So, the dojo (searchNotFound) is up , but not focusing on OK (cause I've an event onkeypress on this Button OK)
So, this is my code :
Function FindString() :
function findString(str) {
//Some Code
//if serach not founding , running dojo searchNotFound
if (!strFound) {
dojo.widget.byId("searchDlg").hide();
dojo.widget.byId("searchNotFound").show();
dojo.byId("searchnotfound_close").focus(); --> ****** not working ******
}
}
OnKeyPress event on OK Button (searchnotfound_close) of dojo (searchNotFound) :
--> Works Fine
<button class="btn dlg" id="searchnotfound_close" onkeypress="javascript:closeSearchNotFound(event)"><span key="ok">Ok</span></button>
Function closeSearchNotFound(event)
--> Works Fine
//#96985
function closeSearchNotFound(event) {
if(event.which == 13){
dojo.widget.byId('searchNotFound').hide();
dojo.widget.byId('searchDlg').show();
}
}
//
See This test video :
https://www.youtube.com/watch?v=cM4rCtP7REA&feature=youtu.be

I'm assuming 'searchNotFound' is a dijit/Dialog. show() is asynchronous because it shows the dialog with an animation. Because of that, show() returns a dojo/promise/Promise. Once the promise completes, the dialog is fully rendered and your subsequent search should work.
Use the promise and register your own callback:
registry.byId("searchNotFound").show().then(
function() {
dojo.byId("searchnotfound_close").focus();
});

Related

button click event fires multiple times inside of a Bootstrap 3 Modal

I have a bug (or feature) whereby any button that is inside a Bootstrap 3 modal will fire the click event several times. Besides going "old-school" and calling a script from an HTML button directly (which always works), is there a workaround for this?
<div class="modal-footer">
<span id="spanSendReport">
<button type="button" id="btnSendReport" class="btn btn-success" data-dismiss="modal">Send Report</button></span>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
And the jquery
$("#btnSendReport").click(function (e) {
... my code
});
Using Bootstrap v3.4.1 and jQuery v3.3.1
Never ran into this before (except with things posting back, but there are no postbacks of any kind happening - checked in the browser and in debugger).
There is only 1 button in the DOM with the Id (first thing I checked), but it fires the click event 4 times, every time!
Any ideas?
NOTE: I forgot to mention, the modal is opened from another modal. Maybe that has something to do with it.
The complete code inside the click event function (just in case it has something to do with it):
$("#btnSendReport").click(function (e) {
var parElem = $(this).parent().parent().parent();
var listID = parElem.find("#hidLID").val();
var problemTypes = $.map(parElem.find('option:selected'), function (e) { return e.value; }).join(',');
var problemTypeOther = parElem.find("#txtProblemTypeOther").val();
var obj = {};
obj.lid = listID;
obj.ProblemTypes = problemTypes;
obj.ProblemTypeOther = problemTypeOther;
try {
$.ajax({
type: "POST",
url: "../../api/reportdiscrepancy/",
data: obj,
dataType: "json",
success: function (data) {
var result = data;
},
error: function (err) {
console.log(err);
}
});
} catch (err) {
console.log(err);
}
});
Found the problem and the answer to many issues I've been running into before and the culprit is function pageLoad() which is what older ASP.Net webforms uses for client side actions.
I removed the '#btnSendReport' click to OUTSIDE of the pageLoad() function and it's only firing once now.
It looks like any MS-AJAX accumulates ALL event bindings (not actually firing them) within an UpdatePanel, then a final call to a click event (or whatever) will fire x number of times.
I was clued in as I made 3 changes to get to the modal and the last thing I did was click on the button (so it fired 4 times).
I believe it may have to do with the default setting of the UpdatePanel with ChildrenAsTriggers=True (unfortunately, I have to leave that on as other functionality breaks if set to false).

Call a function with the submit button in HTML

I need a Google AdWords conversion script to work whenever someone submits a form for a free quote. Google has provided the script which I'm put into a Snippet with WordPress and activated it for the site.
I now need to call that function when the submit button is pressed, but I can't remember the correct syntax and Google searches so far have led me down long paths of .php file creations that isn't answering what feels like a simple solution would solve.
Currently I have added the function in line with the existing code for the submit, but I'm not convinced this is correct. The below code is on the contact form that the page uses.
[submit id:submit class:btn class:btn-primary gtag_report_conversion() "Send"]
Below is the code I put into the Snippet minus the full "send to" AW address:
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': 'AW-.....',
'event_callback': callback
});
return false;
}
</script>
Depending on how that shortcode was implemented, odds are you can't just add inline event handlers to it like that - and without seeing the source code it's hard to determine (but I'd wager that it's most likely the case).
Just add this in the old fashioned way with the onclick or onsubmit event handler. I'd recommend the onsubmit since forms can be submitted without clicking on the button.
Since you've already loaded in your Script, you can just add to it:
<script>
function gtag_report_conversion(url){
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': 'AW-.....',
'event_callback': callback
});
return false;
}
document.getElementById("your-form-id").onsubmit = function(){
gtag_report_conversion();
};
</script>
Just replace your-form-id with the id of your <form> element (not your submit button).

Captcha/JQuery - Click simulation only works once

Hello fellow stack overflowers. I'm using JQuery to simulate a click on an invisible button that's linked with reCaptcha. Multiple buttons need to be attached to reCaptcha and you can only have one reCaptcha in each page. So, I created a callback function that detects which button is pressed. Here is how I did that:
HTML:
<div class="invisible">
<button class="g-recaptcha"
data-sitekey="..."
data-callback="captcha_callback"
data-badge="inline"
data-type="image"
id="btn_captcha"></button>
</div>
Click event + click simulation:
$("#review_send").on("click", function() {
alert("HI");
$("#btn_captcha").data("button-pressed", "review");
$("#btn_captcha").click();
$("#btn_captcha").blur();
});
reCaptcha callback:
var captcha_callback = function(response) {
if($("#btn_captcha").data("button-pressed") === "mail") {
alert($("#btn_captcha").data("button-pressed"));
send_contact_mail(response);
} else if($("#btn_captcha").data("button-pressed") === "review") {
alert($("#btn_captcha").data("button-pressed"));
send_review(response);
}
};
What happens is; when I click #review_send for the first time everything works: It first alerts "HI" and then "review".. But when I press #review_send a second time I only get the alert with "HI".
I have discovered that the click works again after waiting a while.
Is this something JQuery/Javascript related, has it something to do with reCaptcha or does reCaptcha have a timeout?
Thanks in advance!
Soo, I made this workaround because I thought that you can't have multiple recaptcha on the same page. However, I figured out that there is a way to have multiple of them.
You can render reCaptcha's and reset them (both with javascript):
var widget1 = grecaptcha.render("divID", {
siteKey: "...",
type: 'image',
callback: function(response) {
send_review(response);
}
});
Reset:
grecaptcha.reset(widget1);
I only have to check which button I pressed to render in the correct div and/or reset the correct reCaptcha.

Attach handle on every onhide method of bootstrap3-dialog

I'm using bootstrap3-dialog library from https://nakupanda.github.io/bootstrap3-dialog/
The problem is, everytime the dialog shows (alert, confirm or custom dialog), the body's scrollbar is gone and never come back when dialog closed. I could add this line on every dialog's onhide property, but that would be time consuming:
$('body').css('overflow','scroll')
Is there any other way to trigger that function every time the modal closes?
I was going through the code of bootstrap modal and they have this:
resetScrollbar: function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
}
},
Which is called on:
hideModal: function() {
this.$element.hide();
this.backdrop($.proxy(function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetAdjustments();
this.resetScrollbar();
this.$element.trigger('hidden.bs.modal');
}, this));
}
I can't seem to figure out what would cause this code to not bring the scrollbar back. It seems to be working fine on their website.
If you are comfortable, I would suggest debugging the hideModal function of the api itself and figure out why it is not working and maybe put the above css snippet in there as a work around.
Or maybe post your code on plunkr, jsfiddle so we can look at what is going on.

How to set ButtonState Loading in HTML5 CSHTML Page

Here is my HTML entry that fires the GenerateBill() Javascript at the moment :
<a class="btn btn-primary" id="loading-example-btn" data-loading-text="Loading..." onclick="GenerateBill()">Generate Bill</a>
Here is the GenerateBill() method, this all works fine, all I want to do is add the button state feedback
function GenerateBill() {
var url = '/PremiseProvider/GenerateBill';
var data = {
StartDate: $('#from').val(),
EndDate: $('#to').val(),
premiseProviderId: $('#PremiseProviderId').val()
};
$("body").load(url, data);
};
Here is a code snippet from the Bootstrap 3 official Site on how to implement the button state feedback:
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
</script>
My Question is how can I implement in my GenerateBill script, the bootstrap example uses an Ajax call, can I make it work without making too many changes to what I have?
If I might make a few suggestions that will both fix your issue and improve your code.
Instead of using an onclick event, add an event listener in your javascript, and call the function from there.
Add the .button('loading') call to that same event listener.
Don't leave off the href for an <a> tag. It will cause some browsers to not show the pointer correctly on hover.
Your link will look as follows:
Generate Bill
Leaving your GenerateBill() logic alone, the listener you need to add to your javascript:
$('#loading-example-btn').click(function () {
$(this).button('loading');
GenerateBill();
});
A working example of this code (with GenerateBill() simplified) is available here: http://www.bootply.com/VTSNA1XMcm

Categories