Get selected option in select in javascript - javascript

I have an event
'change select': function( event, template ) {
let role = $( event.target ).find( 'option:selected' ).val();
[...]
},
But couldn't I replace the jQuery code $( event.target ).find( 'option:selected' ).val() with plain JS code event.target.value and obtain the same result?
So is the above snippet equivalent with
'change select': function( event, template ) {
let role = event.target.value;
[...]
},
and isn't it better to not rely on the jQuery library?

Related

Retrieving jQuery data from dynamic HTML element returns undefined

I am trying to retrieve data from a variable HTML element. On click, the id of the <span> element is retrieved, which I want to enable me to dynamically $([dynamic id]) select that element and request the data stored in the data attribute.
My jQuery looks like this:
$( document ).ready( function() {
$( ".checkmark" ).on( "click", ( event ) => {
let checkBoxId = "#" + event.target.id, // #checkBox1
checkBoxData = event.target.id + "-value", // checkBox1-value
checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
} );
} );
The HTML element targeted looks like this:
<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>
The value of let checkBoxValue is undefined and I cannot figure out why.
Help would be greatly appreciated.
You can get attribute value of span using attr() function in jQuery
checkBoxValue = $(checkBoxId).attr(checkBoxData);
The checkBoxId variable is unnecessary because you can use the this keyword since it is the current element you are working with.
$(function() {
$(".checkmark").on("click", (event) => {
let checkBoxData = event.target.id + "-value";
let checkBoxValue = $(this).data(checkBoxData);
});
});
It seems you are having scope issues with the new ()=>{} syntax.
So, you will need to bind this to the function event handler using {self:this}. If you don't want to do this, you can use the old function(){} syntax instead.
$( document ).ready( function() {
$( ".checkmark" ).on( "click", {self:this}, ( event ) => {
var checkBoxValue = $(this).data("checkbox1-value")
alert(checkBoxValue);
} );
} );
And also as #Erwin mentioned, use only lowercase in your data- attribute name:
<span class="checkmark" id="checkbox1" data-checkbox1-value="-155"></span>
JsFiddle
It's returning undefined because it is declared incorrectly. The part after data- should be in lower case. In your case, it must be
<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>
for the .data() to work.
this code works for me try it ;)
$( document ).ready( function() {
$( ".checkmark" ).on( "click", function() {
var checkBoxId = "#" + $(this).attr('id');
var checkBoxData = $(this).attr('id') + "-value";
$( this ).attr('data-'+ checkBoxData, 155 );
} );
});
jsfiddle link

Disable keyup/keydown formatting when using $.number() - jQuery Number Plugin by Custom D

How can I disable keyup/keydown formatting when using $.number()?
jQuery Number Plugin by Custom D https://github.com/customd/jquery-number
My code:
$( 'input' ).number( true, 2 );
What worked for me was unbinding the 'keyup.format' and 'keydown.format' events from the element.
e.g
$( 'input' ).number( true, 2 ).unbind( 'keyup.format' ).unbind( 'keydown.format' );
Also, you could then manually format the number, now that the .number() plugin is instantiated against the input element.
e.g on a blur event
...
$( 'input' ).on( 'blur', function() {
$(this).val( $(this).val() );
});

jQuery change and click events

Binding events to an element should be something like:
$( document ).on( 'change', '#mySelect', showEvent );
$( document ).on( 'click', '#mySelect', showEvent );
function showEvent() {
console.log( event.target );
}
But by doing a simple test as shown below, binding the change and click events to the object mySelect they are triggered on different elements (change only by changing the select and the click by clicking anywhere on the document).
var mySelect = $( '#mySelect' );
$( document ).on( 'change', mySelect, showEvent );
$( document ).on( 'click', mySelect, showEvent );
function showEvent( event ) {
console.log( event.target );
}
Two questions:
How does the change event work? By the documentation it shouldn't work because the selector must be a string:
A selector string to filter the descendants of the selected elements that trigger the event.
It souldn't work but, if the change works, why doesn't the click?
selector
Type: String A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Taken from http://api.jquery.com/on/
You are using the selector as a jQuery object, this method is mainly using for event delegation for binding event to dynamically generated element. So you can bind event directly to the jQuery object as
var mySelect = $( '#mySelect' );
mySelect.on( 'change', mySelect, showEvent )
.on( 'click', mySelect, showEvent );
function showEvent() {
console.log( event.target );
}
If it's dynamically generated then remove the $ wrapping just provide it as string
var mySelect = '#mySelect';
$( document ).on( 'change', mySelect, showEvent );
$( document ).on( 'click', mySelect, showEvent );
function showEvent() {
console.log( event.target );
}

How to use CKEditor by class in asp.net?

Is it possible to enable ckeditor by class type?
For example, I tried the following code but getting error:
$(document).ready(function() {
var txtArea= $(".ckeditor");
CKEDITOR.replace(txtArea,{ });
});
CKEDITOR.replace accepts ids and native element instances. But you're trying to pass jQuery object to it - it cannot work.
You should try this way:
$( document ).ready( function() {
$( '.ckeditor' ).each( function() {
CKEDITOR.replace( this );
} );
} );
Or, if you know that there's just one textarea to be replaced:
$( document ).ready( function() {
CKEDITOR.replace( $( '.ckeditor' )[ 0 ] );
} );
See this example on JSFiddle.

How to select the multiple rows in jQuery datatable using the mouse drag option

I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?
Use jQuery-UI selectable and code similar to the following:
$( "#yourTable" ).selectable(
{
distance: 10,
stop: function()
{
$( this ).find( "tr" ).each(
function () {
if ( $( this ).hasClass( 'ui-selected' ) )
$( this ).addClass( 'row-selected' );
else
$( this ).removeClass( 'row-selected' );
});
}
});
I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.

Categories

Resources