having problems if i wish to set focus the textbox inside the aspxdockpanel, while im testing with not using aspxdockpanel then i can be focus on the textbox, after i use aspxdockpanel then face the problem with jquery focus on the first textbox
$(document).ready(function () {
$(function () {
$('input[type!=hidden],input[type="text"], not input[type="button"]:last').first().focus();
});
});
<dx:ASPxDockPanel ID="ASPxDockPanel1" runat="server" ShowHeader="true" ClientInstanceName="ASPxDockPanel1" Border-BorderColor="Red" >
<ContentCollection>
<dx:PopupControlContentControl>
<table>
<tr>
<td>
<dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="ASPxLabel">
</dx:ASPxLabel>
</td>
<td>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" ClientInstanceName="ASPxTextBox1">
</dx:ASPxTextBox>
</td>
</tr>
</table>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxDockPanel>
As the textbox has an ID you can use it
$(document).ready(function () {
$("#ASPxTextBox1").focus ();
});
No need for function()
Try
$(document).ready(function () {
$('#ASPxDockPanel1').find('input[type="text"]:first').focus();
});
or Use ClientID
$('#<%= ASPxTextBox1.ClientID %>').focus();
Related
i create a table row will auto generate data from sql and bound in by backend code.
Is it a way check that user has click or not by using javascript?
The row is create as below:
<tr>
<td align="right" class="formLine">Brand Type:</td>
<td class="FormLine2" align="left" colspan="7">
<asp:CheckBoxList ID="chkBrandType" runat="server" RepeatColumns="10" RepeatDirection="Horizontal" RepeatLayout="Flow" BorderWidth="0" />
</td>
</tr>
Jquery solution
//assuming all your html elemnts and checkboxes are having unique ids
$("#check1").on('click', function(){
if($(this).is(":checked")){
alert("checked");
else {
alert("unchecked");
}
}
Otherwise if you just want to check if ANY checkbox has been clicked
$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')){
alert('checked');
} else {
alert('unchecked');
}
});
This can be done easily with the function below. Note the use of CheckBoxList1.ClientID to get the correct ID. Also you need to add input to the listener since asp.net will create a table around the checkboxes.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= CheckBoxList1.ClientID %> input").change(function (e) {
if ($(this).prop("checked")) {
alert($(this).val());
}
});
});
</script>
I'm trying to write a function in jQuery which is going through all table rows and searches for hidden field values by specific hidden control ID "hdnIsEmpty", the problem is that I don't know how to do it by this hidden control ID because there are other hidden controls which are not necessarily to touch...
Maybe there is some other way to get what I wan't, but here is my unsuccessful try/approach and the only one I know:
<udc:Repeater ID="repDetailedInformation" runat="server" DataSource='<%# Eval("DetailsInformation") %>'>
<table id="tblDetails">
<tbody>
<tr>
<td>
BLA-BLA-BLA Information
</td>
</tr>
<tr>
<td>
<udc:HiddenField ID="hdnIsEmpty" runat="server" Value='<%#Eval("IsEmpty") %>' />
</td>
</tr>
<tr>
<td>
<udc:HiddenField ID="hdnBlaBla" runat="server" Value='<%#Eval("BlaBla") %>' />
</td>
</tr>
<tr>
<td>
BLA-BLA-BLA Information
</td>
</tr>
</tbody>
</table>
and jQuery:
<script type="text/javascript">
$(document).ready(function () {
function getHiddenBoolean(name) {
var selector = 'input:hidden[name$="' + name + '"]';
var field = $(selector);
return (field != null && field.length > 0) ? field.val().toLowerCase() == "true" : false;
};
var filteredRows = $('#tblDetails tr td').filter(function () {
return $(this).find('#hdnIsEmpty');
});
$.each(filteredRows, function () {
var isEmpty = getHiddenBoolean(filteredRows);
});
})
The first issue you have is that ASP.Net Webforms changes the id of all runat="server" elements at runtime, so you cannot select by them. Even if you could, in this instance you would have duplicates, which is invalid. Instead you could add a class to those elements to identify them.
<tr>
<td>
<udc:HiddenField ID="hdnIsEmpty" runat="server" class="hiddenfield" Value='<%#Eval("IsEmpty") %>' />
</td>
</tr>
From there you can just loop over that class selector, like this:
$(document).ready(function () {
$('#tblDetails tr td .hiddenfield').each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
If you are unable to add a class attribute on the control, you could instead make the selector more generic:
$(document).ready(function () {
$('#tblDetails tr td input:hidden:first').each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
After taking into account the ASP.NET issue mentioned above, another alternative would be:
$(document).ready(function (){
var $hidden = $('.tableClass input.hiddenTouchableElements');
$hidden.each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
I have a div and I have created its clone on a button click. I changed the id of the cloned object and the textbox inside it. Now I want to add text in the cloned textbox. How can I add text into an asp:textbox in multiple lines?
The problem I am getting is, if I use textmode=multiline, nothing is being displayed and if I remove textmode=multiline then text is displaying in the same line.
Please find below my code.
var cloneCount = 1;
$(document).ready(function () {
$("#click").click(function () {
cloneCount = cloneCount + 1;
var clone = $("#dynamicDiv").clone(true);
clone.show();
clone.find('input[type="text"]').attr('id', 'textbox' + cloneCount);
clone.find('input[type="text"]').val("yasir \r\n yasir");
clone.css('display', 'inline-block');
clone.attr('id', 'dynamicDiv' + cloneCount).insertAfter("#dynamicDiv");
clone.appendTo("#divHolderFirstModule");
});
});
$(function () {
$(document).on('click', '.removeDiv', function () {
$(this).closest('div').remove();
});
});
<div ID="dynamicDivFirstModule" >
<%-- Dynamic Div--%>
<div id="dynamicDiv" style="display:none; border:solid;">
<table>
<tr>
<td class="auto-style1" rowspan="2">
<asp:TextBox ID="textbox" TextMode="MultiLine" runat="server" ReadOnly="true" style="overflow:auto;" Height="102px" Width="235px"></asp:TextBox>
</td>
<td id="hoverHere">
<asp:Label ID="Hovar" runat="server" Text="?"></asp:Label>
<p id="hover" class="masterTooltip" onmouseover="Hover();">?</p>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Delete" runat="server" Text="Delete" CssClass="removeDiv"/>
</td>
</tr>
</table>
</div>
<%-- Dynamic Div--%>
</div>
I have a survey, 30+ yes/no questions(radiobutton); if choose no, show textbox to give reason, and this textbox is required if choose no. I can't do it one by one. How to use wildcard and loop to do this.
<tr>
<td>1</td>
<td width="600px">question 1?</td>
<td width="65px">
<asp:RadioButton ID="rdM1Y" runat="server" Text="Yes" GroupName="rdM1" />
<asp:RadioButton ID="rdM1N" runat="server" Text="No" GroupName="rdM1" />
</td>
<td><asp:TextBox ID="txtCM1" runat="server" /></td>
</tr>
<tr>
<td>2</td>
<td width="600px">question 2?</td>
<td width="65px">
<asp:RadioButton ID="rdM2Y" runat="server" Text="Yes" GroupName="rdM2" />
<asp:RadioButton ID="rdM2N" runat="server" Text="No" GroupName="rdM2" />
</td>
<td><asp:TextBox ID="txtCM2" runat="server" /></td>
</tr>
I need validate those textboxs isrequired if they choose no
ok, so:
include jQuery (makes it all way easier):
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add radNo class for all "NO" radio buttons:
<asp:RadioButton class="radNo" ID="rdM2N" runat="server" Text="No" GroupName="rdM2" />
add txtNo class for all textboxes:
<asp:TextBox class="txtNo" ID="txtCM2" runat="server" />
add script:
<script type="text/javascript">
$(function(){
$('.radNo').click(function(){
var c = $(this).is(':checked');
$(this).parents('tr').find('txtNo').toggle(c);
if (c) {
$(this).parents('tr').find('txtNo').focus();
}
});
// validate that there's text if select NO
$('.txtNo').bind('blur', function(){
if ($(this).val().length < 1) {
$(this).focus();
alert('please provide a reason');
}
});
});
</script>
that should do it, hope i understood well and it's helpful.
Generated HTML - note the textarea ID equals the radio button name
<table>
<tr>
<td>1</td>
<td width="600px">question 1?</td>
<td width="65px">
<label><input type="radio" name="rdM1" /> Yes</label>
<label><input type="radio" name="rdM1" class="give_reason" /> No</label>
</td>
<td><textarea id="rdM1" name="rdM1-reason"></textarea></td>
</tr>
</table>
CSS
textarea {display: none;}
Javascript
$(document).on('click', 'input:radio', function(){
el = $('#' + this.name);
($(this).hasClass('give_reason'))? el.show() : el.hide();
});
DEMO
First give no-radiobuttons a common class, for example say it "noRadio". Then, you can listen click events of all radio buttons with this class. Within the event handler function you can find the corresponding text box and show it. My sample code is below:
$(".noRadio").click(function(e) {
// get id of the clicked radio button
var id = $(e.target).attr("id");
// remove "rdM" and "N" from id and get pure question number
id = id.replace("rdM", "").replace("N", "");
// select the corresponding text box by its id, e.g. "#txtCM2" if "#rdM2N" selected
$("#txtCM" + id).show();
});
I tried this approach in my projects and it works.
$(document).on('click', 'input:radio', function(){
$('table').each(function(){
if($('input[type= radio]:checked').val() == no))
{
$('textbox').show();
}
});
});
In my form I am using a AjaxToolkit ModalPopupExtender. The PopupControlId has been set to a panel which has a RadioButtonList and a dropdownlist.The panel which pops up is something like this:
<asp:Panel ID="PopUpWindowPanel" runat="server" Visible="false" BorderStyle="Solid">
<table cellpadding="2" cellspacing="0" width="100%" border="0" class="dataTbl">
<tr>
<td class="left">
<asp:RadioButtonList ID="RdBtnLstSortOptions" runat="server">
<asp:ListItem Text="No change." Selected="True"
Value="None"></asp:ListItem>
<asp:ListItem Text="Some Change."
Value="Existing"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td class="left">
<asp:Label ID="lblList" runat="server">List:</asp:Label>
<asp:DropDownList ID="ddlList" runat="server" Visible="false">
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<div class="divBtn">
<asp:LinkButton ID="btnDone" class="button" runat="server" OnClick="btnDone_Click">OK</asp:LinkButton>
<asp:LinkButton ID="btnCloseProfile" class="button" runat="server">Cancel</asp:LinkButton>
</div>
</td>
</tr>
</table>
</asp:Panel>
Now, What I want is that when user selects the Listitem with Text="Some Change." and Value="Existing", then and only then will dropdownlist with id="ddlList" must show, otherwise it must be hidden. I am populating this list on server-side at page load. AS this is ajaxcontrol i do not want any postbacks, therefore I am trying to handle this with javascript/jquery. I am a beginner with Javascript/Jquery so don't know how to do this properly. I have written some JQuery which is something like this:
function pageLoad()
{
$find('<%= RdBtnLstPresortOptions.ClientID %>').add_selectedIndexChanged(
function (sender, args) {
var selectedValue = $(this).val();
if ($.trim(selectedValue) == 'Existing') {
// show the dropdown list ddlList
}
else { //show the hide the dropdown list ddlList }
});
}
My question is how can I write this jquery/javascript properly so that I can show the dropdownlist upon the selected radio button option. Thanks.
This worked for me.
$("#<%=RdBtnLstPresortOptions.ClientID%>").change(function () {
var rbvalue = $("input[#name=<%=RdBtnLstPresortOptions.UniqueID%>]:radio:checked").val();
if (rbvalue == "Existing") {
$("#<%=ddlList.ClientID%>").css("display", "block");
$("#<%=lblList.ClientID%>").css("display", "block");
} else if (rbvalue == "None") {
$("#<%=ddlList.ClientID%>").css("display", "none");
$("#<%=lblList.ClientID%>").css("display", "none");
} else {
}
});
When you have server control with Visible=False, it not rendered on client at all, so you can not display it. What you can do, is to render it with Visible=true and style="display:none".
Then use:
$find('').add_selectedIndexChanged(
function (sender, args) {
var selectedValue = $(this).val();
if ($.trim(selectedValue) == 'Existing') {
$get('<%= ddlList.ClientID %>').style.display="block";
// show the dropdown list ddlList
}
else { //show the hide the dropdown list ddlList }
});