0

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>
Egeberg
  • 35
  • 5

3 Answers3

1

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.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
0

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

HankMoody
  • 3,077
  • 1
  • 17
  • 38
Kaloyan Drenski
  • 950
  • 1
  • 13
  • 18
  • Tried both options, no luck yet. The function url() returns an url that has images, every time I press the button on my pc, the security image changes to another image from the url. When I try to the same on my phone it doesn't change the image. When i reload the page i get a new image. – Egeberg Feb 20 '19 at 09:11
0

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

Seba99
  • 1,197
  • 14
  • 38