Develop Reference

file list not loading in asp upload file control when click event triggered by Link button click in jQuery

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>

jQuery with ASP.NET - Prevent Link from Scrolling to Top of Page

I am building a .NET application that uses a GridView control. I am using a LinkButton control to allow the user to enter Edit mode. Whenever the user clicks this button, it does allow him to edit an entry as it should; however, it also scrolls back to the top of the page. Obviously, this is not ideal; however, I cannot simply use event.PreventDefault() to eliminate this behavior.
I have assigned the class "gridActionLinks" to the controls. When the user clicks the need, I need the link action to occur, and then the scrolling. As it now stands, it scrolls down to the link, and then executes the default link behavior (including going to the top of the page). Is there a way around this? That is, is there a way for the link behavior to execute first, followed by the scrolling?
Thanks much!
The script:
$(".gridActionLinks").click(function (event) {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 100
);
});
A snippet of the aspx:
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="detailsLink" runat="server" CommandName="Edit" CommandArgument="" Tooltip="Edit Record" CausesValidation="False" CssClass="gridActionLinks"><img src="../img/detailsIcon.png" /></asp:LinkButton>
<asp:LinkButton ID="deleteLink" CommandName="Delete" runat="server" Tooltip="Delete Record" CssClass="gridActionLinks" CausesValidation="False"><img src="../img/deleteIcon.png" /></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="insertLink" CommandName="Update" runat="server" Tooltip="Save" CausesValidation="False"><img src="../img/saveIcon.png" /></asp:LinkButton>
<asp:LinkButton ID="cancelLink" CommandName="Cancel" runat="server" Tooltip="Cancel" CausesValidation="False"><img src="../img/cancelIcon.png" /></asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="insertLink" runat="server" CommandName="Insert" Tooltip="New Entry"><img src="../img/saveIcon.png" /></asp:LinkButton>
<asp:LinkButton ID="cancelLink" runat="server" CommandName="CancelEntry" Tooltip="Cancel"><img src="../img/cancelIcon.png" /></asp:LinkButton> </FooterTemplate>
</asp:TemplateField>
Some of the aspx.cs:
protected void vehicleGrid_RowEditing(object sender, GridViewEditEventArgs e)
{
vehicleGrid.EditIndex = e.NewEditIndex;
this.initialize ();
}
private void initialize()
{
try {
using (fleetModel context = new fleetModel())
{
vehicleGrid.DataSource = context.vehicles.SortBy("renewal").ToList();
vehicleGrid.DataBind();
}
} catch(Exception ex) {
Console.WriteLine(ex.StackTrace);
}
}

Since your link buttons are marked runat="server" they will generate a postback event and the page will refresh. If you wish to keep the page position after postback, use a page directive:
<%# Page Language="c#" CodeBehind="MyPage.aspx.cs" AutoEventWireup="false" Inherits="MyPage" MaintainScrollPositionOnPostBack="true"%>
or set it in code behind with
this.MaintainScrollPositionOnPostBack = true;

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>

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.

Javascript in update panel doesn't work after partial postback

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