在ajax调用之后获取旧数据（get方法）Laravel 5.5

Question

I'm using two ajax call, on one page: At one side of the page I use ajax post to post data and submit color in a database(table name: color_store) and on the other side I try to get all the colors from that table and put it in a select tag by clicking to a button. But I keep receiving the old data even if I submit a new color.

Here is my color submit form:

    <form method="post" action="/CRM/defineColor" id="colorPickingForm">

        <input id="colorName"  name="colorName" type="text"> 
        <button type="button" class="btn blue" id="addColor">submit</button>

    </form>

Here is my ajax to submit that color to the database:

$('#addColor').click(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var  colorName = $('#colorName').val();

            $.ajax({
                url: "/CRM/defineColor",
                type:"POST",
                data:{ colorName: colorName},
                success: function( data ) {
                       $( "#result" ).empty().append( data )
                    }
              })

Here is the select tag and button that shows data:

   <select class="form-control" id="colorFetch">

   </select>
    <button type="button" class="btn red" id="colorRefresh">Color Update</button>

Here is the ajax call that gets all the colors:

    $.ajax({
                url: "/CRM/fetchColor",
                type:"get",
                dataType: "json",
                cache: false,
                contentType:"application/json; charset=utf-8",
                success: function( colorNameReq ) {


                    $("#colorRefresh").click(function(){

//loop through json object
                        $("#colorFetch").empty();
                        $.each( colorNameReq, function( key, value ) {


                            $('#colorFetch')
                                .append($("<option></option>")
                                    .attr({
                                        id:key,
                                        value:value
                                    })
                                    .text(value));

                        });

                    });
                }
            })

And here is my controller that gets all the colors from database:

     protected function fetchColor(){


        $colorInfo = new Color_store;
        $colorInfo = $colorInfo->get();
        $count = count($colorInfo);

        for($i = 0 ; $i < $count; $i++ ){
            $colorName[] = $colorInfo[$i]->colorName ;
        }

        $colorName=json_encode($colorName);

        return $colorName;
    }

So why am I getting the old values of JSON object, even after submitting the color into database? I don't really understand, isn't ajax suppose to give me the new data?

For example: When I load the page and press "Color update" button it shows me the two color that I submit before(red and green).But when I submit new color to the database, let's say yellow. after pressing the "Color update" button it shows me red and green again but no yellow on the list. isn't it suppose to show the new color in the list(red, green and yellow)?

Any help would be appreciated!

Answer 1

Your color loading AJAX call seems not right. It should be as following:

  $("#colorRefresh").click(function(){
       $.ajax({
                url: "/CRM/fetchColor",
                type:"get",
                dataType: "json",
                cache: false,
                contentType:"application/json; charset=utf-8",
                success: function( colorNameReq ) {

                    //loop through json object
                        $("#colorFetch").empty();
                        $.each( colorNameReq, function( key, value ) {


                            $('#colorFetch')
                                .append($("<option></option>")
                                    .attr({
                                        id:key,
                                        value:value
                                    })
                                    .text(value));

                        });
              }
       });
  });

And make sure whether the new color you added was successfully written to the database.

Also, you could use the set interval function in order to check for the color updates in a given time interval. That would look like:

setInterval(function(){ 
 $.ajax({
                    url: "/CRM/fetchColor",
                    type:"get",
                    dataType: "json",
                    cache: false,
                    contentType:"application/json; charset=utf-8",
                    success: function( colorNameReq ) {

                        //loop through json object
                            $("#colorFetch").empty();
                            $.each( colorNameReq, function( key, value ) {


                                $('#colorFetch')
                                    .append($("<option></option>")
                                        .attr({
                                            id:key,
                                            value:value
                                        })
                                        .text(value));

                            });
                  }
           });
}, 2000); //This would check and update in every 2 seconds.