<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();
});
});
Related
I have a problem, I would like to add some records to database but when I'm clicking on submit button, nothing done.
Some functions for submit button:
protected void rezerwujButton_Click(object sender, EventArgs e)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
Some forms in html:
<div id="dialog" title="Rezerwacja">
<asp:Panel ID="panel3" runat="server">
<asp:TextBox ID="imieTextBox" runat="server" placeholder="Imię"></asp:TextBox>
<asp:TextBox ID="nazwiskoTextBox" runat="server" placeholder="Nazwisko"></asp:TextBox>
<asp:TextBox ID="emailTextBox" runat="server" TextMode="Email" placeholder="Email"></asp:TextBox>
<asp:TextBox ID="telefonKomorkowyTextBox" runat="server" TextMode="Phone" placeholder="Telefon kom."></asp:TextBox>
<div id="plansza"></div>
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</asp:Panel>
In this form there is a popup window.
I can't understand because before I have code in many forms and everything was alright but now unfortunately no... What's wrong with that code?
I'll add some jquery code, that open the window form:
$(document).ready( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
Try also using onclient click on your existing button.
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClientClick="clientClick();" />
Then create a hidden button with the rezerwujButton_Click function you've already built.
<asp:Button id="hidButton" runat="server" style="visibility: hidden; display: none;" onclick="rezerwujButton_Click" />
Create the following javascript function to trigger the post back on the hidden button.
function clientClick(){
__doPostBack('<%#hidButton.UniqueId %>');
}
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 know that this issue is common however in my case, I'm involving a javascript so that could be the problem. Here's what I'm doing. I'm calling the asp FileUpload to allow the user to select an image. Then by calling the onchange event, I'm firing a javascript which in turn makes a hidden div become visible. The div contains a Confirm button, which then fires the upload function:
<div class="profile-page-owner-profile-pic">
<asp:FileUpload ID="profile_pic_input" onchange="profilenewimageinput(this)" runat="server"></asp:FileUpload>
</div>
Hidden Div:
<div id="profile-change-profile-pic-bg-overlay-div">
<div class="profile-change-profile-pic-bottom-bar">
<asp:Button ID="picApply" class="cropButton" runat="server" OnClick="picApply_Click" Text="Button" />
<span class="profile-page-cancel-crop-button" onclick="hideprofilepicwindow()">Cancel</span>
</div>
</div>
JS:
function profilenewimageinput() {
document.getElementById("profile-change-profile-pic-bg-overlay-div").style.display = "block";
setTimeout(function () {
document.getElementById("profile-change-profile-pic-bg-overlay-div").style.opacity = 1;
}, 100);
}
Code behind:
protected void picApply_Click(object sender, EventArgs e)
{
if (profile_pic_input.HasFile) //always returns false when debugged
{
//Code
}
}
Why is my HasFile always returning False even when an Image is selected?
Try putting it in an <asp:UpdatePanel> with an appropriate Trigger setup. The following may work, but I'm not in a place to test:
<div class="profile-page-owner-profile-pic">
<asp:UpdatePanel ID="UploadPanel" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="picApply" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="profile_pic_input" onchange="profilenewimageinput(this)" runat="server" />
</ContentTemplate>
</UpdatePanel>
</div>
I am new to Javascript. My req is to not show the pop up if i get list from server side as empty list. Before this requirement i was doing something like below code where as soon as user hits the URL, the popup comes as i have used window.onload . Now the requirement got changed and i need to show pop up only when there is some data from backend. Please help me on this.
<script>
window.onload = function () {
$('#homePopup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 550,
transition: 'slideDown'
})
}
</script>
<div id="homePopup"><span class="buttonCloseModal b-close"><span>X</span></span>
<h1>Notifications</h1>
<div class="ListContainerScroll">
<div>
<asp:Repeater ID="rptrNotification" runat="server" OnItemDataBound="rptrNotification_ItemDataBound">
<ItemTemplate>
<div>
<asp:Literal ID="litNotificationTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Literal>
</div>
<div>
<asp:Literal ID="litNotificationDesc" runat="server" Text='<%# ((SPListItem)Container.DataItem)["NotificationDescription"] %>'></asp:Literal>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="noDataAvailable" runat="server" id="divNoDataAvailable" visible="false"></div>
</div>
</div>
</div>
I am doing this code in .ascx
A piece of code you have put inside function of the onload event of the window you are going to put inside ajax success callback (i guess you are requesting data with jQuery ajax)
$.ajax({
url: 'http://myawesomeurl.net',
success: function (ajaxResponse) {
//your code start
$('#homePopup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 550,
transition: 'slideDown'
})
);
//your code end
}
});
I have a jQuery 'toggle' function on a table that I am using in conjunction with an asp.net gridview. I have pagination on my gridview and when I click on the next page, it posts back and therefore closes the Toggle/Table - I need a way of keeping it open. I have had a similar issue in the past with the Accordion function but resolved it via this method and wondered if one of you jQuery/Javascript geniuses could help:
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
</script>
<div id="accordion">
<h3>Table Header 1 here</h3>
<div>
Some text here
</div>
<h3>Table Header 2 here</h3>
<div>
Here is my current code that I have the issue with:
<div class="box grid_16 round_all">
<h2 class="box_head grad_colour round_top">Client List</h2>
<div class="toggle_container" style="display:none;">
<asp:Label ID="LBLMessage" runat="server" />
<asp:GridView ID="gvClients" runat="server" CssClass="static" AutoGenerateColumns="true" AllowPaging="true" Visible="true" />
</div>
</div>
and here is the jQuery:
// Content Box Toggle Config
$("a.toggle").click(function(){
$(this).toggleClass("toggle_closed").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
Thanks in advance!
Try this:
$(function () {
$("a.toggle").click(function () {
$(this).toggleClass("toggle_closed").next().slideToggle("slow", function () {
if($(this).is(':visible')){
$('#<%=hidAccordionIndex.ClientID %>').val("1");
}
else{
$('#<%=hidAccordionIndex.ClientID %>').val("0");
}
});
return false; //Prevent the browser jump to the link anchor
});
var val = $('#<%=hidAccordionIndex.ClientID %>').val();
if (val == "1") {
$("a.toggle").click();
}
});
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
Update 1:
Check this test page. GV paging isn't functional but it does simulate the scenario. Let me know in terms of this example how it differs from what you are expecting.
Wondering if you want to use UpdatePanel and see if that helps.