2 jQuery script on same page

2 jQuery script on same page - javascript

I have 2 jQuery script in one page jQuery Dialog and jQuery slideToggle inside the dialog box, jQuery dialog is working but after hitting button to open jQuery Dialog inside the dialog box there will be a button to slideToggle a div but its not working I tried to move slideToggle outside the dialog and it works. I don't know whats going on inside the dialog box if someone can help me to solve my problem
jQuery Dialog
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
appendTo: "form",
autoOpen: false,
width: 630,
height: 700,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
jQuery slideToggle
<script type="text/javascript">
$(document).ready(function () {
$("#Div1").hide();
$("#Button1").click(function () {
$("#Div1").slideToggle();
return false;
});
});
</script>
dialog div + slideToggle div inside the jQuery dialog
<div id="dialog" title="Classification">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<table align="center" style="margin-top:10px" width="600">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Selected="True">Choose Classification</asp:ListItem>
<asp:ListItem Value="Resident">Resident</asp:ListItem>
<asp:ListItem Value="Business">Business</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<table>
<tr>
<td><div id="divresident" runat="server" visible="false">
<table style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbAddress" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtAddress" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
<td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
<asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
</tr>
<tr>
<td>
<div id="divOccupantProfile" style="display: none">
<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Married</asp:ListItem>
<asp:ListItem>Single</asp:ListItem>
<asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />
<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Wife</asp:ListItem>
<asp:ListItem>Daughter</asp:ListItem>
<asp:ListItem>Son</asp:ListItem>
<asp:ListItem>Father</asp:ListItem>
<asp:ListItem>Mother</asp:ListItem>
<asp:ListItem>House helper</asp:ListItem>
<asp:ListItem>Driver</asp:ListItem>
</asp:DropDownList>
</div>
<div id="holder">
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
<table>
<tr>
<td><div id="divbusiness" runat="server" visible="false">
<table width="600" style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus1" runat="server" Text="Registered Business Name" ></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus3" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus4" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus5" runat="server" Text="Structure"></asp:Label></td>
<td width="300"> </td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus6" runat="server" Text="SEC No./DTI number"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus7" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus8" runat="server" Text="Nature of Business"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus9" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
<div>
<asp:Button ID="Button1" runat="server" Text="+" />
<asp:Label ID="Label1" runat="server" Text="Add Phone"></asp:Label>
<div id="Div1" style="display: none">
<asp:Label ID="Label2" runat="server" Text="Landline work"></asp:Label>
<asp:TextBox ID="TextBox1" class="basetxt" runat="server" ></asp:TextBox><br />
<asp:Label ID="Label3" runat="server" Text="Handphone personal" ></asp:Label>
<asp:TextBox ID="TextBox2" class="basetxt" runat="server"></asp:TextBox><br />
<asp:Label ID="Label4" runat="server" Text="Handphone work"></asp:Label>
<asp:TextBox ID="TextBox3" class="basetxt" runat="server"></asp:TextBox>
</div>
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>

.click won't work on later loaded elements, try it like this, replace:
$("#Button1").click(function () {
With:
$("body").on('click', '#Button1', function() {

Related

Javascript could show hidden div

What needed to achieve is by clicking the preview button (ASP button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed.
In the .aspx
<style>
#PreviewSection {display:none;}
</style>
in the script, (edited to point to btPreview, but still not working... )
<script type="text/javascript">
var previewbt = document.getElementById('btPreview');
previewbt.addEventListener('click',function(){
PreviewSection.style.display = "block";
})
</script>
the html:
<div class ="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>
</asp:Content>

Probably this is what you want:
Edited to add your modification after my first post.
var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
PreviewSection.style.display = "block";
})
var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
PreviewSection.style.display = "none";
InputSection.style.display = "none";
})
var btPreview_Click = function() {
console.log('Do something else for Preview.');
};
var btSubmit_Click = function() {
console.log('Do something else for Submit.');
};
#PreviewSection {
display: none;
}
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>
This will be the solution for ASP:
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>

