I am trying to attach the ExportPDF to the button exportSelectedPdf on a cshtml file but when I click the button the handler is not working. Any ideas why ?
<input id="exportSelectedPdf" type="button" value="Export to PDF" />
<script type="text/javascript" language="javascript">
function ExportPDF() {
alert("Hi");
var url=#Url.Action("ExportTransactionsAsPdf", "JournalController");
exportSelectedTransactions(url);
}
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF());
</script>
use the below code:
<input id="exportSelectedPdf" type="button" value="Export to PDF" />
<script type="text/javascript" language="javascript">
function ExportPDF() {
alert("Hi");
var url=#Url.Action("ExportTransactionsAsPdf", "JournalController")
;
exportSelectedTransactions(url);
}
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
</script>
You should attach a function reference as "click" listener, not the result of it.
Change:
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF());
to the (not immediately call the function, just pass the reference to it):
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
You are confusing client side with server side. Try this.
var url = '#Url.Action("ExportTransactionsAsPdf", "JournalController")';
and bind event like this
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
Thanks for your replay. Still can not get the attached button to work. I defined the onclick handler inline and that worked for me.
<input id="exportSelectedPdf" type="button" value="Export Selected Transactions to PDF"
onclick="var url='#Url.Action("ExportTransactionsAsPdf", "Journal", new {area="Journal"})';exportSelectedTransactions(url);"/>
Related
I have a button like so:
<button data-id="1" onclick="showID()">Show ID</button>
And a function:
<script>
function showID() {
alert(($(this).data("id")));
}
</script>
I just want the data-id to be shown in the alert box. I've also tried
alert(($(this).data("id")));
But again nothing...
$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.
You need to do like this:
<button data-id="1" onclick="showID(this)">Show ID</button>
<script>
function showID(elem) {
alert(($(elem).data("id")));
}
</script>
Try this
function showID(button) {
alert($(button).attr('data-id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Currently this will not give you the right value, your code should be this way:
<button data-id="1" onclick="showID(this)">Show ID</button>
Then
<script>
function showID(e) {
alert(($(e).data("id")));
}
</script>
this doesn't work the way you are trying.
pass this on click.
Check out this fiddle.
Here is the snippet.
function showID(ele) {
alert(($(ele).attr("data-id")));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Here there is an example, you have to pass the id to function in the button tag:
JavaScript - onClick to get the ID of the clicked button
In JavaScript - If I want to fire a button I do this -
<button type = 'button' id='myButton'>HiddenButton</button>
<script>
function callAutoClick(){
document.getElementById('myButton').click();
}
</script>
When I want to fire this button click, say, onChange of a text field -
<input type= 'text' onchange ='callAutoClick()'/>
I am not able to do the same in DOJO. I have found a solution using Javascript -
var divId = document.getElementById('myDivID');
divId.getElementsByTagName("button")[0].click();
But I don't want to have the dependency with the DivID. Is it possible to click a button just knowing the button's controlID. All I could find online were methods to define an OnClick() using dojo for a button and not clicking the button itself.
Plus I am designing the page with a BPM Tool so on including sections the DivID changes. When I open the page in FireBug I can see this -
<div id="div_1_1_2_1" class="Button CoachView CoachView_invisible CoachView_show" data-ibmbpm-layoutpreview="vertical" data-eventid="boundaryEvent_2" data-viewid="Hidden_Cancel" data-config="config23" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_2d5b8abc_ade1_4b8c_a9aa_dfc746e757d8.Button">
<button class="BPMButton BPMButtonBorder" type="button">Hidden_Cancel</button>
</div>
If you guys could suggest me a way to access the DOM object using the data-viewId also it would cater to my need.
Thanks in advance :)
You can use dojo/query:
function progClick() {
require(["dojo/query"], function(query) {
query("div[data-viewid=myViewId] > button").forEach(function(node) {
node.click();
});
});
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
<div id="everChangingId" data-viewid="myViewId">
<button type="button" onclick="alert('my button got clicked!')">My Button</button>
</div>
<hr/>
<button type="button" onclick="progClick()">Programatically Click My button</button>
</body>
</html>
If i have a button, can I attach an action to it to perform server side processing, or does it have to be wrapped in a form?
For example
<button type="submit" onClick="listco_directory_contents.js"> List </button>
Can this be made to work, or is a form required?
You can't have a type="submit" if it's not in a form, there is nothing to submit. What you can do, is having a <button id="myButton">, then attach an event to it:
var myButton = document.selectElementById('myButton');
myButton.addEventListener('click', function() {
/* do something cool */
}, false);
And the "do something cool" could be an Ajax request so you send data to the server.
You can yes but if your aiming to do server side processes i recommend the jquery way.
<!--this button uses javascript-->
<input type="button" onclick="myfunction()" value="button"/>
<!--this button uses jquery-->
<input type="button" id="myfunction" value="button"/>
<script>
//javascript function using the onclick event
function myfunction(){
alert("an action");
// or any other function u wish to
// do once the button is click
}
//jquery using the id of the button
$(document).ready(function(){
$("#myfunction").click(function(){
alert("another action");
// or any other function u wish to
// do once the button is click
});
});
</script>
You could also just include the js:
<script type="text/javascript" src="listco_directory_contents.js"></script>
and then call whatever function you need from there:
<button onClick="exampleFunction()"> List </button>
Or in case you want to do server side processing with php you can do simply:
<button onClick="$.post('http://example.com/index.php');"> List </button>
$(function(){
$(':submit').on('click',function(){
alert('hi');
})
})
also can be type=submit
$(function(){
$('input[type="submit"]').on('click',function(){
alert('hi');
})
})
DEMO
I have a simple question. My JS code is like this, but when I try to add a new element or content to the <div>, it comes up then goes up quickly. I don't know why.
How can I avoid this?
<head>
$(document).ready(function () {
$('#mybtn').click(function () {
$('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
});
});
</head>
<body>
<form id="form1" runat="server">
<button id ="mybtn">generate code</button>
<div id="main"></div>
</form>
</body>
You should stop the button from Submitting the form by setting the button's type to be that of button.
Example :
<button type="button" id="mybtn">generate code</button>
The default type for a <button> element is submit. Which is causing your <FORM> tag to submit.
Try this:
$('#mybtn').click(function (e) {
e.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
return false;
});
Try with:
$('#mybtn').click(function (event) {
event.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});
preventDefault : If this method is called, the default action of the event will not be triggered.
I have my script here,
<script type='javascript'>
$(LastRow).find('#delete').attr('onclick','Comment_Delete(event,'+cID+')')
</script>
<input type="image" id="delete" border="0" src="../Resource/images/commentcross.jpg";" style="border-width:0px;">
i want control to be rendered as,
<input type="image" id="delete" border="0" onclick="Comment_Delete(event,1048);" src="../Resource/images/commentcross.jpg";" style="border-width:0px;">
i.e. i want to bind onclick event to my id=delete tag.i have used my live as,
$(LastRow).find('#delete').live('click','Comment_Delete(event,'+cID+')')
but gettintg error in chrome as TypeError: Cannot call method 'replace' of undefined
Try this,
$(LastRow).find('#delete').live('click', function() { Comment_Delete(event,cID ) } );
Have you tried this way:
$(document).find('#delete', LastRow).on('click', Comment_Delete('event',cID));
and this:
$(document).on('click', '#delete' Comment_Delete('event',cID));