How to update the textbox control in the updatepanel of the usercontrol using the Jquery in asp.net page?

Question

5.00/5 (1 vote)

See more:

, +

Following is the Jquery code for the change event whenever the file uploaded or changed.

C#

var document1FileUpload = $('#Document1FileUpload');
var fileNameTextBox1= $('#fileNameTextBox1');
document1FileUpload.die();
       document1FileUpload.live('change', function () {
           console.log("1 Doc up");
           if (this.files != undefined || this.files != null) {
               fileNameTextBox1.val(this.files[0].name);
               console.log("If block");
           } else {
               var filePath = this.value.split("\\");
               fileNameTextBox1.attr('value', filePath[filePath.length - 1]);
               console.log("else block");
           }
       });

below is the designer code:

ASP

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <Triggers>
                    <asp:PostBackTrigger ControlID="BulkUploadButton" />
                </Triggers>
                <ContentTemplate>
                    <table style="width:100%;">
                        <tr>
                            <td style="width:5em;">
                                <web:Label AssociatedControlID="Document1FileUpload" Font-Size="X-Small" Text="File.1"  runat="server" style="padding-left:0px;"/> <br />
                                <asp:FileUpload runat="server" ID="Document1FileUpload"/>
                            </td>
                            <td style="width:5em;">
                                <web:Label AssociatedControlID="DocumentTypeDropdownList1" Font-Size="X-Small" Text="Type.1"  runat="server" style="padding-left:0px;"/> <br />
                                <web:DropDownList  runat="server" ID="DocumentTypeDropdownList1" Width="100px" Height="20px"></web:DropDownList>
                            </td>
                            <td style="width:250px;">
                                <web:Label AssociatedControlID="FileNameTextBox1" Font-Size="X-Small" Text="File Name.1"  runat="server" style="padding-left:0px;"/><br />
                                <web:TextBox ID="FileNameTextBox1"  runat="server" MaxLength="150" TextMode="SingleLine" Width="250px" Height="20px" OrgValue="" />
                            </td>
                            <td style="width:300px;" >
<web:Label AssociatedControlID="Description1TextBox" Font-Size="X-Small" Text="Description.1"  runat="server" style="padding-left:0px;" /><br />
                                <web:TextBox ID="Description1TextBox"  runat="server" MaxLength="250" TextMode="SingleLine" Width="100%" Height="20px" />
                            </td>
                        </tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

The problem is when ever the file upload change event occurs the Description text does not update with respected file name.
I also mention the file name as well as written to change the value according to the jquery coding standard.


Please any help on this topic is much appreciated. Thanks  fellow fantastic coder.

Posted 19-Mar-15 9:19am

Rahul121616

Add a Solution

Comments

sudevsu 19-Mar-15 15:27pm

Can you try this way
$('#fileNameTextBox1').val(this.files[0].name);
Instead of
fileNameTextBox1.val(this.files[0].name);

Rahul121616 20-Mar-15 0:35am

var fileNameTextBox1= $('#fileNameTextBox1');
First I am Initializing the Textbox variable as above and then assigning value to the textbox below
fileNameTextBox1.val(this.files[0].name);

So both the statements will be the same
$('#fileNameTextBox1').val(this.files[0].name);
fileNameTextBox1.val(this.files[0].name);

sudevsu 19-Mar-15 15:31pm

Also Rahul, Please check in Debugger where there is a value in "this.files[0].name". you can use FireFox Debugger. Just open the link in fire fox and click on the bug symbol to and add a debugger in your JQuery

Rahul121616 20-Mar-15 0:37am

and I also tried that with debugger and "this.files[0].name" has the value

Rahul121616 20-Mar-15 7:30am

hey sudevsu,

Thanks for looking into it.

I found the solution.
jquery Method is written in the $.Pageload Method and
but the variable were written outside the Pageload Method thats why It not worked, once i placed the variable inside the pageload method it worked properly for me.

the following code will work

$.pageLoaded(id, function () {
var documentFileUpload = $('#' + jsonControls.DocumentFileUpload);
var dialogBoxDeleteButton = $('#' + jsonControls.DialogBoxDeleteButton);
var nameTextBox = $('#' + jsonControls.NameTextBox);
documentFileUpload.die();
documentFileUpload.live('change', function () {
if (this.files != undefined || this.files != null) {
nameTextBox.attr('value', this.files[0].name);
}
else {
var filePath = this.value.split("\\");
nameTextBox.attr('value', filePath[filePath.length - 1]);
}
return false;
});
dialogBoxDeleteButton.die();
dialogBoxDeleteButton.live('click', function (e) {
if (confirm("Are you that you want to delete?")) { return true } else { return false };
});
});

sudevsu 31-Mar-15 13:13pm

Good to know you found solution. Post that as solution and mark it answer, So that someone will find it useful.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)