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>
2 odpowiedzi
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>
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>
Podobne pytania
Nowe pytania
jquery
jQuery to biblioteka JavaScript, rozważ także dodanie tagu JavaScript. jQuery to popularna biblioteka JavaScript działająca w różnych przeglądarkach, która ułatwia przechodzenie przez Document Object Model (DOM), obsługę zdarzeń, animacje i interakcje AJAX, minimalizując rozbieżności między przeglądarkami. Pytanie oznaczone tagiem jQuery powinno być powiązane z jQuery, więc jQuery powinno być używane przez dany kod i przynajmniej elementy związane z użyciem jQuery muszą znajdować się w pytaniu.