0

I have a jQuery QR Code generator that creates an image of a QR code based on the text you type into an input. The QR code and image source updates in real time as you alter your input.

What I need is to take the src of the image and place it in its own input that updates as you type. I was able to get the value of the src using this:

var imageSRC = $('.qr-preview img').attr('src');
$('input#code_img_src').val(imageSRC);

This works perfectly fine, however it only applies the value of the image when the PAGE LOADS, not each time the img src changes. Is there a way to make it so that every time the src changes that function updates in real time? I'm probably overlooking something simple here, and I've researched things like setInterval but I that's not exactly what I'm looking for. Any help would be greatly appreciated.

Tom Nolan
  • 1,916
  • 4
  • 32
  • 51
  • Possible duplicate: http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener – meyer9 Dec 18 '14 at 03:29

3 Answers3

0

This isn't supported in all browsers, but this works in chrome:

$("#.qr-preview img").on("DOMSubtreeModified", function() {
    var imageSRC = $('.qr-preview img').attr('src');
    $('input#code_img_src').val(imageSRC);
});
meyer9
  • 1,120
  • 9
  • 26
  • I'm using chrome, and this didn't seem to have any effect. I tried this method after I saw this post: http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener – Tom Nolan Dec 18 '14 at 03:38
  • Try using on instead of bind? – meyer9 Dec 18 '14 at 03:41
0

If I understand you correctly, you are using a third-party jQuery plugin which you associate with an input and which generates the URL for a QR code for you, which it assigns to another image's src attribute. My answer assumes this is correct.

Let's say you have this input that the user types into, which modifies the QR code in real-time:

<input id="qr-input" type="text">

Then all you need to do is attach an event listener for the input event to this input, and in that listener, invoke the code to update the second input with the value of the image's src attribute:

function updateSrcInput() {
    var imageSRC = $('.qr-preview img').attr('src');
    $('input#code_img_src').val(imageSRC);
}

var timeoutId;
$('#qr-input').on('input', function () {
    if (timeoutId)
        clearTimeout(timeoutId);
    timeoutId = setTimeout(updateSrcInput, 0);
});

Note that I am using a timeout to make sure that the function runs after the plugin's code, and if multiple input events happen in a row (e.g. if the user is typing fast), only one call to your function will be made to update the other input, which means you're not doing wasted work.

If you need the second input to be correct on document load, just add a call to the updateSrcInput() function inside your document load function.

GregL
  • 37,147
  • 8
  • 62
  • 67
0

I think you should try blur event for input. You can do like this:

 $('input#code_img_src').blur(function(){
    var imageSRC = $('.qr-preview img').attr('src');
    $(this).val(imageSRC);
 })
Dat Nguyen
  • 1,881
  • 17
  • 36