0

ajax can work on page load that time retrieves data in the database for textbox data can get successfully .

but when I'm set that data create and put value in that textbox that time counter value increase and after complete ajax get counter variable value get inside ajax in alert(counter) ,

but when alert(counter) outside ajax function that time undefine in aler box

I need to use counter value use in the below if the condition counter variable value and work on add or remove textbox functionality.

```    
data.data.specificurl = {"specificurl1":"pk.com","specificurl2":"kp.com","specificurl3":"pkk.com"};

$(document).ready(function() {        
            var store_id = $('#store_id').val();
            $.ajax({
                url: "fetch_data/" + store_id,
                async: false,
                type: "get",
                success: function(data) {
                    console.log(data);
                    var counter = 1; // define counter variable  here 
                    $.each(jQuery.parseJSON(data.data.specificurl), function( key, value ) {
                     console.log(key + ' => ' + value);                   
                     if(key != 'specificurl1' ){
                        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'add_textbox' + counter).addClass('Polaris-TextField Polaris-TextField--hasValue mt-2');
                        newTextBoxDiv.after().html('<div style="width: 90%;">\
                                <input type="text" class="Polaris-TextField__Input" autocomplete="off" placeholder="https://www.google.com" id="specificurl' + counter + '" name="specificurl' + counter + '" />\
                                    </div>\
                                <span class="pl-3">\
                                    <button class="Polaris-Button remove_url" type="button" id="remove_url' + counter + '" onclick="remove_url()">\
                                        <span class="Polaris-Button__Content">\
                                        <span class="Polaris-Button__Text"><i class="fa fa-trash" style="font-size:24px"></i></span>\
                                        </span>\
                                    </button>\
                                </span>');
                        newTextBoxDiv.appendTo("#add_textbox");
                    }
                    $("#"+key).val(value);
                    counter++;
                });         
                 alert(counter);  // here counter value proper this value use outside ajax                            
                }
            }); 
            alert(counter); // here counter variable value undefine
                      
        });
    
     // var counter = 2;  
    
    // above count variable use here in if condition
       if (counter == 1){
          counter = 2;
       }
    
    // this below code to add a new textbox 
    
        $("#addButton").click(function() {
            if (counter > 5) {
                alert("Only 5 textboxes allow");
                return false;
            }
            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'add_textbox' + counter).addClass('Polaris-TextField Polaris-TextField--hasValue mt-2');
            newTextBoxDiv.after().html('<div style="width: 90%;">\
                    <input type="text" class="Polaris-TextField__Input" autocomplete="off" placeholder="https://www.google.com" id="specificurl' + counter + '" name="specificurl' + counter + '" />\
                        </div>\
                    <span class="pl-3">\
                        <button class="Polaris-Button remove_url" type="button" id="remove_url' + counter + '" onclick="remove_url()">\
                            <span class="Polaris-Button__Content">\
                            <span class="Polaris-Button__Text"><i class="fa fa-trash" style="font-size:24px"></i></span>\
                            </span>\
                        </button>\
                    </span>');
            newTextBoxDiv.appendTo("#add_textbox");
            counter++;
            $('.save-bar').css('display', 'block');
        });
        // Add Url
    
        // Remove Url
        function remove_url() {        
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            
            $("#add_textbox" + counter).remove();
            counter--;
            $('.save-bar').css('display', 'block');
        }
        // Remove Url

```

0 Answers0