jak używać zdarzenia onchange zamiast setInterval w tym skrypcie

Question

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>

jquery html ajax laravel eloquent

0

Neeraj Tangariya 23 marzec 2020, 17:07

Answer 1

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

Answer 2

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

jak używać zdarzenia onchange zamiast setInterval w tym skrypcie

2 odpowiedzi

Podobne pytania

Nowe pytania

jquery