I want to debounce on all key presses excluding return. I have tried the following but it doesn't debounce.
some_stream.flatMap((event) => {
if(event.keyCode == 13){
return Kefir.stream(emitter => {
emitter.emit(event.target.value);
});
}else{
const debounced_stream = Kefir.stream(emitter => {
emitter.emit(event.target.value);
}).debounce(1000)
return debounced_stream;
}
})
I was able to solve this with the code block below which debounces on every keyCode except 13:
const search_stream = Kefir.fromEvents(self.search_keyword._tag.input, 'keyup');
const debounced_search_stream = search_stream
.filter((event) => {
return event.keyCode != 13;
})
.map((event) => {
return event.target.value;
})
.debounce(1000);
const not_debounced_search_stream = search_stream
.filter((event) => {
return event.keyCode == 13;
})
.map((event) => {
return event.target.value;
})
Kefir.merge([debounced_search_stream, not_debounced_search_stream]).onValue(keyword => {
if(keyword !== null){
if (keyword) {
//do something
}
}
})
Related
Im doing my first CRUD with Vue - Laravel, i did a Add function that works fine but my Edit button is doing another Add function.
(I get the alert from updateDespesa alert("Usuário Alterado!");)
My Frontend:
async updateDespesa(despesa) {
const response = await axios
.put("api/despesas/" + despesa, {
des: this.despesa.des,
valr: this.despesa.valr,
vencc: this.despesa.vencc,
stt: this.despesa.stt,
emiss: this.despesa.emiss,
})
.then((response) => {
this.despesa.id = "";
this.despesa.valr = "";
this.despesa.stt = "";
this.despesa.vencc = "";
this.despesa.emiss = "";
this.getDespesa();
if(despesa){
alert("Usuário Alterado!");
}
})
.catch((err) => {
console.log(err);
});
},
My Backend:
public function update(Request $request, $id) {
if ($id == 0) {
$despesa = new Despesa;
$despesa->create($request->all());
}
else {
$despesa = Despesa::findOrFail($id);
$despesa->fill($request->all())->save();
}
//$despesa->update($request->all());
return response()->json('Sucess');
}
In your backend, try update this and see
public function update(Request $request, $id) {
if ($id == 0) {
$despesa = new Despesa;
$despesa->create($request->all());
}
else {
$despesa = Despesa::findOrFail($id);
$despesa->fill($request->all())->save();
}
//$despesa->update($request->all());
return response()->json('Sucess');
}
and also please check the Despesa Model has declared the input fields in protected $fillable
async updateDespesa(despesa) {
const response = await axios
.put("api/despesas/" + despesa, {
...
})
.then((response) => {
// add this line, to check only alert when id is not null
// so that it only alert when update
if(despesa){
alert("Usuário Alterado!");
}
....
})
.catch((err) => {
console.log(err);
});
},
I am working with laravel and ajax. But when I register I see this error 302.
I know this may be a trivial question but I am just not able to get this ajax call to work.
Auth/RegisterController.php
protected function create(array $data, Request $request)
{
if ($request->hasFile('image')) {
$fileNameWithExt = $request->file('image')->getClientOriginalName();
$filename = pathinfo($fileNameWithExt, PATHINFO_FILENAME);
$extention = $request->file('image')->getClientOriginalExtension();
$fileNameToStore = $filename.'_'.time().'.'.$extention;
$path = $request->file('image')->storeAs('public/images', $fileNameToStore);
} else {
$fileNameToStore = 'noimage.jpg';
}
return User::create([
'firstname' => $data['firstـname'],
'lastname' => $data['lastـname'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
'mobile' => $data['mobile'],
'nasional_code' => $data['national_code'],
'birthdate' => $data['birthـdate'],
'document' => $data['document'],
'educational' => $data['educational'],
'gender' => $data['gender'],
'side' => $data['side'],
$fileNameToStore => $data['image']
]);
}
My ajax is register.js file
How do I pass the "Accept'=>'application/json" in request when testing:
I want to add 'accept'=>'application/json' to my request header.
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
$('form fieldset:first').fadeIn('slow');
$('form input[type="text"], form input[type="password"], form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
$('form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
var current_active_step = $(this).parents('form').find('.form-wizard.active');
var progress_line = $(this).parents('form').find('.progress-line');
parent_fieldset.find('input[type="text"], input[type="password"], input[type="email"], input[type="radio"]').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
parent_fieldset.find('input[type="checkbox"]').each(function() {
if( $(this).prop("checked") == false ) {
$('.form-check-label').css("color","red");
next_step = false;
}
else {
$('.form-check-label').css("color","black");
}
});
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
bar_progress(progress_line, 'right');
$(this).next().fadeIn();
scroll_to_class( $('form'), 20 );
});
}
});
// previous step
$('form .btn-previous').on('click', function() {
var current_active_step = $(this).parents('form').find('.form-wizard.active');
var progress_line = $(this).parents('form').find('.progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
bar_progress(progress_line, 'left');
$(this).prev().fadeIn();
scroll_to_class( $('form'), 20 );
});
});
$('form').on('submit', function(e) {
$(this).find('input[type="text"], input[type="password"], input[type="username"], input[type="email"], input[type="tel"], input[type="url"], textarea').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
});
});
Update your ajax header, according to this:
$.ajaxSetup({
headers: {
accepts: "application/json; charset=utf-8",
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
The possibilities of this issue is CSRF token and missing route.
I am working with laravel and ajax. But when I register I see this error 302.
I know this may be a trivial question but I am just not able to get this ajax call to work.
Auth/RegisterController.php
protected function create(array $data, Request $request)
{
if ($request->hasFile('image')) {
$fileNameWithExt = $request->file('image')->getClientOriginalName();
$filename = pathinfo($fileNameWithExt, PATHINFO_FILENAME);
$extention = $request->file('image')->getClientOriginalExtension();
$fileNameToStore = $filename.'_'.time().'.'.$extention;
$path = $request->file('image')->storeAs('public/images', $fileNameToStore);
} else {
$fileNameToStore = 'noimage.jpg';
}
return User::create([
'firstname' => $data['firstـname'],
'lastname' => $data['lastـname'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
'mobile' => $data['mobile'],
'nasional_code' => $data['national_code'],
'birthdate' => $data['birthـdate'],
'document' => $data['document'],
'educational' => $data['educational'],
'gender' => $data['gender'],
'side' => $data['side'],
$fileNameToStore => $data['image']
]);
}
My ajax is register.js file
How do I pass the "Accept'=>'application/json" in request when testing:
I want to add 'accept'=>'application/json' to my request header.
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
$('form fieldset:first').fadeIn('slow');
$('form input[type="text"], form input[type="password"], form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
$('form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
var current_active_step = $(this).parents('form').find('.form-wizard.active');
var progress_line = $(this).parents('form').find('.progress-line');
parent_fieldset.find('input[type="text"], input[type="password"], input[type="email"], input[type="radio"]').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
parent_fieldset.find('input[type="checkbox"]').each(function() {
if( $(this).prop("checked") == false ) {
$('.form-check-label').css("color","red");
next_step = false;
}
else {
$('.form-check-label').css("color","black");
}
});
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
bar_progress(progress_line, 'right');
$(this).next().fadeIn();
scroll_to_class( $('form'), 20 );
});
}
});
// previous step
$('form .btn-previous').on('click', function() {
var current_active_step = $(this).parents('form').find('.form-wizard.active');
var progress_line = $(this).parents('form').find('.progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
bar_progress(progress_line, 'left');
$(this).prev().fadeIn();
scroll_to_class( $('form'), 20 );
});
});
$('form').on('submit', function(e) {
$(this).find('input[type="text"], input[type="password"], input[type="username"], input[type="email"], input[type="tel"], input[type="url"], textarea').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
});
});
#(Html.Kendo().Grid<Tracker.TMS.BE.uspTMSSelectAreas_Result>()
.Name("AvailableAreas")
.Groupable()
.Sortable()
.Filterable()
.Scrollable()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.Columns(columns =>
{
columns.Bound(e => e.CustomerVehicleID).Visible(false);
columns.Bound(e => e.AreaID).Visible(false);
columns.Bound(e => e.AreaType).Title("Area Type").Width(100);
columns.Bound(e => e.SubType).Title("Sub Type").Width(100);
columns.Bound(e => e.AreaName).Title("Area Name");
})
.Resizable(resize => resize.Columns(true))
.Pageable(page => page.Enabled(false)).NoRecords("No records found.")
.Events(e => e.Change("availableAreaSelected"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAvailableAreas", "Vehicle").Data("filterAreas"))))
Grid column resizing does not work in IE in Kendo UI version 2016.2.607. Please use another version, or the following workaround, which overrides the client-side Grid object prototype:
http://dojo.telerik.com/AzaKu/2
kendo.ui.Grid.fn._positionColumnResizeHandle = function() {
function cursor(context, value) {
$('th, th .k-grid-filter, th .k-link', context)
.add(document.body)
.css('cursor', value);
}
var NS = ".kendoGrid",
that = this,
isRtl = kendo.support.isRtl(that.element),
indicatorWidth = that.options.columnResizeHandleWidth,
lockedHead = that.lockedHeader ? that.lockedHeader.find("thead:first") : $();
that.thead.add(lockedHead).on("mousemove" + NS, "th", function(e) {
var th = $(this);
if (th.hasClass("k-group-cell") || th.hasClass("k-hierarchy-cell")) {
return;
}
function getPageZoomStyle() {
var docZoom = parseFloat($(document.documentElement).css("zoom"));
if (isNaN(docZoom)) {
docZoom = 1;
}
var bodyZoom = parseFloat($(document.body).css("zoom"));
if (isNaN(bodyZoom)) {
bodyZoom = 1;
}
return docZoom * bodyZoom;
}
var clientX = e.clientX / getPageZoomStyle(),
winScrollLeft = $(window).scrollLeft(),
position = th.offset().left + (!isRtl ? this.offsetWidth : 0);
if (clientX + winScrollLeft > position - indicatorWidth && clientX + winScrollLeft < position + indicatorWidth) {
that._createResizeHandle(th.closest("div"), th);
} else if (that.resizeHandle) {
that.resizeHandle.hide();
} else {
cursor(that.wrapper, "");
}
});
}
Slight modification to #dimodi's answer since in ie if the body zoom is set to 1 then
$(document.body).css("zoom")
will return 100% and not 1, this will prevent the users from resizing
kendo.ui.Grid.fn._positionColumnResizeHandle = function() {
function cursor(context, value) {
$('th, th .k-grid-filter, th .k-link', context)
.add(document.body)
.css('cursor', value);
}
var NS = ".kendoGrid",
that = this,
isRtl = kendo.support.isRtl(that.element),
indicatorWidth = that.options.columnResizeHandleWidth,
lockedHead = that.lockedHeader ? that.lockedHeader.find("thead:first") : $();
that.thead.add(lockedHead).on("mousemove" + NS, "th", function(e) {
var th = $(this);
if (th.hasClass("k-group-cell") || th.hasClass("k-hierarchy-cell")) {
return;
}
function getPageZoomStyle() {
var docZoom = parseFloat($(document.documentElement).css("zoom"));
if (isNaN(docZoom)) {
docZoom = 1;
}
var bodyZoom = parseFloat($(document.body).css("zoom"));
if (isNaN(bodyZoom)) {
bodyZoom = 1;
}
else if (bodyZoom>=100 && (browser.msie || browser.edge)) {
bodyZoom = bodyZoom/100;
}
return docZoom * bodyZoom;
}
var clientX = e.clientX / getPageZoomStyle(),
winScrollLeft = $(window).scrollLeft(),
position = th.offset().left + (!isRtl ? this.offsetWidth : 0);
if (clientX + winScrollLeft > position - indicatorWidth && clientX + winScrollLeft < position + indicatorWidth) {
that._createResizeHandle(th.closest("div"), th);
} else if (that.resizeHandle) {
that.resizeHandle.hide();
} else {
cursor(that.wrapper, "");
}
});
}
I got JqGrid with modified cellEdit ( full up-down-left-right cell navigation ).
Here is bits of jqgrid.src:
if (e.keyCode === 37) {
if(!$t.grid.hDiv.loading ) {
{$($t).jqGrid("prevCell",iRow,iCol);} //left
} else {
return false;
}
}
if (e.keyCode === 39) {
if(!$t.grid.hDiv.loading ) {
{$($t).jqGrid("nextCell",iRow,iCol);} //right
} else {
return false;
}
}
if (e.keyCode === 38) {
if(!$t.grid.hDiv.loading ) {
{$($t).jqGrid("prevRow",iRow,iCol);} //up
} else {
return false;
}
}
if (e.keyCode === 40) {
if(!$t.grid.hDiv.loading ) {
{$($t).jqGrid("nextRow",iRow,iCol);} //down
} else {
return false;
}
}
and others
nextCell : function (iRow,iCol) {
return this.each(function (){
var $t = this, nCol=false, i;
if (!$t.grid || $t.p.cellEdit !== true) {return;}
// try to find next editable cell
for (i=iCol+1; i<$t.p.colModel.length; i++) {
if ($t.p.colModel[i].editable ===true && $t.p.colModel[i].hidden !== true ) {
//alert($t.p.colModel[i-1].hidden);
nCol = i; break;
}
}
if(nCol !== false) {
$($t).jqGrid("editCell",iRow,nCol,true);
} else {
if ($t.p.savedRow.length >0) {
$($t).jqGrid("saveCell",iRow,iCol);
}
}
});
},
prevCell : function (iRow,iCol) {
return this.each(function (){
var $t = this, nCol=false, i;
if (!$t.grid || $t.p.cellEdit !== true) {return;}
// try to find next editable cell
for (i=iCol-1; i>=0; i--) {
if ($t.p.colModel[i].editable ===true && $t.p.colModel[i].hidden !== true ) {
nCol = i; break;
}
}
if(nCol !== false) {
$($t).jqGrid("editCell",iRow,nCol,true);
} else {
if ($t.p.savedRow.length >0) {
$($t).jqGrid("saveCell",iRow,iCol);
}
}
});
},
prevRow : function (iRow,iCol) {
return this.each(function (){
var $t = this, nCol=false, i;
if (!$t.grid || $t.p.cellEdit !== true) {return;}
// try to find next editable cell
iRow--;
iCol++;
for (i=iCol-1; i>=0; i--) {
if ( $t.p.colModel[i].editable ===true) {
nCol = i; break;
}
}
if(nCol !== false) {
$($t).jqGrid("editCell",iRow,nCol,true);
} else {
if ($t.p.savedRow.length >0) {
$($t).jqGrid("saveCell",iRow,iCol);
}
}
});
},
nextRow : function (iRow,iCol) {
return this.each(function (){
var $t = this, nCol=false, i;
if (!$t.grid || $t.p.cellEdit !== true) {return;}
// try to find next editable cell
iRow++;
iCol++;
for (i=iCol-1; i>=0; i--) {
if ( $t.p.colModel[i].editable ===true) {
nCol = i; break;
}
}
if(nCol !== false) {
$($t).jqGrid("editCell",iRow,nCol,true);
} else {
if ($t.p.savedRow.length >0) {
$($t).jqGrid("saveCell",iRow,iCol);
}
}
});
}
Also i got autocomplete working with JqGrid event afterEditCell:
getautocompl = function(rowid,cellname,value,iRow,iCol){
setTimeout(function() { $("#"+iRow+"_"+cellname).select().focus();},10);
if(cellname!=='date_factory' || cellname!=='date_otgr_factory' || cellname!=='date_shipment' || cellname!=='date_sklad' || cellname!=='kolinkor'
|| cellname!=='kolkor' || cellname!=='kol_quantity' || cellname!=='description') {
$("#"+iRow+"_"+cellname).autocomplete({
source:"../../phpmon/autocomplete.php?fname="+cellname,
delay:250,
minLength: 2});
}
}
Problem here is that i cant manage autocomplete hotkeys to work, when i hit "down" button it just goes to next cell, rather then to any of the autocomplete options.
you could suppress jqgrid navigation when autocomplete element is visible. something like:
$(document).keydown(function( fn ){
var key = fn.keyCode;
if( $("#autocomplete") && key == 40)
/* your autocomplete action*/
});
Its not quite what i needed, but it helped me to make it.
I just modified jqgrid source code like this :
if (e.keyCode === 40) {
if(!$t.grid.hDiv.loading ) {
if ($('.ui-menu-item').length < 1) {
{$($t).jqGrid("nextRow",iRow,iCol);} //down
}
} else {
return false;
}
}
Where .ui-menu-item is class of autocomplete widget.
thk a lot