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>
Related
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',
]);
I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1.
The question if I increment the value of input type number how the price double if i increase the value of number?
blade
#foreach($service->invoices as $invoice)
<tr>
<td class="text-right">{{ $invoice->description }}</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">{{ $invoice->price }}
<td class="total"></td>
</tr>
#endforeach
script.js
<script>
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
</script>
css
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
My input number is like this.
You can use click and input event to achieve above . I have removed updateTotal function and have merge all code in one . In below code i have use $(this).closest('tr') to get closest tr where the buttons or the input-box is located and then i have use .find to get require values from input and finally added total to .total td .
Demo Code :
//when - or + click or qty input
$(".minus , .plus , .quantity").on("click input", function() {
var selectors = $(this).closest('tr'); //get closest tr
var quan = selectors.find('.quantity').val(); //get qty
if (!quan || quan < 0)
return;
var cost = parseFloat(selectors.find('.cost').text());
var total = (cost * quan).toFixed(2);
selectors.find('.total').text(total); //add total
})
nput[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid #ddd;
display: inline-flex;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 1rem;
height: 2px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 5rem;
padding: .5rem;
border: solid #ddd;
border-width: 0 2px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="text-right">A</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<!--just add minus class-->
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">13
<td class="total"></td>
</tr>
<tr>
<td class="text-right">B</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
<label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
</div>
</td>
<td>
<div class="form-row justify-content-center">
<div class="form-group mb-0">
<div class="input-group mx-auto mb-0">
<div class="number-input amount">
<button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
<input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
</div>
</div>
</div>
</div>
</td>
<td class="cost">135
<td class="total"></td>
</tr>
</table>
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.
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']))
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>