How to avoid appending duplicates on ajax after second call?

RedCactus :

I have a button called File which is a dropdown that has another button called open. Once the user clicks open I have an ajax GET request that appends a button after each call.

When the user clicks open once, the button is appended. However, when the user clicks open again, the same button is appended again with the same attributes and if the user clicks the open button the third time the button is appended once more, so a total of three times.

How do I ensure the button is only appended once?

The {{}} is from the django web framework and is not a concern

      <input type = "button" class = "openGraph" value = "{{titles}}" id="{% url 'openGraph' title=titles.id %}">

This is the occurence when the user presses the open button.

 $(document).ready(function(){
                $('#openXML').on('click',function(event){

                    var csrftoken = getCookie('csrftoken');

                    $.ajax({
                        type: "GET",
                        url: "/loadTitles/",
                        dataType: 'text',
                        headers:{
                            "X-CSRFToken": csrftoken
                            },
                        success: function(data){
                            var json = JSON.parse(data)
                            var length = Object.keys(json).length                               

                            var pk = "/openGraph/" + json[length-1]['pk']
                            var title = json[length-1]['fields']['title']

                            myButton="<input type=\"button\" class = \"openGraph\" value=\""+title+"\" id="+pk+"/\>";


                            $("#loadAllTitles").append(myButton)
                        }
                    });

                })
            });

gaetanoM :

Because the IDs must be unique I'd suggest to test if the button already exist before adding. Hence, you need to change this line:

$("#loadAllTitles").append(myButton)

with:

if ($("#loadAllTitles").find('#' + $.escapeSelector(pk + '/')).length == 0)
  $("#loadAllTitles").append(myButton)

I get the following console error: Uncaught Error: Syntax error, unrecognized expression: #/openGraph/104 –

If you are using jQuery 3.x you need to use:

jQuery.escapeSelector(): Escapes any character that has a special meaning in a CSS selector.

UPDATE While pk is the ID when you create a new element you add to this ID a final /. This is your issue.

$('button').on('click', function(e) {
    var pk = '#/openGraph/104';
    var title='title';
    myButton="<input type=\"button\" class = \"openGraph\" value=\""+title+"\" id="+pk+"/\>";
    if ($("#loadAllTitles").find('#' + $.escapeSelector(pk + '/')).length == 0)
        $("#loadAllTitles").append(myButton)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="loadAllTitles">

</form>
<button type="button">Click to add the same input field</button>

How to avoid appending duplicates on ajax after second call?

Guess you like