JS add text in generated ajax div

Question

looking for some help, how to add custom text value to Ajax generated input text field. But cannot get element by id or class, none of the code works. Tried code which one check if regul price not empty, then it should to add text to field, but it doesn't work.

<script type="text/javascript">
        if($("#_regular_price").length > 0) { 
            $("#snippet-editor-field-description").text('labas')
        };
</script>

Tried this code as well to check if even work with alert, but it doesn't.

<script type="text/javascript">

    $('#snippet-editor-field-description').click( function() { 
        alert('clicked'); 
    });

</script>

Anyone could asist how to get element and add custom text before Excerpt where is marked yellow?

Are you trying to select the element having `class` beginning with `"Shared"` `$('[data-offset-key="fvga0-1-0"] > span')`? — guest271314, Feb 17 '19 at 20:51
also if the field has been added by ajax, then you need to make sure your JS code doesn't run until after that has happened. Otherwise the field will not exist when you run the code. The way you've written your code above inside raw script blocks, it will just run as soon as that script block is added to the page. — ADyson, Feb 17 '19 at 20:54
Trying running your code in a `setTimeout` with no duration set. Running the code in a different event loop could solve the issue. — Andy Hoffman, Feb 17 '19 at 20:57

cantuket · Accepted Answer · 2019-02-17T21:31:14.343

The biggest problem I can see is that your jQuery code is run when the DOM is initialized, but if the element you're looking (#snippet-editor-field-description) for isn't in the initial page load it will never find it because jQuery is only parsing the DOM once.

To handle this jQuery uses the .on() method, which will look for any new elements added to the DOM dynamically that match that selector...

<script type="text/javascript">

    $(document).on('click','#snippet-editor-field-description', function() { 
        alert('clicked'); 
    });

</script>

As for doing something when this element has been added to the DOM, unfortunately jQuery deprecated that feature (jquery detecting div of certain class has been added to DOM ) so you can either implement manually, as shown in the linked SO question or...

Poll for existence of element

setInterval(function (){
        var elem = $("#snippet-editor-field-description");
        if (elem) elem.append('labas');
},1000)

Use a plugin (recommended in this case)

jQuery Initialize

$("#snippet-editor-field-description").initialize(function (){
   $(this).append('labas');
});

Looks good, this works now. But some how I need to add custom value to that description field, to keep original value and add +custom text. Is there any suggestions? — , Feb 17 '19 at 21:25
Ok I found it, this is not textarea, this is div, so I just appended another div with span element and text inside . Thanks — , Feb 17 '19 at 21:30
1) Sure just added some options. 2) If you want to append text instead of replacing entirely then just replace `text()` with `append()`. — cantuket, Feb 17 '19 at 21:32

JS add text in generated ajax div

1 Answers1