I have some problems using a loader from jquery mobile. I'm not a frontend developer, but I have to deal with this task. The aim is that I need to make it work the loader, keeping the submit. What it makes me mad is that in Chrome works and in Firefox not. The process of pick up a file and submit it works, it's only the loader what it fails. I've been reading several issues (but I'm not sure that it is right or not).
- Try to do the post from de javascript (ajax.post) but it doesn't work to send files.
- Try to preventDefault and then trigger again but I was not able to make it work and then also failed the submit process.
- remove the data-ajax=false but then it doesn't work the submit process.
In chrome works:
But in Firefox not:
I have a html file where is defined a submit form in order to send a file from the computer to a connected device. The html code is:
<form id="sw-update-form" name=multipart action="/upload" data-ajax="false" method="post" enctype="multipart/form-data">
<fieldset data-role="controlgroup">
<label id=ss1_l><input type="radio" name="update" value="fs1">Update filesystem 1</label>
<label id=ss2_l><input type="radio" name="update" value="fs2">Update filesystem 2</label>
<label for="file">Selected file:</label>
<input type="file" name="file" id="file" />
<input type="submit" name="upload" value="Update" />
</fieldset>
</form>
And my js file with the code that deals with the jquery mobile loader is:
$(document).on( "pagecreate", "#page1", function() {
$(document).on('submit', '#sw-update', function (e) {
//e.preventDefault();
var $this = $( this );
$.mobile.loading( "show", {
text: "Updating",
textVisible: "true",
theme: "b",
textonly: "false",
html : "<h1><img src=\"../images/ajax-loader.gif\"></h1><h1>Updating</h1>"
});
});
});
Since, it is not my area of expertise, can anyone help me? I think that it is necessary a loader because the process is long enough to required it.
Thanks for your help
UPDATE
If I click two times to the button summit, the loader works.