Solved

Firefox got stuck on file uploading page

Posted on 2016-08-03
3
54 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 83

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 22

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
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…

863 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

20 Experts available now in Live!

Get 1:1 Help Now