Display:none is misleading. Its not just not displayed, its not part of the page. So you cannot click on it. Use opacity:
#previewSection{
opacity:0;
}
Heres the right js:
<script type="text/javascript">
var previewsectionID = document.getElementById('PreviewSection');
previewsectionID.addEventListener('click',function(){
previewsectionID.style.opacity = 1; });
</script>

Check if All check box in Panel1 are checked to show a Panel2

I have 2 panels, of checkbox: In Panel1, if all checkbox are checked I need to show Panel2.
I have a HTML and a script but it's not working, I think that I'm missing somthing.
here is my code :
<body>
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text="Enter the Title"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question1" runat="server" Text="Question1"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox1" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question2" runat="server" Text="Question2"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox2" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question3" runat="server" Text="Question3"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox3" name="cb" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Question4" runat="server" Text="Question4"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox4" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<table>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</td>
</tr>
</table>
And this is my script but it's not working
$(document).ready(function () {
$('#CheckBox1').removeAttr('checked');
$('#CheckBox2').removeAttr('checked');
$('#CheckBox3').removeAttr('checked');
$('#CheckBox4').removeAttr('checked');
$('#Panel2').hide();
$('#Panel1').change(function () {
if (this.checked) {
$('#Panel2').show();
}
else {
$('#Panel2').hide();
}
});
});
Help please

Using jQuery you can compare the checked checkboxes vs all checkboxes inside Panel1 like this:
if($("#Panel1 input[type=checkbox]:checked").length === $("#Panel1 input[type=checkbox]").length){
$('#Panel2').show();
}else{
$('#Panel2').hide();
}

jquery not working in user control page

