My new value assigned with jquery disappears after postback (UpdatePanel) - c#

I have a page that showing a game list (videogames.aspx)
I have a DataGrid inside an update panel that use a usercontrol to show each videogame. (game.ascx) that is used in my videogames page.
In this usercontrol I have the ability to say progression in the game (Finish, to play etc... by using asp button)
Now I would like to have the possibility to rate a game when showing the list.
To do that I use http://www.wbotelhos.com/raty/
I have created another usercontrol (for rate).
I use this usercontrol inside my game.ascx usercontrol.
When the page load for the first time I have no problem (my current rate is display)
I decide to change my rate on the first game to try and my rate is well save in the database using webmethods and well display on the sreen by javascript.
Now I decide to change my progression in the second videogame and at this moment (postback) the rating of my first game is go back to my old rating value...
I have the impression that my updatepanel keep the old value in the ViewState no?
How do I get out of this situation ?
VideoGames.aspx:
<asp:UpdatePanel ID="Update" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataGrid ID="dgJeux" runat="server" AutoGenerateColumns="false" OnItemDataBound="dgJeux_ItemDataBound" AllowPaging="true" PagerStyle-Position="TopAndBottom"
PageSize="10" GridLines="None" CssClass="table" ShowHeader="false" OnPageIndexChanged="dgJeux_PageIndexChanged">
<PagerStyle Mode="NumericPages" HorizontalAlign="Right" CssClass="paginationASP"/>
<Columns>
<asp:BoundColumn DataField="jeu_id" Visible="false"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Jeu" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<UC:UCJeu ID="ucJeu" runat="server"></UC:UCJeu>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</ContentTemplate>
</asp:UpdatePanel>
My game.ascx:
<table>
<tr>
<td><UC:UCNote ID="ucNote" runat="server"></UC:UCNote></td>
<td class="pull-right">
<asp:Repeater ID="rptAvancementJeu" runat="server" Visible="false" OnItemDataBound="rptAvancementJeu_ItemDataBound">
<HeaderTemplate>
<div class="btn-group" data-toggle="buttons-checkbox">
</HeaderTemplate>
<ItemTemplate>
<asp:Button ID="butAvancementJeu" CssClass="btn btn-success" runat="server" Text='<%# Eval("jeuavancement_libelle") %>' OnCommand="butAvancementJeu_OnCommand" CommandName="ChangerAvancement" Width="85"/>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
</tr>
</table>
My GameRate.Ascx :
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
$(document).ready(function() {
$('#<%= noteMoyenne.ClientID %>').raty({
score: function () {
return $('#<%= noteMoyenne.ClientID %>').attr('data-rating');
},
readOnly: true
});
$('#<%=noteUtilisateur.ClientID %>').raty({
half: true,
click: function (score, evt) {
var contexte = new Array('<%= noteUtilisateur.ClientID %>', '<%= noteMoyenne.ClientID %>');
PageMethods.AffecteNoteEtRetourneNoteMoyenne($('#<%= hfObjectID.ClientID %>').val(), score, AffecterNoteEtMoyenne, null, contexte)
},
score: function () {
return $('#<%= noteUtilisateur.ClientID %>').attr('data-rating');
}
});
});
}
}
</script>
<table>
<asp:Panel ID="pnlNoteUtilisateur" runat="server" Visible="false">
<tr>
<td>
Note :
</td>
<td>
<div id="noteUtilisateur" runat="server"></div>
<asp:HiddenField ID="hfObjectID" runat="server" />
</td>
</tr>
</asp:Panel>
<tr>
<td>
Moyenne :
</td>
<td>
<div id="noteMoyenne" runat="server"></div>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Label ID="lblNombreNotes" runat="server" Text="(pas de note)"></asp:Label>
</td>
</tr>
</table>
Exemple of html generated by raty :
<div id="ctl00_content_dgJeux_ctl03_ucJeu_ucNote_noteUtilisateur" data-rating="0.5" style="cursor: pointer; width: 100px;">
<img src="../img/stars/star-half.png" alt="1" title="Beurk">
<img src="../img/stars/star-off.png" alt="2" title="Mauvais">
<img src="../img/stars/star-off.png" alt="3" title="Pas mal">
<img src="../img/stars/star-off.png" alt="4" title="Bon">
<img src="../img/stars/star-off.png" alt="5" title="Addictif">
<input type="hidden" name="score" value="0.5">
</div>
It use data-rating attribute to show rating value. In my case, after my new rate the value would be 3.5. My webmethod is well called and the value is save in the database. The new data-rating is changed in the html. The problem begin when I wish to change the game progression on another game. The old rate value of the first game come back after postback...
Thanks a lot for your help... I am lost

