The page is refreshing before it complets the jquery code - javascript

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.

Related

show toast using CSS, JS and asp.net

I have a toast.js file which contains the following code:
$(document).ready(function() {
$(".tstInfo").on("click",function(){
$.toast({
heading: 'Welcome to my Elite admin',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-right',
loaderBg:'#ff6849',
icon: 'info',
hideAfter: 3000,
stack: 6
});
});});
on my aspx page i have button
<asp:Button ID="btnShow" runat="server" Text="Show" Font-Bold="true" CssClass="tstInfo btn-primary" OnClick="btnShow_Click" />
now i want to call js function when i click on the button. can somebody please tell me how to do it.
Thanks in advance
<asp:Button ID="btnShow" runat="server" Text="Show" Font-Bold="true" CssClass="tstInfo btn-primary" OnClick="btnShow_Click" />
in your code replace btnShow with tstInfo it will work and remove OnClick
You can use OnClientClick like this :
OnClientClick="javascript:alert('Hello')"

FileUpload HasFile returns false

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>

How to disable Pop Up in javascript

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
}
});

jQuery tabs don't work after a gridview page is changed

jQuery dialog with tabs disappear when a page of the GridView is changed. When the page is rendered i have a button that on click pops a jQuery dialog with tabs, but on this page I also have a GridView and if i change the page of the grid view and then click again on the button that should display the jQuery dialog with the tabs - the tabs are not displayed. Instead the dialog pops up but the tabs are just displayed as list items. Here is my aspx code and the javascript function:
<div id="returning_dialog_form" title="Returning">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<ul>
<li>Item</li>
<li>Accessory</li>
</ul>
<div id="return_item_tab" title="Return Item">
<p>Enter the id of the item that you want to return: </p>
<asp:TextBox ID="TextBox1" runat="server" />
<br />
<asp:Button ID="return_item_button" runat="server" Text="Return item" OnClick="return_item_Click" />
</div>
<div id="return_accessory_tab" title="Return accessory">
<p>Enter the id of the accessory that you want to return: </p>
<asp:TextBox ID="TextBox2" runat="server" />
<br />
<asp:Button ID="return_accessory_button" runat="server" Text="Return accessory" OnClick="return_accessory_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script>
$(function () {
$("#returning_dialog_form").tabs();
});
</script>
And here is the code that pops the jQuery dialog:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
maxWidth: 320,
maxHeight: 320,
width: 320,
height: 320,
autoOpen: false
};
$('#returning_dialog_form').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#returning_dialog_form").dialog({
});
$("#return_item_button_dialog").click(function () {
$("#returning_dialog_form").dialog("open");
return false;
});
});
</script>
The GridView is placed inside a UpdatePanel if it matters.
Why is it that the tabs in the jQuery dialog are not shown when the button is clicked after a page of the GridView is been changed?

live search filter submit button generated by c# code

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.

Categories

Resources