jQuery file upload refreshing page

Question

I saw this question, "Show Open Dialog on a Button click":

'I have to show a Open Dialog box on a button click. Basically I have to upload a file, for this I am using FileUpload control, but I don’t want to show it to user instead I want to show a Button'

And the answer was :

 <script type="text/javascript">      
   $(document).ready(function() {      
      $("#btn").click(function() {       
        $("#FileUpload1").click();         
       return false; 
      });         
   });  
   </script>   
   <style type="text/css">      
      .Class { visibility:hidden;}     
   </style> </head> <body>    
   <form id="form1" runat="server">  
   <div>       
      <asp:Button ID="btn"  runat="server" Text="Send File"/>   
      <asp:FileUpload ID="FileUpload1" CssClass="Class" runat="server" />

But i tried it and all it does is refreshing the page, anyone know what the problem is?

@Matt - What did you expected from a guy that names his classes "Class" ? Just kidding ;-) — Dominic Goulet
– Dominic Goulet, Commented Nov 9, 2011 at 16:44
@Dominic if you read it more carefully you'll see that it's not my code ;) — Roy Gavrielov
– Roy Gavrielov, Commented Nov 9, 2011 at 16:58

Dominic Goulet · Accepted Answer · 2011-11-09 16:44:11Z

1

Because "FileUpload1" is not the ClientID. Just look at the generated HTML source of your page and you will see that.

You should use something like :

<script type="text/javascript">      
$(document).ready(function() {      
  $("#<%= btn.ClientID %>").click(function() {       
    $("#<%= FileUpload1.ClientID %>").click();         
      return false; 
  });         
});  
</script>

answered Nov 9, 2011 at 16:44

Dominic Goulet

8,1437 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohib Sheth Over a year ago

I just tried his code and it works perfectly. Do this.. Open the page.. click Send File button.. Press Ctrl+Shift+J and see what errors are listed.

Roy Gavrielov Over a year ago

Yeah, but now i'm getting HTML access denied :(

James Johnson · Accepted Answer · 2011-11-09 16:45:13Z

0

That sounds like a security risk, and I wouldn't be surprised if security prevented that from working.

Take a look at this jQuery Ajax Upload plugin.

answered Nov 9, 2011 at 16:45

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

3 Comments

Roy Gavrielov Over a year ago

@ James i can't use it in my organization

James Johnson Over a year ago

You can't use what? A jQuery script?

benekastah Over a year ago

You can't use any third party libraries? It's just a javascript file, not really a plugin you install...

Mohib Sheth · Accepted Answer · 2011-11-09 16:47:08Z

0

I would suggest you to not go that route. If you want to avoid showing FileUpload control to user.. use this.

answered Nov 9, 2011 at 16:47

Mohib Sheth

1,13510 silver badges22 bronze badges

1 Comment

Roy Gavrielov Over a year ago

@ mohib i can't use it in my organization

COLD TOLD · Accepted Answer · 2011-11-09 16:47:30Z

0

make the client mode static to be able to access you controls like this

<asp:FileUpload ID="FileUpload1" ClientIDMode="Static" CssClass="Class" runat="server" /> 
  <asp:Button ID="btn"  ClientIDMode="Static"  runat="server" Text="Send File"/>

answered Nov 9, 2011 at 16:47

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

Comments

jwheron · Accepted Answer · 2011-11-09 16:50:13Z

0

All server-side controls (those with runat="server" attributes) have their IDs re-written by ASP.NET. Your IDs will actually look something like ctl00_MainContent_btn.

You can get around this by using <%= btn.ClientID %> server tags or by assigning a CSS class to your controls and referencing that class in JavaScript/jQuery.

Edit: You probably also need to make sure that your ASP button is not a submit button, which would cause the generated page to submit the form.

edited Nov 9, 2011 at 16:50

answered Nov 9, 2011 at 16:44

jwheron

2,5722 gold badges30 silver badges40 bronze badges

3 Comments

jwheron Over a year ago

@RoyGavrielov, what isn't working? We need more information from you to help you fix your problems.

Roy Gavrielov Over a year ago

sorry, i replaced ("#btn") with ("<%= btn.ClientID %>") and ("#FileUpload1") with ("#<%= FileUpload1.ClientID %>") and still not working

jwheron Over a year ago

Can you edit the question to include the new information? Are you getting any error messages? Have you tried using FireBug or debugging any C# code to narrow down the line that causes the refresh? Also, have you checked to make sure your ASP button isn't submitting the form to the page you're on?

benekastah · Accepted Answer · 2011-11-09 18:57:03Z

Your page refreshes because the target of your form is implicitly the current page. You need to set the target of your form to be (for example) a hidden iframe:

<form id="my-form" action="url" target="form-target" method="post">
  <!-- your form here -->
</form>

<iframe id="form-target" name="form-target" style="display:none;"></iframe>

<script>
  // Assuming you are using jquery
  var form = $('#my-form'),
      iframe = $('#form-target');

  // create a function to be called each time the iframe loads
  iframe.load(function () {
    var responseText, iframeBody;

    // Get the response from the server. It will be in the body tag of your iframe
    iframeBody = $(this).contents().find('body');
    responseText = iframeBody.text().trim();
    // Don't continue until we actually have a response
    if (!responseText) return;
    // Clear the iframe's html so this function won't be called again for the same content
    iframeBody.html('');

    // do whatever you want with the response, for example JSON decode it
    response = JSON.parse(responseText);
  });
</script>

Collectives™ on Stack Overflow

jQuery file upload refreshing page

6 Answers 6

2 Comments

3 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related