How can I prevent my PhoneGap webView to refresh content after a native picture capture on Android?

Question

The only previous question I found concerning my problem is this one: Android app reverts back to index page after taking a picture

But it doesn't really answer, and my Manifest has this on the main Activity tag :

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

I'm writing a PhoneGap 2.8.1 app with jQueryMobile 1.3.1 on Android and I encounter a (not so) annoying rendering issue.

I call the camera.getPicture feature of PhoneGap like this :

capturePicture: function() {

    navigator.camera.getPicture(
        app.onCameraSuccess, 
        app.onCaptureError, 
        { quality : 50,
          destinationType : Camera.DestinationType.DATA_URL,
          sourceType : Camera.PictureSourceType.CAMERA,
          encodingType: Camera.EncodingType.JPEG,
          targetWidth: 250,
          targetHeight: 250,
          saveToPhotoAlbum: false 
        }
    );
},

And retrieve Base64 encoded image like so :

onCameraSuccess: function( b64EncodedImage ) {


    var imageEncoded = "data:image/jpeg;base64," + b64EncodedImage;

    $('div.accred_pic_preview')
        .fadeOut()
        .css('backgroundImage', 'url("' + imageEncoded + '")')
        .fadeIn()

    // The accred_pic_input is hidden, so I must call trigger event manually

    $("#accred_pic_input").val( imageEncoded ).trigger("change");

    app.goTo("accred"); //  <== I must manually go to jQueryMobile page ID
}

Everything goes fine, but when returning to app, webView reloads (or refreshes) content.

EDIT: That part is confusing, let's forget it

The problem is that I trigger change event on an hidden input to activate the submit button when my required inputs are OK. And as you can see below, I must manually go to previous active page with a function of mine, so the change event is not fired when manually changing page (the change is already effective when I finally arrive on the target page)

EDIT thanks to Robin C Samuel for clearing my mind When capture OK (by the native android photo app), focus is given back to my app. At that moment, my app being a JQM/PhoneGap combination, the webView part of the app is refreshed, so that the defaut (index) JQM page is shown before I programatically go to the page calling the capture plugin, containing my form.

I want to avoid that behaviour, and going back directly to the page calling the capture plugin, after capture OK.

Does anyone know a way to force PhoneGap's webView not to refresh content after a capture?

So you are not changing the page right ? Instead your changeing the contents of the index page ? — Robin C Samuel, Jul 05 '13 at 08:42
I do change the page, as jQuery Mobile Page (with JQM, the pages are DIVs in a single html page) But I have to call the $.mobile.changePage("#id_of_the_page") function manually after picture capture, to return to the page calling phonegaps's capture plugin. Maybe I did not explain as clearly as I thought... — Doc Flandersao, Jul 05 '13 at 08:49
I didn't faced any issues while using phonegap's camera API, If the problem is triggering change event, then you may avoid the trigger event and manually activate the submit button using jQuery — Robin C Samuel, Jul 05 '13 at 08:56
There are multiple inputs in the form, not only picture capture. The submit button is activated when the entire form is answered. That's why I trigger change event, I'm binding change on all inputs to determine il the form is well answered or not. But the question is : How can I prevent my PhoneGap webView to refresh content. That's the point. — Doc Flandersao, Jul 05 '13 at 09:00
Sorry Friend! I don't know about this issue, and i havn't faced this problem. But i have gone through the same situation. If the triggering is the problem, you may use the unwanted change events & checks and just use jquery validations for validating forms. — Robin C Samuel, Jul 05 '13 at 09:12

score 3 · Answer 1 · answered May 27 '15 at 09:22

Please check whether u have given the capturePicture function to a button inside a form. If it is so the default behavior is to reload the page. The example given in CameraPlugins documentation is using button which is creating confusion. Just change the button to div or something and try. It will not reload.

score 0 · Answer 2 · answered Jul 05 '13 at 09:23

If you are calling the camera api from index page, and then redirecting to the page containing form on success, just simply replace the events.

you can change the camera call function a little, to redirect the page first,

capturePicture: function() {

    setTimeout("app.goTo('accred');", 500); //  <==  Redirect the page here

    navigator.camera.getPicture(
        app.onCameraSuccess, 
        app.onCaptureError, 
        { quality : 50,
          destinationType : Camera.DestinationType.DATA_URL,
          sourceType : Camera.PictureSourceType.CAMERA,
          encodingType: Camera.EncodingType.JPEG,
          targetWidth: 250,
          targetHeight: 250,
          saveToPhotoAlbum: false 
        }
    );
},

And simply avoid the redirect after cam success.

How can I prevent my PhoneGap webView to refresh content after a native picture capture on Android?

2 Answers2