Develop Reference

set the visibility of text box to false when the rad combo box shows empty message string

I have a user control in which am using one editable rad combo and one rad text box. depends on the value of combo i need to set the visibility of text box. its working. the code is as follows.
1. User Control
<asp:Panel ID="pnl44" runat="server" Visible="false">
<table width="100%">
<tr>
<td style="width: 20%;">
Quantity<span style='color: red'>* </span>
</td>
<td align="left" style="vertical-align: top; width: 80%;">
<table width="100%">
<tr>
<td align="left" style="vertical-align: top; width: 63%;">
<telerik:RadComboBox ID="pnl44_ddlUnit" runat="server" DropDownAutoWidth="Enabled"
Width="150px" AutoPostBack="true" OnSelectedIndexChanged="ddlUnit_SelectedIndexChanged"
EmptyMessage="---Select---" markfirstmatch="True" allowcustomtext="false" onclientblur="OnClientBlurHandler"></telerik:RadComboBox>
</td>
<td>
<asp:TextBox ID="pnl44_txtQuantity" MaxLength="10" runat="server" CssClass="textfield"
Width="145px" />
<ajaxtoolkit:FilteredTextBoxExtender ID="ftetxtQuantity" FilterType="Numbers" runat="server"
TargetControlID="pnl44_txtQuantity" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
in the code behind am handling the selected changed event to set the visibility, its working fine. the javascript for on blur is as follows (it is in the aspx page).
<script type="text/javascript" language="javascript">
function OnClientBlurHandler(sender) {
var item = sender.findItemByText(sender.get_text());
if (!item) {
sender.clearSelection();
}
}
</script>
with this whenever the combo value is null, it will show the empty message.
the scenario is like this
by default the visibility of txtQuantity is false.
when user select 'value1' from combo, the txtQuantity visibility is true;
then the user is deleting value1 using delete/backspace, combo box will show empty message string, but that time the txtQuantity visibility is true, instead false.
please help me to solve the issue...

It seems you change the textbox visibility on the server, so you would need to initiate a request that will do that for you when you clear the combo selection. Basics:
function OnClientBlurHandler(sender) {
var item = sender.findItemByText(sender.get_text());
if (!item) {
sender.clearSelection();
__doPostBack("", "");
}
}
which will generate a generic postback. You can use hidden buttons or hidden fields or other arguments to know where this postback originated from.
Option 2: hide the textbox with JavaScript, e.g.:
function OnClientBlurHandler(sender) {
var item = sender.findItemByText(sender.get_text());
if (!item) {
sender.clearSelection();
document.getElementById("<%=pnl44_txtQuantity.ClientID%>").style.display="none";
}
}
or something similar, depending on what the ACT control does with the textbox.

Jquery ui Dialog in an MVC listing table

I have a listing table displaying some information from the database.
What i am trying to do is to check if the item status is 1 and if comments exists to display a little icon where the user will click on it and see the specific comment for that item.
So in the listing table it seems to display fine that icon according to the above criteria but when i click on a specific listing it opens all dialogs with comments for all other listings with the same item status instead of the one i have chosen.
Can you please help me on what am i doing wrong ?
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.BookingId)
</td>
<td>
<a href="#Url.Action("ItemDetails", new {id=item.ItemId })" title="#item.Item.ItemDescription">
#Html.DisplayFor(modelItem => item.Item.ItemName)
</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequestDate)
</td>
#if (item.StatusCodeId == 1)
{
<td style="color:#DD7500">
#Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
#if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> #item.Comments</p>
</div>
}
</td>
}
}
</tr>
}
</table>
<script> $(function ()
{
$(" .orangedialog").dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('.orangeclicker').live("click", function () {
$(".orangedialog").dialog("open");
});
});
</script>

You should try this:
first;you have to create links in each row of table having same class.
<a class="comments">Comments</a>
second; update your page as:
<div id="dialog-details" style="display: none">
<p>
#if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> #item.Comments</p>
</div>
}
</p>
</div>
third update your script as:
$('.comments').click(function () {
$("#dialog-details").dialog('open');
return false;
});
$("#dialog-details").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
</script>

They all have the same id or class ( because they are render in a foreach statement )
You can add a difference by combining the class or the id with the index from your list
I don't have the code in front of me, but I also think something like this would work.
UPDATE:
$('.orangeclicker').live("click", function (e) {
alert("check"); // if this fires at click, the problem is somewhere else
var target= $(e.currentTarget);
target.next().dialog("open");
});

You should Use $(this).next().next().find(".orangedialog") to find relevent element.
$('.orangeclicker').on("click", function (e) {
$element = $(this).next().next().find(".orangedialog");
$element.dialog("open");
});
Update
Use on() instead of live()
See DEMO

update panel inside jquery dialog div not working [duplicate]

