CODEWITHSUNDEEP
javascriptandroidjqueryjquery-mobile
Egeberg
Egeberg

Reputation: 45

jQuery Mobile can't change image dynamically on Android devices

jQuery Mobile can't change an image dynamically on Android devices. Please help.

aditional information:

What I am trying to do is to change a security image. It runs locally on my machine but I can access the code and apis with my network ip-adress, and it works. When I try to change the image that I get from an url it only change in safari I have tried in chrome, Firefox etc. but no luck.

I tried setting a date.getTime() behind but that didn't work either. I have debugged the code and when I press the button nothing happens to the image, the input field changes to null.

So my problem is to change the image every time I click the button.

  $("#newSecurityCode").on("click",function () {
        $("#securityCheckImg").attr("src", urlprefix() + "captcha");
        $("#securityTextField").val("");
    });

This code works in safari Mac and iPhone but not in chrome, Firefox.....

$("#newSecurityCode").click(function() {
  $("#securityCheckImg").attr("src", url());
  $("#securityTextField").val("");
});

<tr>
  <td>
    <img id="securityCheckImg">
  </td>
</tr>

Upvotes: 0

Views: 197

Answers (3)

Gajotres
Gajotres

Reputation: 57309

Few things.

Never use the classic jQuery click event bindings. Always do it with on and do it on the document object. jQuery Mobile code is slow, there's a good chance your JavaScript is executed before content is loaded into DOM. If you find it to document than it doesn't matter if img is part of DOM or not. As soon img is loaded into the DOM this event will be propagated to it.

So use it like this:

    $(document).on('click touchstart', '#newSecurityCode',function () {
        $("#securityCheckImg").attr("src", url());
        $("#securityTextField").val("");
    });

Another thing, if you are executing this code on your actual Android phone then you cannot execute localhost URL. Localhost works only when executed on your computer. Connect your phone to WiFi and call your computer IP address instead of localhost. Of course, this will work only if your server is allowed to be accessible outside ofr your computer.

Upvotes: 1

Kaloyan Drenski
Kaloyan Drenski

Reputation: 1066

Not so much information shared, but you could try this:

$("#newSecurityCode").on('click touchstart', function () {
  $("#securityCheckImg").attr("src", url());
  $("#securityTextField").val("");
});

<tr>
    <td><img id="securityCheckImg"></td>
</tr>

Or you could use vanilla JS and ontouchstart event if you're targeting only mobile:
Example here: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_touchstart

Upvotes: 0

Seba99
Seba99

Reputation: 1311

I think this is a problem of cached values ... ( You should have read this before posting ;) )

Let's try this : 

 $("#newSecurityCode").on('click touchstart', function () {
   d = new Date();
   $("#securityCheckImg").attr("src", url() + "?" + d.getTime());
   $("#securityTextField").val("");
 });

This timeStamp will force the browser to reload the image

Upvotes: 0

Related Questions