In my project i am using Chosen jQuery plugin for searching dropdownlist
in my Master page end of before body tag put the css and jquery script files
<link href="/assets/css/chosen.css" rel="stylesheet" />
<script src="/assets/css/chosen.jquery.js"></script>
<script src="/assets/css/chosen.jquery2.js"></script>
dropdown list i called class like below sample
<asp:DropDownList ID="Dropworktype" runat="server" ***CssClass="chzn-select"*** AutoPostBack="True" >
<asp:ListItem Value="0">-ఏ పని చేస్తున్నారు-</asp:ListItem>
<asp:ListItem Value="వ్యవసాయ కార్మికులు">వ్యవసాయ కార్మికులు</asp:ListItem>
<asp:ListItem Value="మత్స్య కారులు">మత్స్య కారులు</asp:ListItem>
<asp:ListItem Value="నేత పనివారు ">నేత పనివారు</asp:ListItem>
<asp:ListItem Value="కల్లు గీత కార్మికులు">కల్లు గీత కార్మికులు</asp:ListItem>
<asp:ListItem Value="కుమ్మరి / ఇటుక బట్టి ">కుమ్మరి / ఇటుక బట్టి</asp:ListItem>
<asp:ListItem Value="గొర్రెల కాపరి ">గొర్రెల కాపరి </asp:ListItem>
<asp:ListItem Value="వడ్రంగి / కంసాలి ">వడ్రంగి / కంసాలి</asp:ListItem>
<asp:ListItem Value="చర్మకారులు">చర్మకారులు</asp:ListItem>
<asp:ListItem Value="పూజారి">పూజారి</asp:ListItem>
<asp:ListItem Value="వ్యాపారి ">వ్యాపారి </asp:ListItem>
<asp:ListItem Value="తాపీ మేస్త్రి ">తాపీ మేస్త్రి </asp:ListItem>
<asp:ListItem Value="10">ఇతరములు </asp:ListItem>
</asp:DropDownList>
choosen jquery search working fine in my page. But when i am using same in user control page its not working.
i dont know where is the problem in my page jquery problem or page problem
please help me thanks...
This is my User control page
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Basic-Inser-Details.ascx.cs" Inherits="Grievance.User_Controls.Basic_Inser_Details" %>
<script type="text/javascript">
// WRITE THE VALIDATION SCRIPT IN THE HEAD TAG.
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;
return true;
}
</script>
<link href="../assets/css/chosen.css" rel="stylesheet" />
<script src="../assets/css/chosen.jquery.js"></script>
<script src="../assets/css/chosen.jquery2.js"></script>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<table class="table table-striped table-bordered">
<div class="alert alert-error" id="diverror" runat="server" visible="false">
<caption>
<button class="close" data-dismiss="alert">
×
</button>
<strong style="color:#fff; font-size:16px; font-weight:400; text-shadow:none;">అర్జీదారుడు గతంలో దాకలు చేసిన అర్జీ వివరాలు</strong> <a data-toggle="modal" href="#modal-table" style="color:#94210a; font-size:16px; font-weight:400; text-shadow:none; text-decoration:underline;">కొరకు ఇక్కడ క్లిక్ చేయండి </a>
</caption>
</div>
<div class="alert alert-error" id="Adhererror" runat="server" visible="false">
<button data-dismiss="alert" class="close">×</button>
<strong style="color:#fff; font-size:16px; font-weight:400; text-shadow:none;">అర్జిదారుని వివరాలు ఆధార్ నుండి "101" వచ్చిన యెడల <span style="color:#94210a; font-size:16px; font-weight:400; text-shadow:none; text-decoration:underline;"> ఉంది కాని తిసుకు రాలేదు </span> అనే ఆప్షన్ ఎంచుకోండి </strong>
</div>
<tr>
<td width="21%"><span class="red">*</span> ఆధార్ కార్డు
<asp:RequiredFieldValidator ID="RequiredFieldValidator16" CssClass="error" SetFocusOnError="true" ControlToValidate="aadhaselection"
runat="server" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator15" CssClass="error" SetFocusOnError="true" ControlToValidate="aadhaselection"
runat="server" ValidationGroup="aadharinfo"></asp:RequiredFieldValidator>
</td>
<td width="2%">:</td>
<td colspan="3">
<asp:RadioButtonList ID="aadhaselection" runat="server" CssClass="border" ValidationGroup="basicinfo" AutoPostBack="true" OnSelectedIndexChanged="aadhaselection_SelectedIndexChanged" RepeatDirection="Horizontal">
<asp:ListItem Value="1">ఉంది</asp:ListItem>
<asp:ListItem Value="2"> ఉంది కానీ తీసుకురాలేదు</asp:ListItem>
<asp:ListItem Value="3">నమోదుచేసుకోలేదు</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr id="trtxtaadhar" runat="server" visible="false">
<td><span class="red">*</span> ఆధార్ నంబర్:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtAdherno" CssClass="error" SetFocusOnError="true"
runat="server" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" controltovalidate="txtAdherno" CssClass="error" SetFocusOnError="true" validationexpression="^[0-9]{12}$" ValidationGroup="basicinfo"></asp:RegularExpressionValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" controltovalidate="txtAdherno" CssClass="error" SetFocusOnError="true" validationexpression="^[0-9]{12}$" ValidationGroup="aadharinfo"></asp:RegularExpressionValidator>
</td>
<td>:</td>
<td width="25%">
<asp:TextBox ID="txtAdherno" CssClass="form-control" MaxLength="12" ValidationGroup="basicinfo" runat="server"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
TargetControlID="txtAdherno"
FilterType="Numbers" />
</td>
<td colspan="2">
<asp:Button ID="btbaadher0" runat="server" class="btn btn-success" OnClick="btbaadher_Click" Text="ధృవీకరించండి" ValidationGroup="aadharinfo" />
</td>
</tr>
</table>
<table id="aadhartable" runat="server" class="table table-bordered" visible="false">
<tr>
<td align="center" colspan="9" style="background: #5c7399; color: #fff;">అర్జీదారు వివరాలు</td>
</tr>
<tr>
<td width="14%"><span class="red">*</span> అర్జీదారుని పేరు
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtname" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td width="2%">: </td>
<td width="26%">
<asp:TextBox ID="txtname" runat="server" CssClass="telugu form-control" Visible="false"></asp:TextBox>
<asp:Label ID="lblname" runat="server" Visible="false"></asp:Label>
</td>
<td width="12%"><span class="red">*</span> c/o పేరు
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtcareof" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td width="2%">:</td>
<td width="28%">
<asp:TextBox ID="txtcareof" runat="server" CssClass="telugu form-control" Visible="false"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Visible="false"></asp:Label>
</td>
<td rowspan="6" align="center" valign="top" style="width:150px;">
<asp:Image ID="imgpic" runat="server" Style="height: 155px; width: 130px;" />
<asp:HiddenField ID="hdnpic" runat="server" />
</td>
</tr>
<tr>
<td><span class="red">*</span> వయస్సు
<asp:RegularExpressionValidator ID="revage" runat="server" controltovalidate="txtage" CssClass="error" SetFocusOnError="true" validationexpression="^[0-9]{2}$" ValidationGroup="basicinfo"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtage" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:TextBox ID="txtage" runat="server" MaxLength="2" CssClass="form-control" onkeypress="javascript:return isNumber (event)" Visible="false"></asp:TextBox>
<asp:Label ID="lblage" runat="server" Visible="false"></asp:Label>
</td>
<td><span class="red">*</span> లింగము
<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="ddlgender" CssClass="error" InitialValue="0" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:DropDownList ID="ddlgender" Visible="false" runat="server">
<asp:ListItem Value="0">లింగము</asp:ListItem>
<asp:ListItem Value="1">పురుషుడు</asp:ListItem>
<asp:ListItem Value="2">స్త్రీ</asp:ListItem>
<asp:ListItem Value="3">ఇతరులు</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblgender" runat="server" Visible="false"></asp:Label>
</td>
</tr>
<tr>
<td><span class="red">*</span> జిల్లా
<asp:RequiredFieldValidator ID="RequiredFieldValidator19" runat="server" ControlToValidate="ddlditric" CssClass="error" InitialValue="-జిల్లా-" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td> <td>:</td>
<td>
<asp:DropDownList ID="ddlditric" Visible="false" OnSelectedIndexChanged="ddlditric_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
<asp:Label ID="lbldistric" runat="server" Visible="false"></asp:Label>
<asp:HiddenField ID="hidndistricid" runat="server" />
<asp:HiddenField ID="hdpincode" runat="server" />
</td>
<td><span class="red">*</span> మండలం
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="dropmandal" CssClass="error" InitialValue="-మండలం-" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:DropDownList ID="dropmandal" runat="server" AutoPostBack="True" CssClass="form-control" OnSelectedIndexChanged="dropmandal_SelectedIndexChanged" Visible="false"></asp:DropDownList>
<asp:Label ID="lblmandal" runat="server" Visible="false"></asp:Label>
<asp:LinkButton ID="lnkmandal" runat="server" OnClick="lnkmandal_Click"><img width="22" src="/images/edit-btn2.png" /></asp:LinkButton>
</td>
</tr>
<tr>
<td><span class="red">*</span> పంచాయతి / టౌన్ :
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="droptwon" CssClass="error" InitialValue="-రెవెన్యూ గ్రామం-" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:DropDownList ID="droptwon" runat="server" CssClass="form-control" Visible="false"></asp:DropDownList>
<asp:Label ID="lbltown" runat="server" Visible="false"></asp:Label>
<asp:LinkButton ID="lblpancht" runat="server" OnClick="lblpancht_Click"><img width="22" src="/images/edit-btn2.png" /></asp:LinkButton>
</td>
<td><span class="red">*</span> హాబిటేషను
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="txthabitation" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:TextBox ID="txthabitation" runat="server" CssClass="telugu" Visible="false"></asp:TextBox>
<asp:Label ID="lblhabitation" runat="server" Visible="false"></asp:Label>
</td>
</tr>
<tr>
<td><span class="red">*</span> బిల్డింగ్ నం
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtbuildno" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:TextBox ID="txtbuildno" runat="server" CssClass="form-control" Visible="false"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="ftbe" runat="server"
TargetControlID="txtbuildno"
FilterType="LowercaseLetters, UppercaseLetters,Custom, Numbers" ValidChars="-/"/>
<asp:Label ID="lblbuilding" runat="server" Visible="false"></asp:Label>
</td>
<td><span class="red">*</span> వృత్తి
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" ControlToValidate="Dropworktype" CssClass="error" InitialValue="0" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:DropDownList ID="Dropworktype" runat="server" CssClass="chzn-select" AutoPostBack="True" >
<asp:ListItem Value="0">-ఏ పని చేస్తున్నారు-</asp:ListItem>
<asp:ListItem Value="వ్యవసాయ కార్మికులు">వ్యవసాయ కార్మికులు</asp:ListItem>
<asp:ListItem Value="మత్స్య కారులు">మత్స్య కారులు</asp:ListItem>
<asp:ListItem Value="నేత పనివారు ">నేత పనివారు</asp:ListItem>
<asp:ListItem Value="కల్లు గీత కార్మికులు">కల్లు గీత కార్మికులు</asp:ListItem>
<asp:ListItem Value="కుమ్మరి / ఇటుక బట్టి ">కుమ్మరి / ఇటుక బట్టి</asp:ListItem>
<asp:ListItem Value="గొర్రెల కాపరి ">గొర్రెల కాపరి </asp:ListItem>
<asp:ListItem Value="వడ్రంగి / కంసాలి ">వడ్రంగి / కంసాలి</asp:ListItem>
<asp:ListItem Value="చర్మకారులు">చర్మకారులు</asp:ListItem>
<asp:ListItem Value="పూజారి">పూజారి</asp:ListItem>
<asp:ListItem Value="వ్యాపారి ">వ్యాపారి </asp:ListItem>
<asp:ListItem Value="తాపీ మేస్త్రి ">తాపీ మేస్త్రి </asp:ListItem>
<asp:ListItem Value="10">ఇతరములు </asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtoccupation" runat="server" CssClass="telugu form-control" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td><span class="red">*</span> ఫోను. నం
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="txtmoble" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="txtmobilevalidation" runat="server" controltovalidate="txtmoble" CssClass="error" SetFocusOnError="true" validationexpression="^[0-9]{10}$" ValidationGroup="basicinfo"></asp:RegularExpressionValidator>
</td>
<td>:</td>
<td>
<asp:TextBox ID="txtmoble" runat="server" CssClass="form-control" visible="false" MaxLength="10" onkeypress="javascript:return isNumber (event)" AutoPostBack="True" OnTextChanged="txtmoble_TextChanged"></asp:TextBox>
<br /> <asp:RegularExpressionValidator ID="RegularExpressionValidator12" runat="server" ControlToValidate="txtmoble" ErrorMessage="సరైన నంబరు ఇవ్వగలరు" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo" ValidationExpression="^[7-9][0-9]{9}$"></asp:RegularExpressionValidator>
<asp:Label ID="lblmobile" runat="server" Visible="false"></asp:Label>
<asp:LinkButton ID="hyperedit" runat="server" Visible="false" OnClick="hyperedit_Click"><img width="22" src="/images/edit-btn2.png" /></asp:LinkButton>
</td>
<td>ఓటరు కార్డ్ నం.<%--(EPIC)--%></td>
<td>:</td>
<td><asp:TextBox ID="txtvoter" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>E-mail ID</td>
<td>:</td>
<td>
<asp:TextBox ID="txtmailid" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator
ID="regtxtmailid"
runat="server" CssClass="error"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ControlToValidate="txtmailid"
ErrorMessage="దయచేసి మీ E-mailid సరిచుసుకోండి!"
>
</asp:RegularExpressionValidator>
</td>
<td><span class="red">*</span> కులం
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="RadioButtonList3" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td colspan="2">
<asp:RadioButtonList ID="RadioButtonList3" runat="server" CssClass="border" RepeatDirection="Horizontal">
<asp:ListItem>ఎస్.సి.</asp:ListItem>
<asp:ListItem>ఎస్.టి.</asp:ListItem>
<asp:ListItem>బి.సి.</asp:ListItem>
<asp:ListItem>మైనారిటీ.</asp:ListItem>
<asp:ListItem>ఇతరులు.</asp:ListItem>
</asp:RadioButtonList> </td>
</tr>
<tr>
<td><span class="red">*</span> అర్జీ కేటగిరి <asp:RequiredFieldValidator ID="RequiredFieldValidator2" InitialValue="0" ControlToValidate="ddlcate" CssClass="error" SetFocusOnError="true"
runat="server" ValidationGroup="basicinfo"></asp:RequiredFieldValidator> </td>
<td>:</td>
<td>
<asp:DropDownList ID="ddlcate" runat="server" OnSelectedIndexChanged="ddlcate_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="0">అర్జీ కేటగిరి</asp:ListItem>
<asp:ListItem Value="1">వ్యక్తి గతం–ఆర్ధికం </asp:ListItem>
<asp:ListItem Value="2">వ్యక్తి గతం–ఆర్ధికేతరం</asp:ListItem>
<asp:ListItem Value="3">సామాజికం- ఆర్ధికం</asp:ListItem>
<asp:ListItem Value="4">సామాజికం- ఆర్ధికేతరం</asp:ListItem>
</asp:DropDownList>
</td>
<td>కాలపరిమితి
</td>
<td>:</td>
<td colspan="2"><asp:Label runat="server" ID="lbltimescale" Text="0" ></asp:Label> <asp:Label ID="lbltext" runat="server" Text="రోజులు"></asp:Label>
</td>
</tr>
<tr >
<td> వార్షిక ఆదాయం
</td>
<td>:</td>
<td colspan="6"> <asp:RadioButtonList ID="rbnewfinance" runat="server" CssClass="border" RepeatDirection="Horizontal">
<asp:ListItem>60,000 లోపు</asp:ListItem>
<asp:ListItem>60,000 -75,000</asp:ListItem>
<asp:ListItem>75,000 పైబడి</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr runat="server" id="traadhernote" visible="false">
<td> <span class="red">*</span> ఆధార్ చిరునామాలో మార్పు ఉందా?
<asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ControlToValidate="rbincome" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td colspan="6">
<asp:RadioButtonList ID="rbincome" runat="server" CssClass="border" RepeatDirection="Horizontal" AutoPostBack="True" OnSelectedIndexChanged="rbincome_SelectedIndexChanged">
<asp:ListItem Value="1">ఉంది </asp:ListItem>
<asp:ListItem Value="2" >లేదు</asp:ListItem>
</asp:RadioButtonList> </td>
</tr>
</table>
<table runat="server" id="trprathuthanivasam" visible="false" class="table table-bordered">
<tr>
<td width="21%"> <span class="red">*</span> జిల్లా
<asp:RequiredFieldValidator ID="RequiredFieldValidator23" runat="server" ControlToValidate="ddlprentdistric" CssClass="error" InitialValue="-జిల్లా-" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td width="2%">:</td>
<td width="22%">
<asp:DropDownList ID="ddlprentdistric" OnSelectedIndexChanged="ddlprentdistric_SelectedIndexChanged" AutoPostBack="True" runat="server"></asp:DropDownList></td>
<td width="13%"> <span class="red">*</span> మండలం
<asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" ControlToValidate="dropPramandal" CssClass="error" InitialValue="-మండలం-" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td width="2%">:</td>
<td>
<asp:DropDownList ID="dropPramandal" runat="server" AutoPostBack="True" CssClass="form-control" OnSelectedIndexChanged="dropPramandal_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td> <span class="red">*</span> పంచాయతి / టౌన్ :
<asp:RequiredFieldValidator ID="RequiredFieldValidator17" runat="server" ControlToValidate="DroppraTown" CssClass="error" InitialValue="-రెవెన్యూ గ్రామం-" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:DropDownList ID="DroppraTown" runat="server" CssClass="form-control">
</asp:DropDownList>
</td>
<td> <span class="red">*</span> హాబిటేషను
<asp:RequiredFieldValidator ID="RequiredFieldValidator20" runat="server" ControlToValidate="txtprahabitation" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td>
<asp:TextBox ID="txtprahabitation" runat="server" CssClass="telugu form-control"></asp:TextBox>
</td>
</tr>
<tr>
<td><span class="red">*</span> బిల్డింగ్ నం
<asp:RequiredFieldValidator ID="RequiredFieldValidator22" runat="server" ControlToValidate="txtbuilding" CssClass="error" SetFocusOnError="true" ValidationGroup="basicinfo"></asp:RequiredFieldValidator>
</td>
<td>:</td>
<td colspan="4">
<asp:TextBox ID="txtbuilding" runat="server" CssClass="form-control"></asp:TextBox><cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server"
TargetControlID="txtbuilding"
FilterType=" LowercaseLetters, UppercaseLetters,Custom, Numbers" ValidChars="-/"/>
</td>
</tr>
</table>
<div id="modal-table" class="modal hide fade">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal">×</button>
దాకలు చేసిన అర్జీ వివరాలు
</div>
</div>
<div class="modal-body no-padding">
</div>
<div class="modal-footer">
<button class="btn btn-small btn-danger pull-left" data-dismiss="modal">
<i class="icon-remove"></i>
Close</button>
</div>
</div>

