how to run javascript and then do a postback?
Question
I am trying to create an add to 'favourites'button. When the user clicks this button the image has to be changed ( in js). After that I would like to do a postback the asp.net page? how can I make this work? sofar i got:
aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
function ChangeFavStar() {
if ($("#btnAddToFavs").attr('src') == 'starempty.jpg') {
$("#btnAddToFavs").attr('src') = 'staradded.jpg';
}
else {
$("#btnAddToFavs").attr('src') = 'starempty.jpg';
}
return true;
}
});
</script>
<style type="text/css">
#btnAddToFavs {
height: 79px;
width: 121px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageButton ID=btnAddToFavs runat=server
OnClientClick="ChangeFavStar();" ImageUrl="~/starempty.jpg"
Height="74px" Width="109px" />
</div>
</form>
</body>
</html>
cs behindcode
protected void btnAddToFavs_Click(object sender, ImageClickEventArgs e)
{
//do stuff
}
3 answers
solution1
0 2012-01-21 03:51:59
Change function declaration from what you have to the following:
<script type="text/javascript">
function ChangeFavStar() {
if ($("#btnAddToFavs").attr('src') == 'starempty.jpg') {
$("#btnAddToFavs").attr('src') = 'staradded.jpg';
}
else {
$("#btnAddToFavs").attr('src') = 'starempty.jpg';
}
return true;
}
</script>
solution2
0 ACCPTED 2012-01-21 03:52:32
You may invoke JavaScript function but changes on button wont be persisted because of postback. You have to change ImageUrl property via C# code.
<script type="text/javascript">
function ChangeFavStar() {
if ($("#btnAddToFavs").attr('src') == 'starempty.jpg') {
$("#btnAddToFavs").attr('src') = 'staradded.jpg';
}
else {
$("#btnAddToFavs").attr('src') = 'starempty.jpg';
}
}
</script>
Markup:
<form id="form1" runat="server">
<div>
<asp:ImageButton ID="btnAddToFavs" runat=server
OnClientClick="ChangeFavStar();" ImageUrl="~/starempty.jpg"
Height="74px" Width="109px" />
</div>
</form>
solution3
0 2012-01-21 05:23:05
you can do in this way. You can call Server side click event from JavaScript. you can call this java script like this CLick Me for Postback.
<script type="text/javascript">
function ChangeFavStar() {
if ($("#btnAddToFavs").attr('src') == 'starempty.jpg') {
$("#btnAddToFavs").attr('src') = 'staradded.jpg';
}
else {
$("#btnAddToFavs").attr('src') = 'starempty.jpg';
}
__doPostBack('<%=btnAddToFavs.ClientID %>', '');
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.