Solved

Firefox got stuck on file uploading page

Posted on 2016-08-03
3
44 Views
Last Modified: 2016-08-04
I currently have a very weird thing happened on the file uploading page between safari and firefox.

the web page let a user upload multiple images to the server, after the user choose the files he wants to upload, and click on the upload button, all the files will be uploaded to the server by using Jquery. both safari and firefox have no problem on this process so far. I can see the uploading process is 100% done.

after clicking on upload button
The problem is------ the Safari browser allow the user to click on the button NEXT to move forward to the next page, but the firefox (version 47.01) does not.

The uploading function is from this link:

http://plugins.krajee.com/file-advanced-usage-demo

the example 11 from the link above is what I am using.

"With release v4.0.0, the plugin now supports AJAX based uploads using HTML 5 FormData and XHR2 protocol, which is supported in most modern browsers." is copied from this page:

http://plugins.krajee.com/file-input/demo

doesn't Firefox 47.01 support AJAX?

Below are my configuration :


The action snippet  inside my struts.xml is:
 
       
         <action name="doUpload" class="xxx.eblast.report.FileUploadAction"  method="execute"> 
          <result type="json" />
        </action>

Open in new window


the form to upload file is:
       <div class="container kv-main">

               <form enctype="multipart/form-data">
                 <div class="form-group">
                    <input id="file-10" name=upload type="file" multiple class="file-loading">
                </div> 
               </form>

        </div>

Open in new window


 <script>
$("#file-10").fileinput({
    uploadUrl: "doUpload", 
    allowedFileTypes: ["image", "video"],
    allowedFileExtensions: ["png", "jpeg", "jpg", "gif"],
    uploadAsync: false,
    maxFileCount: 10,
    uploadClass: "btn btn-success",
    uploadLabel: "Upload",
    uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
    
});
</script> 

Open in new window


The snippet for the next button is:
      
<div class="container clearfix"  > 
	        <div class="row-fluid" >   
   
		    <s:url action="composeEmail" var="urlTag" ></s:url>
		    <button type="button" class="btn btn-default pull-right"><s:a href="%{urlTag}" > NEXT </s:a></button>

 	    </div><!-- row fluid -->
    </div> <!-- container -->

Open in new window



the action is:

      
<action name="composeEmail">
          <result>/composeEmail.jsp</result>
          </action>

Open in new window

0
Comment
Question by:arthurwang
3 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 41741604
doesn't Firefox 47.01 support AJAX?
Of course it does or the upload wouldn't happen.  Your 'Next' button is not part of the AJAX function, it's part of your code that you added.
1
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41741760
It is invalid HTML to embed an <a> link inside a <button>. Both are clickable elements and therefore create a conundrum for the browser to determine which element fires the click event. The converse is also invalid, you cannot embed a <button> inside and <a> link. If you validate your HTML, you will see an error for this code.
0
 

Author Closing Comment

by:arthurwang
ID: 41743488
After more testing on the "NEXT" button, I finally decide to use form button to replace the button link such that it can be working on both Safari and Firefox browser.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now