On each different page that you open in a browser you have to include the plugin and (before calling the plugin) jquery library too. So if your master page and user control page are two differnt pages just replicate the same headers in both.
<link href="/assets/css/chosen.css" rel="stylesheet" />
<script src="/assets/css/chosen.jquery.js"></script>
<script src="/assets/css/chosen.jquery2.js"></script>
Also note that, based on the directory structure of your page, if the user control page is not in the same folder of the master page you will need to adapt the path to the included files.

showing two repeaters at the same div but once at a time

I would like to show to two different repeaters in same div but once at a time.
<div id="tab1" class="tab_content">
<div class="comment1">
<div class="comments_header">Our Previous Comments</div>
<div class="prev_comments">
<asp:Panel ID="Panel2" runat="server">
<asp:Repeater ID="rptcomment" runat="server" >
<HeaderTemplate>
<table style="background-color:antiquewhite; width:600px; cellpadding="0" >
<tr >
<td colspan="2"></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:5px; border-bottom:dotted" >
<img src="../images/prople.jpg" style="height: 77px; width: 72px" />
</td>
<td style=" border-bottom:dotted">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("fullname") %>' />
on
<asp:Label ID="Label2" runat="server" Text='<%#Eval("datetime") %>' Font-Bold="true"/>
<br />
<asp:Label ID="lblcomment" runat="server" Text='<%#Eval("comment") %>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" Height="457px" Width="607px">
<asp:Repeater ID="RepterDetails" runat="server" >
<HeaderTemplate>
<table style="background-color:darkturquoise; width:600px; cellpadding="0">
<tr >
<td colspan="2">
<center> <b>Our Previous Comments</b></center>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:5px; border-bottom:dotted" >
<img src="http://localhost:1411/images/prople.jpg" style="height: 77px; width: 72px" />
</td>
<td style=" border-bottom:dotted">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("fullname") %>' />
on
<asp:Label ID="Label2" runat="server" Text='<%#Eval("datetime") %>' Font-Bold="true"/>
<br />
<asp:Label ID="lblcomment" runat="server" Text='<%#Eval("comment") %>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
<center>
<asp:Label ID="Label1" runat="server" Font-Bold="True" />
<asp:HyperLink ID="linkPrev" runat="server">Previous Page</asp:HyperLink>
<asp:HyperLink ID="linkNext" runat="server">Next Page</asp:HyperLink>
</center>
<div class="clear"></div>
</div>
</div>
</div>
In the above code when first page loads I would like to show repeater which are in panel2 and when user clicks on link previous comment I would like to show repeater of panel1 only but in the same div and same page.How to solve this problem?