This question already has answers here:
jQuery UI Dialog with ASP.NET button postback
(17 answers)
Closed 9 years ago.
that's my code :
<div id="AddFriendDiv" style="display: none">
<asp:TextBox ID="FriendParamtxt" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="upd" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchFriend_btn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="SearchFriend_btn" runat="server" OnClick="SearchFriend_btn_Click" Value="Search" />
<asp:Repeater ID="FriendRequestRepeater" runat="server">
<ItemTemplate>
<table border="1">
<tr>
<td>
<img src='<%#Eval("PROFILE_PIC") %>' width="35px" height="35px" alt='<%#Eval("NAME") %>' />
</td>
<td>
<asp:Label ID="Name_lbl" runat="server" Text='<%#Eval("NAME") %>'></asp:Label>
</td>
<td>
<input type="hidden" id="requestFriendID_hf" /><input type="button" id="addFreind"
value="Send Request" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
client side :
function SendFriendRequest() {
var dialogOption = { title: "<u>Add Friend</u>", width: 280, height: 140, modal: false, resizable: false, draggable: true,
maxHeight: 340, autoOpen: true, closeOnEscape: true
};
var DialogExtendOptions = { "close": true, "maximize": false, "minimize": true, "dblclick": 'minimize', "titlebar": 'transparent' };
$("#AddFriendDiv").dialog(dialogOption).dialogExtend(DialogExtendOptions);
$("#AddFriendDiv").show();
}
server side :
protected void SearchFriend_btn_Click(object sender, EventArgs e)
{
DataTable frdrequest= new DataTable();
int clientID =int.Parse( UserID.Value.ToString());
if (FriendParamtxt.Text != "")
{
frdrequest = SQLHelper.GetAllClientByParam(FriendParamtxt.Text, clientID);
if (frdrequest.Rows.Count > 0)
{
FriendRequestRepeater.DataSource = frdrequest;
FriendRequestRepeater.DataBind();
}
}
}
SendFriendRequest is beeing called form an a tag outside but the problem is that the button click event isn't firing when the main div is a dialog but when i changed it to normal div it work fine anyone know a solution for this ?

The problem is that jQuery UI appends the dialog to the body, rather than the form. ASP.Net controls need to be inside the form in order to function, but thankfully this is easy to fix. Modify your jQuery like so:
$("#AddFriendDiv").dialog(dialogOption)
.dialogExtend(DialogExtendOptions)
.parent().appendTo($("form:first"));
$("#AddFriendDiv").show();

This will help you
var dialog = $("#divModal").dialog({
autoOpen: false,
height: 515,
width: 900,
modal: true,
draggable: false,
resizable: false
});
dialog.parent().appendTo(jQuery("form:first"));

Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});

WebMatrix filling attribute and JavaScript Reading Attribute not producing expected results

I am having an issue with the following code:
SECTION FROM CSHTML FILE:
#if(errorMessage != "")
{
err="err";
}
else
{
err="";
}
#if(errorMessage == "")
{
foreach(var row in db.Query(stringCompiler, EntryID, POIName, DateLastModified, Gender, Race, Height, Weight, HairColor, EyeColor, DOB, Age, SS, DL, DOC, VehicleTag, FBI, Officer, HomePhone, CellPhone, CellPhone2, CellPhone3, POICautions, WorkPhone, WeightedAggregate, Address, AdditionalDescriptors, Aliases, SourceOfInformation, AddressInformation, KnownAssociates, VehicleDescription, Comments, SummarizedIncidents, AllCellPhones, AllPhones, betDOB1, betDOB2, betDLM1, betDLM2, betAge1, betAge2, POILastName, SearchAll))
{
<div class="searchResult">
<table style="background-color: #beebeb;">
<tr>
<td class="entryLabel">ENTRY ID</td>
<td class="entryLabel">FIRST NAME</td>
<td class="entryLabel">LAST NAME</td>
<td class="entryLabel">DATE LAST MODIFIED</td>
<td class="entryLabel">DOB</td>
<td class="entryLabel">AGE</td>
<td class="entryLabel">ADDRESS</td>
<td class="entryLabel">VEHICLE TAG#</td>
<td class="entryLabel">OFFICER</td>
<td class="entryLabel">HOME PHONE</td>
<td class="entryLabel">CELL PHONE</td>
<td class="entryLabel">WEIGHTED AGGREGATE</td>
</tr>
<tr>
<td class="entry">#row.EntryID</td>
<td class="entry">#row.POIName</td>
<td class="entry">#row.POILastName</td>
<td class="entry">#row.DateLastModified</td>
<td class="entry">#row.DOB</td>
<td class="entry">#row.Age</td>
<td class="entry">#row.Address</td>
<td class="entry">#row.VehicleTag</td>
<td class="entry">#row.Officer</td>
<td class="entry">#row.HomePhone</td>
<td class="entry">#row.CellPhone</td>
<td class="entry">#row.WeightedAggregate</td>
</tr>
<tr>
<td colspan="13" style="text-align: center;"><form method="post" action="/ComputeLookupToVAndE.cshtml"><input type="hidden" name="veEntryID" hidden="hidden" readonly="true" value="#row.EntryID" /><br/><input type="submit" value="View & Edit" class="btn3" style="height: 40px; width: 100px;" /><br/><br/></form></td>
</tr>
</table>
</div><br/>
ResultCount += 1;
}
<input type="hidden" id="ResultCount" value="#ResultCount" />
<input id="err" type="hidden" value='#err' />
}
SECTION FROM JAVASCRIPT FILE:
$(document).ready(function () {
if ($("#err").val() == "err")
{
$("#searchForm").attr('action', "/LookUpEntry.cshtml#top");
}
else
{
$("#searchForm").attr('action', "/LookUpEntry.cshtml#searchList");
}
});
Obviously I am trying to change the value of the hidden input element to "err" before the page is rendered by C# if any error messages have been stored in the variable errorMessage.
Once done JavaScript is supposed to read this value and then if it is "err" change the action attribute of the form to append "#top" (for named anchor, so the loaded position on the page changes based off of whether there is an error message or results to view), otherwise the form's action attribute should be changed (still by JavaScript) to append #searchList).
Any idea why JavaScript and C# won't play well together? The errors I am getting are haphazard (like it won't work the first time, then doesn't work at all), anyway based on the code below, it still never goes to (#top), although when trying a few things before this exact coding (I don't remember exactly what they were) it would sometimes (although never the first time) go to the top if it had errored.
Why is jQuery not doing its job? It seems like this should just work to me...
Any ideas?
Thanks for any help