Related

How to avoid increase in count when the repeater button clicked twice?

I have used a repeater button for show a set of videos. The issue is when the image button in the repeater is clicked twice the data base count is increasing twice.
I don't want that to be happening?
<asp:Repeater ID="rptVideos" runat="server" OnItemCommand="rpViewReports_ItemCommand">
<HeaderTemplate>
<table width="100%">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width: 7%">
<asp:ImageButton ID="imgRP" CommandName="Play" CommandArgument='<%#Eval("ComponentId")%>'
runat="server" ImageUrl="../../../Images/VideoHelp.png" />
</td>
<td>
<span style="font-weight: bold"><%#Eval("ComponentName")%></span>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Please add the following script in your aspx page.
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) { var oControl = args.get_postBackElement(); oControl.disabled = true; }
</script>
Or add the following code in your Page_load function ¨
imgRP.Attributes.Add("onclick", "this.disabled='true';");
imgRP.Attributes.Add("onload", "this.disabled='false';");

Link button doesn't fire click event but triggers modal

This is how I add data to my repeater:
<asp:Repeater ID="rptNotification" runat="server">
<HeaderTemplate>
<table class="table table-hover">
<tr>
<th>Code</th>
<th>Description</th>
<th>Name</th>
<th>Action</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="lblCode" runat="server" Text='<%#Eval("[Group Code]") %>'></asp:Label></td>
<td><asp:Label ID="lblDescription" runat="server" Text='<%#Eval("[Description]") %>'></asp:Label></td>
<td><asp:Label ID="lblName" runat="server" Text='<%#Eval("[Professor]") %>'></asp:Label></td>
<td><asp:LinkButton ID="lbtnEye" CommandArgument='<%#Eval("[ID]") %>' runat="server" CssClass="btn btn-primary btn-xs" OnClick="lbtnEye_Click" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye"></i></asp:LinkButton>
<!-- <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder> -->
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
So as you can see the linkbutton is added dynamically, I have code inside the lbtnEye_Click event but it doesn't hit the click event (I placed breakpoint on it) but it fires the modal. What is wrong with my code?
I think you need to add, OnItemCommand like
<asp:Repeater ID="rptNotification" runat="server" OnItemCommand="rptNotification_ItemCommand">
Add CommandName in linkButton
<asp:LinkButton ID="lbtnEye" CommandName="EyeClicked" CommandArgument='<%#Eval("[ID]") %>' runat="server" CssClass="btn btn-primary btn-xs" OnClick="lbtnEye_Click" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye"></i></asp:LinkButton>
Code behind
protected void rptNotification_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "EyeClicked") // check command
{
//Your code
}
}
The C# click event is not triggered because it's being suppressed by javascript.To make sure both the modal is displayed and the server side click event get's raised you need to change the way you display the popup - you should dynamically call the popup from javascript. Like this:
Change your link button to be like this:
<asp:LinkButton ID="lbtnEye" CommandArgument='<%#Eval("ID") %>'
runat="server"
CssClass="btn btn-primary btn-xs"
OnClientClick="showPopup()"
OnClick="lbtnEye_Click">
<i class="fa fa-eye">
Click me...
</i>
</asp:LinkButton>
Add this to the top of the page:
Javascript and library references:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
showPopup = function () {
debugger;
$("#myModal").modal('show');
return true;
}
});
</script>

asp net repeater radio button group name and get radio button value

