I have a text field generated by contextmenu, and I want it to be selected by default (autofocus by default). I do not succeed with the function jquery focus [$ ('. classInput'). focus ()]
$(function(){
$.contextMenu({
selector: '.input-context-menu',
items: {
// <input type="text">
name_input: {
name: "Name input :",
type: 'text',
value: "value_input",
events: {
keyup: function(e) {
...
Set focus in the events.show section.
You'll need timeout to let the input element appear in the DOM before setting focus.
The input name will be prefixed with context-menu-input-.
See the snippet below:
$(function() {
$.contextMenu({
selector: '.context-menu-one',
items: {
// <input type="text">
input1: {
name: "Text",
type: 'text',
value: "Hello World",
events: {
keyup: function(e) {
window.console && console.log('key: ' + e.keyCode);
}
}
}
},
events: {
show: function(opt) {
var $this = this;
$.contextMenu.setInputValues(opt, $this.data());
// Set focus to the input element
setTimeout(() => {
$('[name="context-menu-input-input1"]').focus();
}, 10);
},
hide: function(opt) {
var $this = this;
$.contextMenu.getInputValues(opt, $this.data());
}
}
});
});
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<span class="context-menu-one btn btn-neutral">right click me</span>
Hope this helps.
Related
** Jquery submit button click after error message show **
jquery submit button after all field message show before error message not show.
i not want to fire error on click element, currently when I click on element it shows error directly.
$.validator.addMethod("PhoneValidation", (function(e) {
let regex = /^(0)(3)[0-9]{7}$/.test(e);
return(regex);
}), PHONE_VALIDATE);
$("#Number_validation_form").validate({
rules: {
pho_no: {
required: true,
PhoneValidation: true
}
},
messages: {
pho_no: {
required: PHONE_VAL_REQUIRED
}
},
errorPlacement: function(e, t) {
t.is('input[name="accepted"]') ? e.insertAfter($(".checkboxlabel")) : e.insertAfter(t)
},
onfocusin: function(element) {
$(element).valid();
},
success: function(e){
$("#right-mark-img").removeClass( "opacity_0" );
$("#pho_noNumberSubscriptionBtn").prop('disabled', false);
},
submitHandler: function(e) {
//console.log(e);
let load = '<span class="spinner-border spinner-border-sm spin" role="status" aria-hidden="true"></span><span class="sr-only">' + LOADING + '...</span>';
$("#pho_noNumberSubscriptionBtn").html(load);
$("#pho_noNumberSubscriptionBtn").prop("disabled", true);
}
})
Your checking validation on focus element just remove onfocusin code.
your final code like below
$.validator.addMethod("PhoneValidation", (function (e) {
let regex = /^(0)(3)[0-9]{7}$/.test(e);
return(regex);
}), "Phone number is not validate");
$("#Number_validation_form").validate({
rules: {
pho_no: {
required: true,
PhoneValidation: true
}
},
messages: {
pho_no: {
required: "Phone number is required"
}
},
errorPlacement: function (e, t) {
t.is('input[name="accepted"]') ? e.insertAfter($(".checkboxlabel")) : e.insertAfter(t)
},
success: function (e) {
$("#right-mark-img").removeClass("opacity_0");
$("#pho_noNumberSubscriptionBtn").prop('disabled', false);
},
submitHandler: function (e) {
//console.log(e);
let load = '<span class="spinner-border spinner-border-sm spin" role="status" aria-hidden="true"></span><span class="sr-only">loading...</span>';
$("#pho_noNumberSubscriptionBtn").html(load);
$("#pho_noNumberSubscriptionBtn").prop("disabled", true);
}
});
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<form id="Number_validation_form" method="post" action="javascript:void(0);">
<input type="text" name="pho_no" placeholder="Phone Number">
<input type="submit" value="Validate">
</form>
</body>
</html>
Now Validation is fire on focus out of element
i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:
HTML:
<div id="aDiv">
<select id="aSelect"> <option value="1"> 1 </option></select>
</div>
<button type="button" id="aButton">Click </button>
CSS:
#aDiv {
display: none;
}
JS:
$(document).ready(function() {
$('#aSelect').selectmenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
How do i make jquery-confirm show jquery ui widgets like selectmenu?
try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.
$(document).ready(function() {
// $('#aSelect').selectMenu();
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: function(){
return $('#aDiv').html(); // put in the #aSelect html,
},
onContentReady : function() {
this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
},
onClose : function() {
}
});
});
});
Please try the following:
You have missed the # for id
$(document).ready(function() {
$('#aSelect').selectMenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
I'm, using bootstrap x-editable https://vitalets.github.io/x-editable/index.html
This is my html code:
<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}"
data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a>
javascript code:
$('.addon').editable({
placement: 'bottom',
mode: 'inline',
showbuttons: false,
source: categories,
select2: {
width: 200
},
display: function (value) {
var elem = $.grep(categories, function (o) {
return o.id == value;
});
$(this).attr('data-value', value);
$(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
return $(this).text(elem[0].text);
}
});
But. I want to change programmatically to normal x-editable element without the select2 options.
I have tried with jquery to change the data-type attribute of the a element to text, but it does not work.
$('a.addon').attr('data-type', 'text');
Also tried:
$('a.addon').select2('destroy');
Also tried:
$('a.addon').editable({type: 'text'});
But neither options work. select2 is still active.
How can I remove select2 options of x-editable?
Can you help me please
You will have to combine the things that you've tried - destroy the default X-editable instance, change the data-type value, and reinstate X-editable on that element.
The most simple implementation/example would be:
$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'});
In practice, you'll have to put your other settings back when you re-apply X-editable as text:
$('.addon').editable('destroy');
$('.addon').data('type', 'text');
$('.addon').editable({
placement: 'bottom',
mode: 'inline',
showbuttons: false,
source: categories,
type: 'text',
display: function (value) {
var elem = $.grep(categories, function (o) {
return o.id == value;
});
$(this).attr('data-value', value);
$(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
return $(this).text(elem[0].text);
}
});
Edit:
I've put together a demo that mirrors your setup as best I could tell and it seems to work:
var categories = [{
id: 'html',
value: 'html',
text: 'html'
}, {
id: 'javascript',
value: 'javascript',
text: 'javascript'
}];
setupSelect2();
$('#useSelect2').click(function() {
$('.addon')
.data('type', 'select2')
.editable('destroy');
setupSelect2();
});
$('#useText').click(function() {
$('.addon')
.data('type', 'text')
.editable('destroy');
setupText();
});
function setupSelect2() {
$('.addon').editable({
mode: 'inline',
placement: 'bottom',
showbuttons: false,
source: categories,
select2: {
width: 200
},
display: function(value) {
var elem = $.grep(categories, function(o) {
return o.id == value;
});
$(this).attr('data-value', value);
if (elem[0])
return $(this).text(elem[0].text);
}
});
}
function setupText() {
$('.addon').editable({
mode: 'inline',
placement: 'bottom',
type: 'text',
showbuttons: false,
source: categories,
display: function(value) {
var elem = $.grep(categories, function(o) {
return o.id == value;
});
$(this).attr('data-value', value);
if (elem[0])
return $(this).text(elem[0].text);
}
});
}
<script src="https://vitalets.github.io/x-editable/assets/jquery/jquery-1.9.1.min.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/select2/select2.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/bootstrap300/css/bootstrap.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/bootstrap300/js/bootstrap.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css" rel="stylesheet" />
<h3>Select 2</h3>
<br>
<br>
<button id="useSelect2" class="btn btn-default">Use Select2</button>
<button id="useText" class="btn btn-default">Use Text</button>
How do I access jQueryUI Dialog buttons upon creation and get their size? As a workaround, I could do so when it is opened.
http://jsfiddle.net/1ueho4tq/
var $button1;
var dialog = $('#dialog').dialog({
autoOpen: false,
create: function (event, ui) {
var $button1 = $('#button1');
console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
},
open: function (event, ui) {
if (!$button1) {
$button1 = $('#button1');
console.log("$button1 open", $button1, $button1.outerHeight(), $button1.position().top);
}
},
buttons: [{
id: 'button1',
text: 'Upload',
click: function () {
console.log('button1');
}
}, {
id: 'button2',
text: 'Save',
click: function () {
console.log('button2');
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog("close");
}
}]
});
$('#open').click(function () {
dialog.dialog('open');
});
<div id="dialog"></div>
<button id="open">Open</button>
You can get the jQuery UI dialog buttons using buttons option getter.
Code:
var buttons = $('#dialog').dialog('option', 'buttons');
But if you need to check their dimensions you need to use the array after the dialog is opened.
Code:
open: function (event, ui) {
$.each(buttons, function (i, e) {
console.log($('#'+e.id).outerHeight())
});
},
Demo: http://jsfiddle.net/f4m6z9hc/
I want to code CKEditor plugin. I have added button on panel and when I press it dialog is shown. In this dialog I can set text and after OK pressed this text inserted to the editor.
But I want add functionality. When I select text in editor and press this button I want see selected text in that dialog field. And after editing and press Ok selected text must be replaced with new one.
Thanks!
This is not 100% working, the first part is working, the final replacement isn't..
CKEDITOR.plugins.add( 'example',
{
init: function( editor )
{
editor.addCommand( 'exampleDialog', new CKEDITOR.dialogCommand( 'exampleDialog' ) );
editor.ui.addButton( 'example',
{
label: 'Insert a Link',
command: 'exampleDialog'//,
//icon: this.path + 'images/icon.png'
} );
CKEDITOR.dialog.add( 'exampleDialog', function( editor )
{
return {
title : 'example Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
{
type : 'text',
id : 'mystring',
label : 'text',
commit : function( data )
{
data.text = this.getValue();
}
}
]
}
],
onShow : function() {
//this._ranges = editor.getSelection().getRanges()
var mySelection = editor.getSelection().getSelectedText();
this.setValueOf("general","mystring",mySelection);
},
onOk : function()
{
var data = {};
this.commitContent( data );
var txt = data.text;
editor.insertText(txt); //this is not correct, since selection is being cleared...
}
};
});
}
});
My solution was to simply set it inide the onShow function:
onShow: function () {
this.setValueOf('my-tab-id', 'my-element-id', editor.getSelection().getSelectedText());
// ...
},
Full code skeleton:
(function () {
CKEDITOR.dialog.add('mySelectorDialog', function (editor) {
return {
contents: [
{
id: 'my-tab-id',
label: 'My Tab Label',
elements: [
{
id: 'my-element-id',
type: 'text',
label: 'My Element Label'
}
// ...
]
}
],
onShow: function () {
this.setValueOf('my-tab-id', 'my-element-id', editor.getSelection().getSelectedText());
// ...
},
onOk: function () {
// ...
}
// ...
};
});
})();