Load page manully after executing javascript in ratchet

[Dong Scott]

Well, to have an easier and shorter upload operation to the user, here is what I need to do:

• Index page has a button of input[type="file"]
• Touching on this input to pop out mobile album, select one photo, then trigger a asynchronous image upload request
• After image uploads successfully, the page will slide out, another page slides in to render the photo uploaded just now saved in localstorage

After google/stackoverflow a lot, I still do not have an solution to it.

The first idea to me is:

• At first, put a link with href and data-transition which works fine
• Upload the image asynchronous when touching on the input
• Then in javascript, trigger the link by $('a.detail-page').trigger('touchstart')

But the next page doesn't load in. The chrome dev tools is ok with touch events enabled. Is anything wrong with my usage?

HTMl code:

<a class="detail-page" href="detail.html" data-transition='slide-out'>Load Detail</a>
<input class="photoInput" type="file" name="photo" />

In javascript:

$('.photoInput').asyncUpload().on('success', function(data) {
   // do something with data
   // this page slide out, detail page slide in
   $('.detail-page').trigger('touchstart')
   // even tried touchend and click
   // $('.detail-page').trigger('touchend')
   // $('.detail-page').trigger('click')
})