ajax response is working without wp_ajax action - ajax

HTML:
<form enctype="multipart/form-data" action="" method="POST" style="margin-top: 20px; ">
<div class="row btts-form-group clearfix">
<div style="width: 20%; float: left; margin-right: 1%;">
Image : <input type="file" name="image[]">
</div>
<div style="width: 27%; float: left; margin-right: 1%;">
Title : <input type="text" name="title[]">
</div>
<div style="width: 22%; float: left; margin-right: 1%;">
More Info : <input type="text" name="more_info[]">
</div>
<div style="width: 22%; float: left; margin-right: 1%;">
Button : <input placeholder="Put the url.." type="text" name="button_link[]">
</div>
<div style="width: 5%; float: left; ">
<input type="button" class="button button-primary add_more" value="+">
</div>
</div>
<input type="submit" class="button button-primary" value="Save Change" style="margin-top: 20px;">
</form>
Here is my simple jquery code to append a row of a form:
$(document).ready(function(){
$('body').on('click', '.add_more', function(e){
$.ajax({
url : absbBtToS.ajax_url,
type : 'get',
data : {
action : 'new_slider_html',
security : absbBtToS.check_nonce
},
success : function( response ) {
$('.btts-form-group:last').after(response);
//console.log(response);
//jQuery('.rml_contents').html(response);
},
error : function(error){
console.log(error);
}
});
e.stopImmediatePropagation();
});
});
Ajax Action :
add_action( 'wp_ajax_new_slider_html', 'new_slider_html');
function new_slider_html(){
include( plugin_dir_path( __FILE__ ) . 'admin/partials/absb_bt_to_s-admin-display.php');
if( !check_ajax_referer( 'absbBtToS-nonce', 'security' ) ){
wp_send_json_error('error!');
}
show_slider_form_input();
}
And show_slider_form_input(); definition is as follows which is inside absb_bt_to_s-admin-display.php:
function show_slider_form_input(){?>
<div class="row btts-form-group clearfix" >
<div style="width: 20%; float: left; margin-right: 1%;">
Image : <input type="file" name="image[]" />
</div>
<div style="width: 27%; float: left; margin-right: 1%;">
Title : <input type="text" name="title[]" />
</div>
<div style="width: 22%; float: left; margin-right: 1%;">
More Info : <input type="text" name="more_info[]" />
</div>
<div style="width: 22%; float: left; margin-right: 1%;">
Button : <input placeholder="Put the url.." type="text" name="button_link[]" />
</div>
<div style="width: 5%; float: left; ">
<input type="button" class="button button-primary add_more" value="+" />
</div>
</div>
<?php }
Everything is cool and working as expected. But if I remove following code:
add_action( 'wp_ajax_new_slider_html', 'new_slider_html');
function new_slider_html(){
include( plugin_dir_path( __FILE__ ) . 'admin/partials/absb_bt_to_s-admin-display.php');
if( !check_ajax_referer( 'absbBtToS-nonce', 'security' ) ){
wp_send_json_error('error!');
}
show_slider_form_input();
}
It works as usual. As far I know the above code is only responsible to push response. I searched in my entire plugin no duplicate code is there. My question is how the ajax response come from? I am apologizing if I am asking something like nonsense. I just started to learn Ajax with wordpress.

I had the same "issue" but when I searched the whole theme folder I found that I am declaring add_action wp_ajax in other function file.

Related

The null value is being validated. Laravel