Since you have each repeater inside an asp:Panel, this will be as easy as set the Visible attribute of the pertinent panel to false.
You can also archive this by using CSS styles with display: none; or visibility: hidden.

Button is not working after I used jQuery Dialog

I want to make a registration form using jquery dialog but after I used jQuery Dialog and clicked the button to open the form the #btnsubmit Button doesn't work, before it's working can someone help me in my problem I have been trying to find the answer for like 2 days now and couldn't find the answer and I am newbie at all :P
js
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 630,
height: 630,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
html
<div id="dialog" title="Add/Edit User">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<div class="formrow">
<table>
<tr>
<td><label for="firstname">First Name</label></td>
<td><asp:TextBox ID="txfirstname" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rfvfirstname" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txfirstname" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="lastname">Last Name</label></td>
<td><asp:TextBox ID="txlastname" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvflastname" runat="server" ForeColor="Red" ErrorMessage="Required" Display="Dynamic" ControlToValidate="txlastname" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="address">Address</label></td>
<td><asp:TextBox ID="txaddress" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rfvaddress" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txaddress" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="age">Age</label></td>
<td><asp:TextBox ID="txage" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvfage" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txage" style="margin-left:20px" />
<asp:RegularExpressionValidator ID="revage" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Not Valid" ControlToValidate="txage" ValidationExpression="^[1-9]\d{0,2}$" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="mobile">Mobile #</label></td>
<td><asp:TextBox ID="txmobile" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvfmobile" runat="server" Display="Dynamic" ForeColor="Red" ErrorMessage="Required" ControlToValidate="txmobile" style="margin-left:20px" />
<asp:RegularExpressionValidator ID="revmobile" runat="server" ForeColor="Red" ErrorMessage="Not Valid" Display="Dynamic" ControlToValidate="txmobile" ValidationExpression="^\d{11}" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div id="btnc2">
<asp:Button ID="btnsubmit" runat="server" class="submitbtn" Text="Submit" onclick="btnsubmit_Click" style="margin-left: 10px" />
<asp:Button ID="btnreset" runat="server" class="submitbtn" Text="Reset"
style="margin-left: 30px" onclick="btnreset_Click" CausesValidation="false" />
</div></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Button Add New
<asp:Button ID="btnaddnew" runat="server" class="submitbtn" Text="Add New"
style="margin-left: 10px; margin-top: 10px" onclick="btnaddnew_Click" CausesValidation="false" />

You should use jQuery .on method to assign a click handler to the button element. Here is how the should look like:
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 630,
height: 630,
draggable: false,
resizable: false,
modal: true
});
$("#dialog").on('click', '#btnaddnew', function () {
$("#dialog").dialog("open");
return false;
});
});

We Keep Coding

JavaScript is the programming language of the Web.

2 jQuery script on same page - javascript

.click won't work on later loaded elements, try it like this, replace: $("#Button1").click(function () { With: $("body").on('click', '#Button1', function() {

Related

Javascript could show hidden div

Check if All check box in Panel1 are checked to show a Panel2

jquery not working in user control page

showing two repeaters at the same div but once at a time

Button is not working after I used jQuery Dialog

Categories

Resources