$(function () {
$('a.detials').on('click', function (ev) {
$(this).next('div').toggle();
});
});
the issue here is i want to toogle the div when anchor tag click .but i have the problem with my code i don't what is wrong.i search on google to reach to this result and when i click on the anchor tag the div not open ,i need help .
$( function () {
$('a.detials').on('click', function() {
$('+ div', this).toggle();``
});
});
<asp:DataList ID="dtlRoomsPrice" Visible="false" orizontalAlign="center" runat="server" ShowFooter="False" ShowHeader="False" Width="700px" OnItemDataBound="dtlRoomsDetails_ItemDataBound">
<ItemTemplate>
ShowDetails
<div class="shoow" id="div_ID" style="width:687px;height:110px;background-color:rgb(247,239, 216);border-radius: 5px;box-shadow: 7px 6px 5px #888888; border: 2px solid gray; display:none;padding: 5px; ">
<asp:Label ID="lblAmiintiesTxt" runat="Server" CssClass="shbe_label" Text="<%$ Resources:Resource,Amenities %>" Visible="false"></asp:Label>
<asp:Label ID="lblAmiinties" runat="Server" CssClass="shbe_h2" Text='<%# Eval("Amenities") %>' Visible="true"></asp:Label>
</div>
</ItemTemplate>
</asp:DataList>
Because there's no click handler assigned for the first click. This is what's happening:
User clicks on element
Function togglee is invoked
A click handler is assigned to element
User clicks on element again
Click handler is invoked (what you wanted to happen in the first click)
(Also, another click handler is added by invoking togglee again. Which is definitely not what you want.)
I'm not sure why you're using this togglee function, but you don't need it. Remove the inline JavaScript from the element:
ShowDetails
and assign the click handler when the page loads:
$(function () {
$('a.detials').on('click', function() {
$('+ div', this).toggle();
});
});
Then the first click on that element (and any subsequent click) will invoke that click handler.
Related
ASP Upload File control doesn't Load Files and on change not working when click event triggered by button click in jQuery
$(document).ready(function () {
$(".cslbImportProjExcel").on("click", function () {
$('.csfuProjectsExcel').trigger('click');
});
$('.csfuProjectsExcel').on("change", function () {
$('.csLinkButton1').trigger('click');
});
});
<asp:LinkButton ID="lbImportProjExcel" CssClass="cslbImportProjExcel" runat="server" ToolTip="Import Excel">
<img alt="" src="../Images/xls-import.png" />
</asp:LinkButton>
<asp:FileUpload runat="server" ID="fuProjectsExcel" CssClass="csfuProjectsExcel"/>
<asp:LinkButton ID="LinkButton1" Text="test" CssClass="csLinkButton1" runat="server" OnClick="lbExportProjExcel_Click">
</asp:LinkButton>
I have used bPopup as jquery plugin.link is :http://www.jqueryscript.net/lightbox/Lightweight-jQuery-Modal-Popup-Plugin-bPopup.html
this is the gridview with a button field.
<asp:GridView ID="gvwData" runat="server"
AllowPaging="True" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField HeaderText="preview">
<ItemTemplate>
**<asp:Button id="mybutton" runat="server" Text="click"/>**
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle Width="220px" />
</asp:GridView>
This is the JavaScript Function :
<script type="text/javascript">
$(document).on("click", "[id*=mybutton]", function(e) {
e.preventDefault();
**$('#elementtopopup').bPopup();**
}); (jQuery);
</script>
$('#elementtopopup').bPopup() not showing. Below is a screenshot of the error I'm getting.
Screenshot of the console error
I think your selector is wrong for the button, should be:
$(document).on("click", "[id$='mybutton']", function(e) {
// code
});
Web forms suffixes the id with your specified id rather than prefixes it which your selector is looking for.
Add the plugin to the bottom of your page
<script src="jquery.bpopup-0.8.0.min.js"></script>//change it to the path of the js file
I have a function to close a modal:
function closeModal(name) {
$(name).modal('hide');
}
But, my page also has an update panel and I need to trigger it.
I tried __doPostBack('UpdatePanel1', '') with no luck.
Thanks
The problem is this:
$(document).ready(function () {
createAutoClosingAlert('.success_alert', 6000);
if(<%# IsAPostBack() %>){
if(window.parent != null){
window.parent.closeEditModal();
window.parent.closeCalendarModal();
window.parent.closeModal('#projectModal');
window.parent.closeModal('#scheduleModal');
}
}
});
I call it from the parent so I cannot get the hidden ID.
One option is to put a hidden button inside your update panel
<div style="display:none">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
Then call the following in your script
document.getElementById('<%=Button2.ClientID%>').click();
The button click will cause a postback.
You can also look at Page.GetPostBackEventReference
I have a div which contains more than 50 input submit button. I want to implement a live filtering as done in Data Tables, the problem is i cannot keep my submit buttons inside tables, so can anyone suggest some approach, so that i can filter those input buttons as i enter something in the search text box.
Also these input submit buttons are generated by c# coding inside a panel.
i tried with jquery.livesearch
Jquery
$('#searchbox').search('(".btn-pr").attr("value")', function (on) {
on.reset(function () {
$('.btn-pr').show();
});
on.empty(function () {
$('#lblemp').show();
});
on.results(function (results) {
$('.btn-pr').hide();
results.show();
});
});
but as this one was used for number of li's inside ul, the selector passed in the search function was #names li, what selector and how (in place of (".btn-pr").attr("value")) should i pass so that it searches the values of those submit buttons, and hides which doesnt match.
aspx
<div id="div_items2" style="float:right; margin-top:10px; width:500px; height:400px; margin-right:5px; overflow:auto;">
<asp:Panel runat="server" ID="pnlCategories">
<center><asp:Label ID="Label8" runat="server" Text="Estimate"></asp:Label></center><br />
</asp:Panel>
<asp:Panel runat="server" ID="pnlProducts" Visible="false" Width="100%">
<center><asp:Label ID="Label5" runat="server" Text="Estimate | Category: "></asp:Label><asp:Label ID="lblCategory" runat="server" Text=""></asp:Label></center>
<asp:Button ID="btnBack" runat="server" Text="Back" onclick="btnBack_Click" CssClass="btn-nav" /><br /><br />
</asp:Panel>
</div>
pnlProducts panel is generated with those input buttons during run.
<script type="text/javascript">
$(function () {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" class="datePicker" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="holder" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddl_RespondBy" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged">
<asp:ListItem Selected="True">1 Hour</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txt_RespondBy" class="datePicker" Visible="true" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddl_RespondBy.SelectedItem.Text == "Other")
{
txt_RespondBy.Visible = true;
}
else
{
}
}
I do partial post back with the update panel, I have two text box one outside update panel and one inside, when I select other from the dropdown and try to open the calendar inside the txt_RespondBy text box it doesn't show, but the text box outside update panel shows the calendar. why is Javascript not working inside update panel after partial postback
Place your datetimepicker initialisation code in the pageLoad function, which is called whenever the page loads (asynchronously or synchronously).
<script type="text/javascript">
function pageLoad(sender, args) {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}
</script>
You can use pageLoad or .live:
Reference info:
$(document).ready() and pageLoad() are not the same
.live:
Jquery .live works but not with .datepicker
$(function(){
$('.datePicker').live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
pageLoad():
function pageLoad(sender, args) {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}
I understand this is a old question but then also I am posting one more answer here if someone visit this page now or in later times for help.
one can use
$(document).on()
as it makes sure that controls bind to the events whenever page loads. Its job is Similar to page load event but you can say syntax is different. And almost for anything and everything this works. I have more than 50 controls in a panel and all to perform different task and I never got into trouble.. not even once as i was using this function.
$(document).on('eventName', 'element' , function(){
//your code to perform some task;
});
eventName can be any event - like click, change, select..
And
Element - can be a name, classname, id
example - as above question -
html -
<script src="lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<input type="text" class="datePicker" data-provide="datepicker-inline" data-date-format="mm/dd/yyyy">
Javascript -
$(function(){
$(document).on('click', '.datePicker' , function(){
$(this).datepicker();
});
});