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
}
});
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 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've got the following jQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#Panel1").animate
({ width: "1000px", fontSize: "65px" }, 3000);
});
});
</script>
When i click on the Button some code is going to execute and its going to retrieve a value inside the panel
"so far every thing works fine"
now it's the time for my jQuery code to execute, but when the panel starts to expand the page is refreshing and the jQuery code stop working.
here is my HTML code
<div class="myclass">
<h1><img id="pic" src="PIC/Capture.PNG" width="100px" hight="100px" /> Company Name</h1>
<p>This awards are for the hard working staff bla bla bla bla bla bla bla bla bla bla, still <asp:Label ID="Label4" runat="server" Text="20"></asp:Label> trophy</p>
<br />
<asp:Button ID="Button1" runat="server" Text="wineer" OnClick="Button1_Click" class="btn btn-primary btn-large" Width="127px" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Congratulations"></asp:Label>
<div class="aa"><asp:Panel ID="Panel1" runat="server"><asp:Label ID="Label2" runat="server" Text=""></asp:Label></asp:Panel></div>
<asp:Label ID="Label3" runat="server" Text="You've won the trophy"></asp:Label>
<br />
</div>
How can I make the jQuery code work?
Please advise
As you want to execute some javascript after button click event, i would suggest, use RegisterStartupScript in button_click event . Reason, this button will always going to postback / form submit, and there is some server side code that will be executed for this button click. So it makes sense to call JS in button_click via RegisterStartupScript.
Wrap the button click ( JS side code) into a function. Like this.
function AfterButtonClick(){
$("#Panel1").animate
({ width: "1000px", fontSize: "65px" }, 3000);
}
In server side, button click, use following.
Page.ClientScript.RegisterStartupScript(typeof(Page), "script", "AfterButtonClick();", true);
With the limited info.
I would say you need to make sure autopostback is not set to "True" on button1. Also if your using updatepanel, Javescript does not play well with updatepanel.
<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();
});
});
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.