W moim projekcie laravel mam pole wejściowe colorpicker, w którym chcę automatycznie zapisać wartość w bazie danych. W tej sekcji wkleiłem skrypt, który działa poprawnie. Ale problem polega na tym, że kontynuowanie zapisywania wartości po interwale. Ale czego ja chcę? Kiedy kliknę pole wejściowe, zdarzenie zostanie uruchomione bez kliknięcia i nie będzie kontynuowane. więc proszę, czy ktoś może mi pomóc, jak mogę wykorzystać do tego wydarzenie onchange. Wkleiłem poniższy kod, sprawdź to i daj mi znać

<script>  
$(document).ready(function(){  
     function autoSave()  
     {  
            var id =$("#hid").val();
            var statscolor = $('#statscolor').val();  


               $.ajax({  
                    headers: {
                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                     },
                    method:"put",  
                    // url:"{{ route('companyStats.update', $auto->id) }}",   
                    url:"colorstats/"+id,   
                    data:{backgroundcolor:statscolor},  
                    dataType:"text",  
                    success:function(data)  
                    {  

                         console.log(data);  
                         // $('#autoSave').fadeIn().text("color successfully updated");
                         // $('#autoSave').fadeOut(3000);
                         $('#autoSave').text('updatedsuccessfully');
                         // setInterval(function(){

                         //      $('#autoSave').fadeOut();


                         // }, 5000); 
                         /*setTimeout(function() {
                            // $('#autoSave').fadeOut("slow");
                            $('#autoSave').fadeIn().text("color successfully updated");
                        }, 5000 ); */


                    }  
               });  

     }
     setInterval(function(){   
          autoSave();   
          }, 5000);  
});  
</script>

To jest pole wejściowe ostrza

     <div class="form-group">
                               <label for="statscolor">Background Color</label>

                               <input type="hidden" id="hid" value="{{$auto->id}}" name="hid">

                               <input class="jscolor float-right" name="backgroundcolor" id="statscolor" value="{{$auto->backgroundcolor}}" autocomplete="off" style="background-image: none; background-color: rgb(0, 142, 255); color: rgb(255, 255, 255);" onChange="autoSave()">

                               <small id="autoSave"></small>

                           </div>
0
Neeraj Tangariya 23 marzec 2020, 17:07

2 odpowiedzi

Najlepsza odpowiedź

Ta odpowiedź jest oparta na JQuery, ale jeśli używasz jscolor.js (chyba), może wystąpić określone zdarzenie. W tym przypadku za każdym razem, gdy zmienia się kolor, wywoływana jest funkcja. Prawdopodobnie powinieneś zapisać dane po zamknięciu selektora kolorów.

$(document).ready(function() {
  $('.jscolor').on('change', function() {
    var statscolor = $('#statscolor').val();

    alert('Your new Color:' + statscolor);
    //Replace the alert with the ajax call

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="statscolor">Background Color</label>

    <input type="hidden" id="hid" value="{{$auto->id}}" name="hid">

    <input class="jscolor float-right" name="backgroundcolor" id="statscolor" value="{{$auto->backgroundcolor}}" autocomplete="off" style="background-image: none; background-color: rgb(0, 142, 255); color: rgb(255, 255, 255);" >

    <small id="autoSave"></small>

  </div>

Drugie rozwiązanie

Jeśli moje przypuszczenie jest poprawne, to jest rozwiązanie z jscolor.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<div class="form-group">
  <label for="statscolor">Background Color</label>

  <input type="hidden" id="hid" value="{{$auto->id}}" name="hid">

  <input class="jscolor float-right" name="backgroundcolor" id="statscolor" value="{{$auto->backgroundcolor}}" autocomplete="off" style="background-image: none; background-color: rgb(0, 142, 255); color: rgb(255, 255, 255);" onChange="autoSave(this.jscolor)">

  <small id="autoSave"></small>

</div>

<script>
  function autoSave(jscolor) {
    // 'jscolor' instance can be used as a string
    alert('#' + jscolor);
  }
</script>
1
Baro 23 marzec 2020, 14:28

Możesz więc dodać detektor zdarzeń do elementu .jscolor. dla Jquery można powiązać ()

<script>  
$(document).ready(function(){  
 function autoSave()  
 {  
        var id =$("#hid").val();
        var statscolor = $('#statscolor').val();  


           $.ajax({  
                headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
                method:"put",  
                // url:"{{ route('companyStats.update', $auto->id) }}",   
                url:"colorstats/"+id,   
                data:{backgroundcolor:statscolor},  
                dataType:"text",  
                success:function(data)  
                {  

                     console.log(data);  
                     // $('#autoSave').fadeIn().text("color successfully updated");
                     // $('#autoSave').fadeOut(3000);
                     $('#autoSave').text('updatedsuccessfully');
                     // setInterval(function(){

                     //      $('#autoSave').fadeOut();


                     // }, 5000); 
                     /*setTimeout(function() {
                        // $('#autoSave').fadeOut("slow");
                        $('#autoSave').fadeIn().text("color successfully updated");
                    }, 5000 ); */


                }  
           });  

 } 

 $('.jscolor').on('change', function(e){autoSave()});
});  
</script>
0
Prikesh Savla 24 marzec 2020, 13:33