Well, I guess I have it figured out and I suppose it does make sense:
It does change the value as it should, but the action (how the form [or rather where, the way I look at it] handles the data posted) is already set to what it where it will go regardless of the results of the current search. In short: It is a step behind. When I click to search and an error Message is produced, it will rewrite the action as intended, but it will, of course, only come into effect on the next search not the current one as that was already determined on the previous submit.
What's wrong with my code? Nothing syntactically, the methodology (logic) is in err.

Get ASP.NET GridView cell value and show in JQuery Progress Bar

I have an ASP.NET GridView which is populated from a SQL Server database. This is working fine. My code behind is using C#.
One of the columns in the GridView contains a JQuery Progress bar and another contains a number of responses. Please see the image below:
How can I go about getting each value for the response count column and show this value in each rows corresponding JQuery Progress bar?
My JQuery progress bar is currently static and it generated like so:
<asp:DataList runat="server" id="listResponses" DataKeyField="QuestionID" OnItemDataBound="listResponses_ItemDataBound" Width="100%">
<ItemTemplate>
<div class="question_header">
<p><strong><asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label>. <%# DataBinder.Eval(Container.DataItem, "QuestionText") %></strong></p>
</div> <!-- end question_header -->
<asp:GridView runat="server" ID="gridResponses" DataKeyNames="AnswerID" AutoGenerateColumns="False" CssClass="responses" AlternatingRowStyle-BackColor="#f3f4f8">
<Columns>
<asp:BoundField DataField="AnswerTitle" ItemStyle-Width="250px"></asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<div class="pbcontainer">
<div class="progressbar"></div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Responses" HeaderText="Response Count" HeaderStyle-Width="100px" />
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:DataList>
Using the following script provided on the JQuery UI website:
$(function () {
// Progressbar
$(".progressbar").progressbar({
value: 40
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
I am not sure where to being here so any help would be appreciated.

In your div that holds the progress bar, add a hidden field like so:
<div class="pbcontainer">
<!-- This is the new line in markup. Replace NumOfResponses with your value field -->
<asp:HiddenField ID="hiddenValue" runat="server" Value='<%# Eval("NumOfResponses") %>' />
<div class="progressbar"></div>
</div
Now each div that contains a progress bar also contains a hidden field with the value you need to update the progress bar with.
In jQuery you can set all progress bars inside the data list equal to their respective values. Example:
EDIT: (the following jQuery code was modified)
$('.pbcontainer').each(function() {
// We assume that there is only 1 hidden field under 'pbcontainer'
var valueFromHiddenField = $('input[type=hidden]', this).val();
$('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) });
});
ALL these were just from the top of my head without any real code verification..
But this will be the IDEA:
Get the value from ASP.NET into a hidden field near the progress bars in each row
Update each progress bar in jQuery with the value in HTML hidden field.
Hope this helps

Try this:
<script>
var maxBarVal = 0;
$(function () {
$('.row').each(function () {
var val = parseInt($(".value", this).text());
maxBarVal += val;
});
$('.row').each(function () {
var val = parseInt($(".value", this).text());
$('.bar', this).progressbar({ value: val / maxBarVal * 100 });
});
});
</script>
This is simulated output from the GridView control:
<table border="1" cellpadding="3" cellspacing="0" style="border-collapse: collapse;" width="100%">
<tr>
<td colspan="3">4. Have you used an iPad before?</td>
</tr>
<tr>
<td width="250">Answer</td>
<td>Percentage</td>
<td width="100">Response Count</td>
</tr>
<tr class="row">
<td>Yes</td>
<td><div class="bar"></div></td>
<td class="value">4</td>
</tr>
<tr class="row">
<td>No</td>
<td><div class="bar"></div></td>
<td class="value">2</td>
</tr>
</table>