I have an aspx c# page for bank account numbers and credit card installment list in one page
if user want to bank transfer it choose bank account else if user want to pay credit card installment it did it.
the problem is radio buttons group name. I didn't group the radio buttons and didn't get the selected radio button value.
Here is my codes.
This İs Bank Account List
<asp:Repeater ID="RptBankalar" runat="server">
<ItemTemplate>
<div class="BankaListBox">
<table width="100%" height="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" align="center" valign="middle">
<img alt="<%#Eval("BankName").ToString() %>" src="../../Files/<%#Eval("Logo").ToString() %>" /></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="22"><strong>Account Owner</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("AcOwner").ToString() %></td>
</tr>
<tr>
<td width="120" height="22"><strong>Branch No</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("Branch").ToString() %></td>
</tr>
<tr>
<td width="120" height="22"><strong>Account Number</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("AccountNum").ToString() %></td>
</tr>
<tr>
<td width="120" height="22"><strong>IBAN</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("Iban").ToString() %></td>
</tr>
</table>
</td>
<td width="100" align="center" valign="middle">
<asp:RadioButton ID="RadioBtn" Text='<%#Eval("id").ToString() %>' runat="server" />
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Same Page Credit card installment list
<asp:Repeater ID="RptTaksitList" OnItemDataBound="RptTaksitList_ItemDataBound" runat="server">
<ItemTemplate>
<tr runat="server" id="arka_tr">
<td align="center" height="22" width="40" runat="server" id="td1">
<b style="display: none; visibility: hidden">
<asp:Literal ID="lt_id" Text='<%#Eval("BankaID").ToString() %>' runat="server"></asp:Literal>
</b>
<asp:Literal ID="lt_taksit_sayisi" Text='<%#Eval("TaksitSayisi").ToString() %>' runat="server"></asp:Literal></td>
<td width="150" runat="server" id="td2">
<asp:Literal ID="LblSepetTotal" runat="server" Text='<%#Session["SepetUrunToplami"] %>'></asp:Literal></td>
<td runat="server" id="td3"><b style="display: none; visibility: hidden">
<asp:Literal ID="lt_komisyon_orani" Text='<%#Eval("KomisyonOrani").ToString() %>' runat="server"></asp:Literal>
</b>
<asp:Literal ID="lt_toplam_tutar" runat="server" Text=''></asp:Literal>
<b style="display: none; visibility: hidden">
<asp:Literal ID="lt_alt_limit" Text='<%#Eval("AltLimit").ToString() %>' runat="server"></asp:Literal>
</b>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
How can i get the values and grouping this radio buttons.
Normally i did in classic asp but i change my coding language.
Kindly regards.
Thanks for your helps.
i never help in Stack. So i will contribute for the first time after been helped so many times by the community.
I hove you like. I have a more simple solution.
Surround your radio button with some element (DIV) with a className that you might like just to pick all the radio in jQuery.
EDITED IN: The aspnet wasnt persisting the viewstate when i changed that way. Now it works just fine :)
$(document).ready(function () {
$(".radiofix").each(function () {
var objRadiosContainer = $(this);
objRadiosContainer.find("input[type=radio]").each(function () {
var objRadio = $(this);
objRadio.change(function () {
if(objRadio.get(0).checked)
{
objRadiosContainer.find("input[type=radio]").each(function () {
if($(this).get(0).id != objRadio.get(0).id)
{
$(this).get(0).checked = false;
}
});
}
});
});
});
});
Let's take a look in the HTML file (or ASPX file):
<asp:Repeater ID="questions" runat="server">
<ItemTemplate>
<h3>%# getQuestionNumber() %>) <%# Eval("questionDescription").ToString() %></h3>
<div class="nameOfTheClass">
<asp:Repeater ID="answers" runat="server">
<ItemTemplate>
<asp:RadioButton ID="radioId" runat="server" />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
This you will work just fine. Just create some javascript file (.js) and call it, fixTheRadios.js and choose a name for "nameOfTheClass" that you like.
Important: I didnt tested the code inside an update panel. I suggest you do that.
Here's how I do it.
In the markup I declare the radio button as server side html control:
<input id="rbMyRadio" type="radio"runat="server" class="myClass" />
And in the code access the value:
foreach (RepeaterItem item in RptBankalar.Items)
{
if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
{
HtmlInputRadioButton rbMyRadio = (HtmlInputRadioButton)item.FindControl("rbMyRadio");
if (rbMyRadio != null && rbMyRadio.Checked)
{
//Do tasks
}
}
}
Grouping is done using jquery in page head:
<script type="text/javascript">
$(document).ready(function () {
$('input[type=radio]').click(function () {
var cname = $(this).attr('class');
$('.' + cname).each(function () {
$(this).prop('checked', false);
});
$(this).prop('checked', true);
});
});
</script>
And reference jquery in the head:
<script src="Scripts/jquery-1.8.2.js"></script>
Very late answer but you can also try adding the radio buttons like this in the repeater:
<asp:TemplateColumn>
<ItemTemplate>
<div style="text-align: center">
<input type="radio" id="rptMyRadio" runat="server" />
</div>
</ItemTemplate>
</asp:TemplateColumn>
Then in a script block add:
$('input[type=radio]').click(function () {
$('input[type=radio]').removeAttr("checked");
$(this).prop('checked', true);
});

DefaultButton in Repeater with textbox and button?