I have a form with dynamically added / removed inputs, however if I add input and don't enter anything, the null value is written to the database, the validator does not catch null. Googling did not find a similar question, on the contrary, everyone was interested in how to pass null through the validator. Maybe I didn't google it well.
$request->validate([
'properties' => 'required|min:1',
]);
Properties fiel:
<div class="input-group row">
<label for="category_id" class="col-sm-2 col-form-label">Product properties: </label>
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="input-group mb-3">
#isset($product)
#foreach($product->properties as $prod)
<input type="text" name="properties[][key]" value="{{ $prod['key'] ?? '' }}" class="form-control m-input editinp-key" placeholder="Key" autocomplete="off">
<input type="text" name="properties[][value]" value="{{ $prod['value'] ?? '' }}" class="form-control m-input ml-3 editinp-value" placeholder="Value" autocomplete="off">
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Remove</button>
</div>
#endforeach
#endisset
#if(Session::has('properties'))
#foreach(Session::get('properties') as $prop)
<input type="text" name="properties[][key]" value="{{ $prop['key'] ?? '' }}" class="form-control m-input" placeholder="Key" autocomplete="off">
<input type="text" name="properties[][value]" value="{{ $prop['value'] ?? '' }}" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Remove</button>
</div>
#endforeach
#endif
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add</button>
</div>
</div>
</div>
jQuery:
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="input-group mb-3">';
html += '<input type="text" name="properties[][key]" class="form-control m-input ml-3" placeholder="Key" autocomplete="off">';
html += '<input type="text" name="properties[][value]" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">';
html += '<div class="input-group-append ml-3">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
});
// remove row
$('#removeRow').on('click', function () {
$(this).closest('#inputFormRow').remove();
});
Assuming you pass an array of objects with key and value keys, you can validate your request like this:
$request->validate([
'properties' => 'required|min:1',
'properties.*.key' => 'required',
'properties.*.value' => 'required',
]);
Maybe use Validator ?
$data = Validator::make($request->all(), [
'properties' => ['present', 'string', 'min:1'],
]);
if ($data->fails()) {
$error_msg = "Validation failed, please reload the page";
return Response::json($data->errors());
}
From further comments I realized what it is you are trying to do:
It is very similar to what i did here:
page.blade.php:
<table class="table table-bordered" id="dynamic_field">
#if ($errors->any())
<tbody id="dynamic_field-1">
#php $name_count = 1 #endphp
#foreach (old('name') as $name)
#if($name_count == 1)
<tr id="{{$name_count}}">
<td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" value="{{old('name.'.($name_count-1))}}" class="form-control #error('name.'.($name_count-1)) is-invalid #enderror" maxlength="240"/></td>
<td style="width: 10%;"><button type="button" name="add" id="add-1" class="btn btn-success">{{ __('Add More') }}</button></td>
</tr>
#else
<tr id="row{{$i}}">
<td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" value="{{old('name.'.($name_count-1))}}" class="form-control #error('name.'.($name_count-1)) is-invalid #enderror" maxlength="240"/></td>
<td style="width: 10%;"><button type="button" name="remove" id="{{$i}}" class="btn btn-danger btn_remove">X</button></td>
</tr>
#endif
#php $i += 1 #endphp
#php $name_count += 1 #endphp
#endforeach
</tbody>
#else
<tbody id="dynamic_field-1">
<tr>
<td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" class="form-control" maxlength="240"/></td>
<td style="width: 10%;"><button type="button" name="add" class="btn btn-success" id="add-1" >{{ __('Add More') }}</button></td>
</tr>
</tbody>
#endif
</table>
jQuery:
$(document).ready(function(){
var i = {{$i ? $i+=1 : '1'}};
$('#add-1').click(function(){
i++;
$('#dynamic_field-1').append('<tr id="row'+i+'"><td style="width: 90%; padding: 0px; position: relative;"><input style="position: absolute; top: 0px; left: 0px; height: 100%; border: none; border-radius: 0px;" type="text" name="name[]" class="form-control" maxlength="240"/></td><td style="width: 10%;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td> </tr> ');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
And Controller:
foreach($request->input('name') as $key => $value) {
$rules["name.{$key}"] = array('string', 'max:255');
}
$data = Validator::make($request->all(), $rules);
if ($data->fails()) {
return redirect()
->back()
->withErrors($data)
->withInput($request->input());
}else{...
Your description isn't clear enough to understand. For validation you may use required|min:1|not_in:null for getting the validation error
The validation should be like this:
$request->validate([
'properties' => 'required|integer|min:1',
]);

Xpath for input tag(radio button) inside a span class

Below is the code :
I want to select the radio button which is present within the span class. Could you please help in identifying a successful xpath ?
<div id="quicklinkbox" class="col-md-2" data-position="left" data-intro="You can directly download payslip PDFs for the last 3 or 6 months. (India payslip only)" data-step="4">
<div style="background-color: transparent; margin-top: 28px;">
<div id="panel-title" ng-click="changeExpand(expand);" style="position: relative; left: 24px; cursor: pointer; font-weight: 500;">Quick Download</div>
<div id="panel-title" class="panel-body" style="text-align: left; font-weight: lighter; padding: 5px 0px 0px 50px; font-weight: 400">
<span style="margin-left: -16px;">Payslips for</span>
<form class="ng-pristine ng-valid">
<div class="form-group">
<div class="radio">
<span same-heightcol="" style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" style="cursor: pointer;" value="3" name="payslipradio"/>
<span style="font-size: 16px; position: relative; top: -5px;">Last 3 months</span>
</span>
</div>
<div class="radio">
<span style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" value="6" name="payslipradio" style="cursor: pointer;"/>
<span style="font-size: 16px; position: relative; top: -5px;"> Last 6 months</span>
</span>
</div>
<img style="margin-bottom: -12px; margin-left: -16px; cursor: pointer;" ng-click="downloadbulkpayslip()" src="appResources/images/Download-button.png"/>
</div>
</form>
</div>
</div>
</div>
</div>
You can use:
//span/input[#name='payslipradio' and #value='6']
Explanation:
//span -> Will search in all HTML al span tag
/input -> Will searth inside the span tag previous selected a input tag
[#name='payslipradio' and #value='6'] -> Will search in the previous selected tags one that the name attr is equals to 'pslpradio' and value attr equals to '6'
//*span[input#class='ng-pristine ng-valid' and #type='radio']))

Need to identify element

Below is some HTML code, in which I need to find the element with the content win8 (last element, <div class="desc">win8</div>).
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 5002; outline: 0px none; position: absolute; height: auto; width: 800px; top: 7px; left: 537px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="multi-wizard instance-wizard ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 518px;">
<div class="progress">
<form novalidate="novalidate">
<div class="steps">
<div class="step setup loaded" wizard-step-id="setup" style="display: none;">
<div class="step select-iso loaded" wizard-step-id="select-iso" style="display: block;">
<div class="wizard-step-conditional select-template" style="display: block;">
<div class="main-desc">
<div class="template-select content tab-view ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<input type="hidden" value="XenServer" name="hypervisor" wizard-field="hypervisor">
<div id="instance-wizard-featured-templates" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div class="select-container">
<div class="select **even**">
<input type="radio" name="templateid" wizard-field="template" value="b0c24832-6fdf-11e4-a45f-b6eb114441ae">
<div class="select-desc">
</div>
<div class="select **odd**">
<input type="radio" name="templateid" wizard-field="template" value="7720cdb2-b81a-4839-94cd-b56b660e3324">
<div class="select-desc">
<div class="name">win8</div>
<div class="desc">win8</div>
</div>
</div>
I tried the following XPath:
.//*[#id='instance-wizard-featured-templates']/div/div[2]/input
The issue is the screen has 2 elements, even and odd. Each time it loads it swaps the values. So the XPath selects the wrong element.
Is there a way to exactly select win8?
Assuming you always want to get the element with the class named 'desc', the correct XPath is looks like this:
//div[#class="desc" and text()="win8"]
This selects all <div> elements having the class 'desc' and 'win8' as text.

Can't edit form input fields inside fancybox

Im using Fancybox to edit entities without reloading the whole page. But after loading the form content via ajax I can't edit the input fields. If I click in one of the input I lose the focus instantly.
The code for showing fancybox is very simple:
<a class="lightbox fancybox.ajax" href="/app_dev.php/devices/517781e3e707a00217000033/edit">Bearbeiten</a>
and the javascript (submitting the form not implemented yet)
$(document).ready(function() {
$(".lightbox").fancybox({
minWidth : 300,
minHeight : 150,
openEffect : 'none',
closeEffect : 'none'
});
});
The content returned over ajax:
<form class="lightbox" action="/app_dev.php/devices/517781e3e707a00217000033/edit" method="POST">
<fieldset id="device">
<p>
<label for="device_name" class="required"> device.name </label>
<input type="text" id="device_name" name="device[name]" required="required" value="VW BUS">
</p>
<p>
<label for="device_type" class="required"> device.type </label>
<select id="device_type" name="device[type]" required="required">
<option value="0">FME 2100</option>
<option value="1">FME 2200</option>
<option value="2">FME 3200</option>
</select>
</p>
<p>
<label for="device_number" class="required"> device.number </label>
<input type="text" id="device_number" name="device[number]" required="required" value="+43xxxxxxxxx">
</p>
<p>
<label for="device_imei" class="required"> device.imei </label>
<input type="text" id="device_imei" name="device[imei]" required="required" value="xxxxxxxxxxxx">
</p>
<input type="hidden" id="device__token" name="device[_token]" value="xxxxxxxxxxxxxxx">
</fieldset>
<input type="submit" value="form.save">
</form>
As said, I'm losing instantly the focus on the input fields. The select is working...
I'm using fancybox 2.1.4 with jquery 1.9.1
You can go with this fiddle and change as per syntax : http://jsfiddle.net/UYHxc/2/
$.fancybox.open('#divFancyBoxTest',{
// prevents closing when clicking INSIDE fancybox
openEffect : 'none',
closeEffect : 'none',
closeBtn : false,
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
$('#addbtn').click(function(){
$(".input_add").toggle(); //add input box
});
<div id="divFancyBoxTest">
<div style=" font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 17px;">Click the link in the email we have sent to</div>
<div style="text-align:center; margin-bottom: 17px;">logout</div>
<div style=" font-size: 14px; font-weight: bold; text-align: center;margin-bottom: 17px;">to complete your registration.</div>
<div style=" font-size: 14px; text-align: center;margin-bottom: 17px;"><span style="color: #00A8EC; font-weight: bold;padding-left: 5px;padding-right: 5px;">
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="resendemail">Resend confirmation email </a>
<span style="color:#000;">|</span>
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="addbtn">Change email address</a>
<div class="input_add" style="margin-top: 30px;display: none;">
<input type="text" name="email" style="padding-top: 4px !important;" >
<button style="background-color: #00A8EC;height: 30px;box-shadow: none;border: 1px solid #00A8EC;color: #fff;">Submit</button>
</div>
</span>
</div>
</div>
<input type="text" id="something" value="test" />
</div>

How to change colour select button in kendo ui upload

How to change the select button in kendo ui upload, i add background-color:#3399FF; but it does not work in IE 8. I have modified using the following CSS but not working in IE 8. Please advise.
<form method="post" action='#Url.Action("Index")' style="width:45%">
<div>
<table style="border:0">
<tr style="border:0;">
<span>Import Consumer List:</span>
</tr>
<tr style="border:"0">
<td style="border:0;">
#(Html.Kendo().Upload()
.HtmlAttributes(new { #Style = "align:center; font-size:12px" })
.Name("FileUpload")
.Multiple(false)
.Events(ev => ev.Success("onSuccess"))
)
</td>
<td style="border:0;">
<input type="submit" id="btnSubmit" value="Import" style="height:31px; font-size:14px; background-color:#3399FF" class="k-button" />
</td>
</tr>
</table>
</div>
</form>
.k-upload-button {
direction: ltr;
overflow: hidden !important;
position: relative;
width: 86px;
font-size:14px;
background-color:#3399FF;
}
If you have your kendoUpload defined as:
<form method="post" action="submit" style="width:45%">
<div>
<input name="files" id="files" type="file" />
<p>
<input type="submit" value="Submit" class="k-button" />
</p>
</div>
</form>
and the following initialization:
$("#files").kendoUpload({});
you might define the style for Submit button as:
input.k-button {
direction: ltr;
overflow: hidden !important;
position: relative;
width: 86px;
font-size:14px;
background-color:#3399FF;
}
or:
#submit.k-button {
direction: ltr;
overflow: hidden !important;
position: relative;
width: 86px;
font-size:14px;
background:#3399FF;
}
This worked for me:
<style>
.k-upload-button{
background-color:crimson !important;
}
</style>

Resources