Develop Reference

Javascript button click has no effect

I have a asp button that I want to be clicked by a javascript function when I click a regular html button. However when it gets to the button.click() there is no effect whatsoever. If I look in the debugger, everything else in the function acts as normal, and if I click on the asp button myself it runs the code I expect it to or if I call the joingameBtn_Click in the console it also properly clicks the button. I created the buttons dynamically on page load in a loop so that each has an onclick function that passes an id unique to it.
function joinGameBtn_Click(campaignid) {
var temp = document.getElementById('CampaignID');
temp.value = campaignid;
var button = document.getElementById("CampaignBtn");
button.click();
}
function createFunction(id) {
return function() { joinGameBtn_Click(id); };
}
//Where the button is created
var hoverbutton = document.createElement('button');
hoverbutton.id = 'hoverbutton';
var func = createFunction(campId);
hoverbutton.onclick = func;
After reading some other posts I saw that sometimes the dynamically created buttons could be the problem in that the event listener isn't tied to them. Some suggestions mentioned making sure the document was ready so I tried this as well to no avail.
$(document).ready(function() {
$(document).on('click', '#hoverbutton', function () {
$("#CampaignBtn").click();
});
});
EDIT: Here is the asp.net button in question.
<asp:Button ID="CampaignBtn" runat="server" Text="Button" style="display:none;" OnClick="joinGame_Click" ClientIDMode="Static"/>
Here is the server side button click function:
public void joinGame_Click(object sender, EventArgs e)
{
Session["campaignid"] = int.Parse(CampaignID.Value);
Response.Redirect("CampaignSession.aspx");
}

I changed my asp button to a regular html button which seemed to resolve the issue
<button onserverclick="joinGame_Click" runat="server" id="CampaignBtn" ClientIDMode="Static">Button</button>
Not sure if fixing the issues with duplicate id's played a role in it as well.

Search icon not working

I'm trying to add a search button to a client website but it doesn't do anything.
Is my javascript correct or am I doing something wrong?
See in this link: https://fiddle.jshell.net/mdcnzfLw/

Your code doesn't have an event handler for the click event. While CSS makes the icon look clickable, it has no action behind it.
You want to add to your init function:
document.getElementById('icon').addEventListener('click', handleClick);
and then add:
function handleClick() {
alert('You clicked on search');
}
Replace the alert with whatever the code is supposed to do.

document.getElementById('icon').addEventListener('click', handleClick());
You missed the function call in the EventListener.

when unload or exit event execute a function jQuery

I have a customize pop up box like a lightbox or a modal box and I want to show it and prevent the page from unloading or exit when a user tries to leave or exit the page so heres my code and my try so far:
$(window).bind('beforeunload', function(){
return loadPopup();
});
As you can see from the above codes, when a user tries to exit or leave the page, it should execute a function:
loadPopup();
But it does not work, the loadPopup(); doesn't fired. What supposed to be a problem on my above codes why it doesnt execute the loadPopup(); function?

VeeKayBee solution is correct.
Anyway you can do this with JQuery too:
$(window).bind('beforeunload', function(){
fireOnLeave();
return '';
});
function fireOnLeave(){
console.log('Fired');
}
You can check the console log and see 'Fired' string which is confirming that the function has been fired.But you have to return a string to 'beforeunload' event.
And also jquery .unload do the thing but it has been deprecated since JQuery 1.8
http://api.jquery.com/unload/

Check this http://jsfiddle.net/Cnsyd/
I am not sure you do something using jQuery, but obviously you can do something with javaScript.
function closeIt()
{
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = closeIt;
JavaScript onbeforeunload event. It's introduced by Microsoft, but works in most browsers and click here for more details.
Believes this is the thing ultimately you requires.

How to trigger server side button's click event after javascript confirm dialog returns true

I have an input as count named in a repeater with hdncount hidden input. And I have a server side button out of repeater. This script runs onblur event of count. I want to trigger server side button's click event if client click OK button on confirmation. What should I do to do that?
<script type="text/javascript">
function changeItemCount(input) {
var hdnCount = $(input).closest("div").find("input[id=hdnCount]").val();
var crrCount = $(input).closest("div").find("input[id=count]").val();
if (hdnCount != crrCount) {
var answer = confirm("Ürün adedi değiştirilecektir. Onaylıyor musunuz?");
return answer;
} else {
return true;
}
}
</script>

How to fire a button click event from JavaScript in ASP.NET
var answer = confirm("Ürün adedi değiştirilecektir. Onaylıyor musunuz?");
if(answer)
__doPostBack('btnSubmit','OnClick'); //use the server-side ID of the control here

Use OnClientClick together with OnClick
<asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" OnClientClick="return CheckGoJSEvents();" />
EDIT:
Didn't see that you had the function execute on the blur event. In that case you would not use the OnClientClick of the button. The answer posted by mattmanser would be correct.
If you wanted it to function from the button click, then you could use this method. Sorry for the confusion.

Asp.Net button onclientclick problem

I have a strange problem, it seems, that I don't know how to solve.
I have a button like this:
<asp:Button ID="btnSave" runat="server" ClientIDMode="Static" Text="Save" OnClientClick="return ConfirmSave();" OnClick="btnSave_Click" />
If I write my client function like the following, it works as expected:
function ConfirmSave()
{
return confirm('Confirm?');
}
But I should check, inside the function, for the confirm result, like this:
function ConfirmSave()
{
if (Page_ClientValidate('validationGroup'))
{
var conf = confirm("Confirm?");
if (conf)
{
$('#btnSave').attr('disabled', 'disabled');
}
return conf;
}
else
return false;
}
Doing this, the page postback but the server click event doesn't fire.
Anyone could help? Thanks

use a timeout to disable the button immediately after your code completes and the submit happens.
if (conf)
{
setTimeout( function() { $('#btnSave').attr('disabled', 'disabled') }, 0 );
}

Yes its fires because the Button is input with submit type.
You probably have some other error, maybe a duplicate of your button id, in the page (because you have set it on static mode).
Check if you have give the btnSave again somewhere else, or check also if you have any JavaScript error.
(After your page is render, on your browser see the source code of your page and search for the btnSave id if exist more than one time)

If you have a method called btnSave_Click() in your code behind then when you post back it will fall into your Page_load method first and then fall into that method. If you are using VB then you will need a method with Handles btnSave_Click() after it.