Update card image after receiving data dynamically

[AguinaldoAranda]

Hello guys.

First, congratulations on the plugin, extraordinary!

I use it in an application, where most of the time, the user informs the data of the card directly on the screen. But, for example, when the user uses the visa checkout, which returns the data from the card, then the user does not need to fill in, upon receiving the data the visa checkout already fill in the fields, but, the card image is not fully updated, I used the technique below to update the expiration date, name and CVN:

   ` $("#accountNumber").val('4716331625353350');
    $("#card_name").val('Aguinaldo Aranda');        
    $('#card_expiry').val('12/2020');
    $("#card_cvc").val('987');

    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', false, true);
    document.getElementById('card_name').dispatchEvent(evt);
    document.getElementById('accountNumber').dispatchEvent(evt);     
    document.getElementById('card_expiry').dispatchEvent(evt);   
    document.getElementById('card_cvc').dispatchEvent(evt);`

But the card number does not update , as does the card flag (image)

Does anyone know how to proceed to update the card image and card number?

Thank you very much.
NOTE: Sorry for the translator's English.

[filippoaceto]

I have the same problemi.

[yusuf-mutlu]

Hi, i have found a solution for this:

change the code in card.js file. you must add "blur" and "focus".

then add this jquery code to your form page. then you can give default values in html elements like this:

[filippoaceto]

mine don't work

[yusuf-mutlu]

you can download the full code:

https://www.dropbox.com/s/h13jloa0ufwhc9q/card.rar?dl=1

[AguinaldoAranda]

Hello people!

Filippo, thank you for helping.

The problem with your solution is that you change the plugin, so with each update of the plugin we will have to worry about it. As we are in some programmers in the team, this can generate problem later.

I think this is a problem for more people, is the plugin not of the same support for updating the image by receiving data dynamically ...

But anyway, thanks for the help.

[filippoaceto]

i try to integrate it to thymeleaf but won't work, in simple html work.

[filippoaceto]

I resolved the issue with the RudyardKipling solution.
The point was that the focus not worked why i don't set a delay.
With the delay work!

[letsspeak]

There is two bugs, I have fixed this.
letsspeak@d3cf0ab

[BallisticPain]

Are any of you intending to create a PR so we can get this type of support? I would need to double check with @jessepollak before merging to be sure it fits his direction, but I would be happy to get his attention when we are ready.

@letsspeak @RudyardKipling

[filippoaceto]

Now works fine! Thanks

[mattpramschufer]

What about when changing the value of the name via Javascript. For instance

        $('#copy').change(function () {
            if (this.checked) {
                $.getJSON('data.php', {
                    format: "json"
                })
                    .done(function (data) {
                        $billing_firstname.val(data.student.firstname);
                        $billing_lastname.val(data.student.lastname);
                    });
            } else {
                $billing_firstname.val('');
                $billing_lastname.val('');
            }
        });

        $('form').card({
            container: '.card',
            formSelectors: {
                numberInput: 'input#credit_card_number',
                expiryInput: 'input#credit_card_exp',
                cvcInput: 'input#credit_card_cvc',
                nameInput: 'input#billing_firstname, input#billing_lastname',
            }
        });

The solution above only appears to work when you manually add the value in the HTML. Any suggestions?

[AguinaldoAranda]

You have to set the first and second names in an input:

$ ("#card_name"). Val (first_name + '' + lastName);
    
Then run the code below:

Var evt = document.createEvent ('HTMLEvents');
Evt.initEvent ('change', false, true);
Document.getElementById ('card_name'). DispatchEvent (evt);

Here it worked very well, I just did not update the image of the card after inserting the card number dynamically.

[mattpramschufer]

AguinaldoAranda,
Thanks for responding, I am using a separate first and last name fields. I have tried your code and it has no effect. I am already setting both the first and last name input field values when I get done with ajax request.

[compgumby]

FWIW, I did this in a very hacky fashion. To wit:

$('div.card-wrapper > div > div > div.jp-card-front > div.jp-card-lower > div.jp-card-number.jp-card-display.jp-card-valid').text(cardMasked);

Key was setting '.text'.

[webcodeie]

After you call and congfigure jquery card,

$('form').card({ container: '.card-wrapper' });

add the following:

$('input#number').focus().blur();

[hvaughan3]

@AguinaldoAranda's idea sorta worked. I ended up with the following (event.initEvent() is deprecated):

var changeEvent = new Event('change')
document.getElementById('cc-name').dispatchEvent(changeEvent)

I just did this for each field I wanted to update dynamically.

[angelcalvasp]

So the credit card style appears do the same as @hvaughan3 but with the focus and blur events and then the card type will appear

var focusEvent = new Event('focus');
var blurEvent = new Event('blur');
document.getElementById('cc-number').dispatchEvent(focusEvent);
document.getElementById('cc-number').dispatchEvent(blurEvent);

[TrendyTim]

@angelcalvasp weird i tried focus blue and it didnt seem to work but
var keyupEvent= new Event('keyup');
document.getElementById('card_number').dispatchEvent(keyupEvent);

did

[ashwinmram]

Thank you @angelcalvasp and @hvaughan3 as a combination of what you both provided worked for me!

        const changeEvent = new CustomEvent('change');
        const blurEvent = new CustomEvent('blur');
        document.getElementById('cardholder').dispatchEvent(changeEvent);
        document.getElementById('cardholder').dispatchEvent(blurEvent);
        document.getElementById('cardnumber').dispatchEvent(changeEvent);
        document.getElementById('cardnumber').dispatchEvent(blurEvent);
        document.getElementById('expiry').dispatchEvent(changeEvent);
        document.getElementById('expiry').dispatchEvent(blurEvent);