I have a repeater, which represents a shoppingbasket. This shopping basket has an "Update quantity" and a "Delete item" button.
When you edit the quantity and click enter, I will need it to use the Update quantity button (unlike now where it uses the delete item button).
In the code I've tried fixing this by adding a "QuantityPanel" with a DefaultButton, but this doesn't solve my issue!
Any ideas?
My code:
<asp:Repeater ID="ProductBasketRepeater" runat="server"
onitemcommand="ProductBasketRepeater_ItemCommand"
onitemdatabound="ProductBasketRepeater_ItemDataBound1">
<ItemTemplate>
<tr class="BasketEntryItem">
<td class="ImageCol">
<asp:Image ID="ProductImageBox" runat="server" Width="50" />
</td>
<td class="NameCol">
<asp:HyperLink ID="ProductNameHyperlink" runat="server"></asp:HyperLink>
</td>
<td class="PriceCol">
<asp:Label ID="PriceLabel" runat="server"></asp:Label>
</td>
<td class="QuanCol">
<asp:Panel ID="QuantityPanel" runat="server" DefaultButton="UpdateQuantityBtn">
<asp:TextBox ID="QuantityBox" runat="server" Width="30px"></asp:TextBox>
<asp:LinkButton ID="UpdateQuantityBtn" runat="server" Text="Opdater" CommandName="UpdateQuantity"></asp:LinkButton>
</asp:Panel>
</td>
<td class="TotalCol">
<asp:Label ID="TotalPriceLabel" runat="server"></asp:Label><br />
<asp:Button ID="DeleteProductBtn" runat="server" Text="Slet" CommandName="Delete" />
</td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
</SeparatorTemplate>
</asp:Repeater>
In case jQuery is unavailable, you can use simple JavaScript to set to set default button for any texbox:
JS Code:
function clickButton(e, buttonid){
var evt = e ? e : window.event;
var bt = document.getElementById(buttonid);
if (bt){
if (evt.keyCode == 13){
bt.click();
return false;
}
}
}
ASPX page or any simple "input" textbox:
<input name="TextBox1" type="text" id="TextBox1" onkeypress="return clickButton(event,'Button1')" />
Code begind C#:
TextBox1.Attributes.Add("onkeypress", "return clickButton(event,'" + Button1.ClientID + "')");
Do you need help with apply this code in repeater ?
Using jQuery, this piece of code will issue a programmatic click when pressing enter in the textbox:
$('input[id$=QuantityBox]').keypress(function(e) {
if (e.keyCode == 13) {
$(this).next('input[id$=UpdateQuantityBtn]').click();
}
});
Note: I saw a bit late you did not requested jquery specifically, but in you do, this should do the trick.

Radio buttons not working when binded with DataList control

When i tries to bind a radio button in a datalist it becomes multiselect as its name property becomes different even when i used GroupName to be same.
How can i make it act as radio button only.
<asp:DataList ID="dlRoomNo" runat="server" RepeatColumns="4">
<ItemTemplate>
<div class="orboxfour">
<ul class="boxfour">
<li>
<asp:RadioButton ID="rdoRoomNo" GroupName="roomNo"
Text='<%#Eval("Room No")%>' runat="server" />
</li>
</ul>
</div>
</ItemTemplate>
</asp:DataList>
There's a number of suggestions in the answers to this question.
I've solved it with a bit of jQuery, though the way I did it probably isn't the best way!
In my markup, I have a script block with
function SetUniqueRadioButton(current)
{
$('input:radio').attr('checked', false);
current.checked = true;
}
and then attached the script to a radio button in my code-behind in the ItemDataBound event
String uniqueRadioButtonScript;
RadioButton radioButton;
uniqueRadioButtonScript = "javascript:SetUniqueRadioButton(this);";
if (e.Row.RowType == DataControlRowType.DataRow)
{
radioButton = (RadioButton)e.Row.FindControl("MyRadioButton");
radioButton.Attributes.Add("onclick", uniqueRadioButtonScript)
}
the best option is like this:
1. Add script
function fnrad(rbtn) {
var radioList = document.getElementsByTagName("input");
for (var i = 0 ; i < radioList.length; i++) {
if (radioList[i].type == "radio") {
radioList[i].name = 'a';
radioList[i].setAttribute("Checked","");
}
}
rbtn.setAttribute("Checked", "checked");
}
Datalist will be like this:
<asp:DataList ID="dlEmails" RepeatLayout="Flow" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>Select Email Address </th>
<th>Status</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="rbtnSelect" Text='<%#Eval("Emails") %>' onclick='fnrad(this);' GroupName="a" Checked='<%#Eval("Primary") %>' runat="server" /><br />
(<asp:Label ID="lblId" runat="server" Text='<%#Eval("Verified") %>'> </asp:Label>)
</td>
<td valign="middle">
<asp:Label ID="Label2" Style="display: none;" runat="server" Text='<%#Eval("Id") %>'> </asp:Label>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Main") %>'> </asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>

Categories

Resources