How to create a widget instance in jQuery - javascript

Consider I have two widgets.
$.widget( "custom.car", {
options: {
name: ''
},
_create: function() {
this.options.name = 'car'
},
random: function( event ) {
console.log(this.options.name);
},
clear: function() { console.log('Clear'); }
});
$.widget( "custom.bike", {
options: {
name: ''
},
_create: function() {
this.options.name = 'bike'
},
random: function( event ) {
console.log(this.options.name);
},
clear: function() { console.log('Clear'); }
});
isCar and isBike is based on user input.
if(isCar) {
$( "div" ).car();
$( "div" ).car('random');
} else if(isBike) {
$( "div" ).bike();
$( "div" ).bike('random');
}
If I call the random method in some where place I'll write the if condition.
If any possible solution to avoid the if condition or any other solution.
Note: My question is correct or not?

Not really, you'll have to decide which method you want to call so you'll have to use an if...else if construct or at least a ternary operator.
Here is an example that reduces the number of statements:
var fName = isCar ? "car" : "bike";
$( "div" )[fName]();
$( "div" )[fName]('random');
In this example I assume that if isCar is false isBike is true which is not exactly like your example.

There is a lot of information missing from your post but here is a way to avoid an "if else" statement.
<form id="selection">
<input id="car-radio" type="radio" value="car" checked> Car
<input id="bike-radio" type="radio" value="bike"> Bike
</form>
<script type="text/javascript">
var carFunc = function() {
isCar = true;
isBike = false;
$( "div" ).car();
$( "div" ).car('random');
}
var bikeFunc = function() {
isCar = false;
isBike = true;
$( "div" ).bike();
$( "div" ).bike('random');
}
$("#selection").on('click', '#car-radio', carFunc);
$("#selection").on('click', '#bike-radio', bikeFunc);
</script>

Related

Stop execution of code in JQuery Dialog like Jquery Confirm

Html Select Tag
<select name="testSelect" id="testSelect" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Jquery code :-
(function () {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function() {
var r = confirm("If you change display type, default value fields will get reset !");
if (r === true) {
previous = $(this).val();
}
else {
console.log(previous);
$(this).val(previous);
}
});
})();
I am using this code to restore the previous selected value if I press No..and its working fine when I use Jquery confirm. Here Jquery confirm stops the execution when I change any value and unless I press Yes or no.
But Now I want to remove Confirm box and Want to use Jquery Dialog box for confirmation. Like this :-
$( function() {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function(event) {
var that = this;
$( "#dialog-confirm" ).dialog({
resizable: false, height: "auto", width: 400, async: false, modal: true,
buttons: {
Yes: function() {
console.log($(that).val());
previous = $(that).val();
$( this ).dialog( "close" );
},
No: function() {
$(that).val(previous);
$( this ).dialog( "close" );
}
}
});
})
} );
But here the problem is .. code gets executed even there is Dialog confirm popup. It doesnot stop like the Jquery confirm box does. I tried many stuff but not working, can anyone please help?
Remember: Everything was working fine in JQuery confirm....but not working in Jquery Dialog...
You need your code in the jQuery document ready state, so that It will get invoke only when the page is completed load and will bind your events to #testSelect.
$( document ).ready(function() {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function(event) {
var that = this;
$( "#dialog-confirm" ).dialog({
resizable: false, height: "auto", width: 400, async: false, modal: true,
buttons: {
Yes: function() {
console.log($(that).val());
previous = $(that).val();
$( this ).dialog( "close" );
},
No: function() {
$(that).val(previous);
$( this ).dialog( "close" );
}
}
});
})
});

How to do search with first letter in individual column searching datatable

I'am working on a web app with datatable.
I've done global research bar and individual research bar, like this example: https://datatables.net/examples/api/multi_filter.html
Now what I want to do is to start research by the first letter only in the individuals columns.
I tried to do this whith global research and it worked fine, thank to this :
$(document).ready(function() {
var table=$('#example').DataTable( {
responsive: true
} );
$('.dataTables_filter input').on( 'keyup', function (e) {
var regExSearch = '\\b' + this.value;
table.search(regExSearch, true, false).draw();
});
} );
But this is not what I want
And I have programmed my individual research like that :
table.columns(':gt(1)').every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search(this.value )
.draw();
}
} );
} );
I tried to use the same logic as global research while adding
.search('\\b' +this.value )
but when I try to search something, nothing is returned.
Maybe I do something wrong, does anyone know how to do that ?
Ok I was so close.
The only thing I had to do is :
table.columns(':gt(1)').every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search('\^'+this.value, true, false ) // regex=true, smart=false
.draw();
}
} );
} );
And it work.

Twitter bootstrap:Popop are not showing up on first click but show up on second click

Here is my code. Please help me
$(document).ready(function(){
$(document).delegate(".view","click",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});
Try replacing the function .delegate() by .on(), this function has been superseded in the last versions of Jquery.
jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
jQuery 1.7+
$( elements ).on( events, selector, data, handler );
The code would be:
$(document).ready(function(){
$(document).on("click",".view",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});
Try doing this way..
$('.view')
.popover({trigger: 'manual'})
.click(function() {
if($(this).hasClass('pop')) {
$(this)
.popover('hide')
.removeClass('pop');
} else {
var id = $(this).attr("id");
var title = $('#popoverTitle').html();
var response = $("#"+id+"tt").html();
$(this)
.attr({'title': title, 'data-content': response})
.popover('show')
.addClass('pop');
}
});

comparison of multiple input fields with same class name but not same id using jQuery

I want to make jquery/javascript function which compare multiple values with each other if one of them comes out different then echo "Values are different" next to every field present in html body.
<input name="flag2" type="text" id="flag2" class="flags">
<input name="flag3" type="text" id="flag3" class="flags">
<input name="flag4" type="text" id="flag4" class="flags">
<input name="flag5" type="text" id="flag5" class="flags">
<input name="flag6" type="text" id="flag6" class="flags">
Note: I use a button with jquery function to add new field on press, is using appendTo to add more fields. sometimes i have more or less fields, the jquery function must be dynamic, to apply on the number of input fields set.
Try each() function
$(".flags").each(function(){
alert(this.value);
});
Link for references
You can accomplish the job with a help of two each functions in Jquery below,
Get the selector common for all the input tags say .flags, then create a loop to get all the DOM objects
var temp; var start=0; var boolN=true;
$( "input.flags" ).each(function( index ) {
if (start==0) {
temp = $( this ).text();
} else if (temp = $( this ).text()) {
temp = $( this ).text();
} else {
boolN = false;
}
});
Now loop the span or your custom tag to show the message. I have used a span tag here,
$( "span" ).each(function( index ) {
if (boolN) {
$( this ).html("Values are Simillar");
} else {
$( this ).html("Values are Different");
}
});
Now couple both the above methods in a custom method and bind a click event of a button like
$("button").click(function () {
var temp; var start=0; var boolN=true;
$( "input.flags" ).each(function( index ) {
if (start==0) {
temp = $( this ).text();
} else if (temp = $( this ).text()) {
temp = $( this ).text();
} else {
boolN = false;
}
});
$( "span" ).each(function( index ) {
if (boolN) {
$( this ).html("Values are Simillar");
} else {
$( this ).html("Values are Different");
}
});
});
Working Example at JS Fiddle

String variable passed from a function to a function name does not work

I am trying to use the value of a drop list as the the name of the next function. The string is correct and shows in an alert. Also writing the name explicitly in the code does work. But using parts from the variable in the scope of both functions does not work at all.
Drupal.behaviors.smart_inventory = {
attach: function(context, settings) {
// this should be in the scope of both functions
var selecttype;
$('#select-voc-content_types', context).change(function () {
contenttype = $( this ).val();
secondary = $('#' + contenttype);
if($(secondary).length > 0)
{
// set the select list. tried an alert and the variable string is set
selecttype = '#select-voc-' + $( this ).val();
$('.group-types').show();
$('#' + contenttype).show();
$('#object-ajax-form').hide();
}
else
{
$('#object-node-form-message').show();
$.post('smart_inventory/ajax', { "node-type": contenttype }, frmDrupal);
}
});
// this does not respond as jquery does not accept the string as an element name
// or maybe the variable is not available here?
$( selecttype, context ).change(function () {
var nodetype = $( this ).val();
$('#object-node-form-message').show();
$.post('smart_inventory/ajax', { "node-type": nodetype }, frmDrupal);
});
var frmDrupal = function(responseText) {
$('#object-ajax-form').show();
$('#object-ajax-form').html(responseText);
$('#object-node-form-message').hide();
}
}
};
If found that this works! But is nesting a function good practice? or good enough? ;
Drupal.behaviors.smart_inventory = {
attach: function(context, settings) {
var selecttype;
$('#select-voc-content_types', context).change(function (selecttype) {
contenttype = $( this ).val();
secondary = $('#' + contenttype);
if($(secondary).length > 0)
{
// set the select list
selecttype = '#select-voc-' + $( this ).val();
$('.group-types').show();
$('#' + contenttype).show();
$('#object-ajax-form').hide();
}
else
{
$('#object-node-form-message').show();
$.post('smart_inventory/ajax', { "node-type": contenttype }, frmDrupal);
}
$( selecttype , context ).change(function () {
var nodetype = $( this ).val();
$('#object-node-form-message').show();
$.post('smart_inventory/ajax', { "node-type": nodetype }, frmDrupal);
});
});
Your selecttype variable is not even set yet when you try to use it - it will only get set when the change handler on the element with id select-voc-content_types is triggered.
The problem is that the variable doesn't have a value at the time that the handler is attached. The easiest way to handle it is using the attribute "starts with" selector to match all possible select types rather than trying to apply a handler per select type. You could then use the chosen select type to filter within the handler as needed.
$('[id^="select-voc-"]',context).change( function() {
if (this.id == selecttype) {
...
}
else {
return false; // this isn't the correct select type, prevent the action
}
});
//selecttype changes during an event fire. event registration happens way before then. just do this.
$( '[id^="select-voc-"]', context ).change(function () {
var nodetype = $( this ).val();
$('#object-node-form-message').show();
$.post('smart_inventory/ajax', { "node-type": nodetype }, frmDrupal);
});
// depending on your version of jQuery, go for .on wherever possible:
$(context).on({
'change':function(evt){
var nodetype = $( this ).val();
$('#object-node-form-message').show();
$.post('smart_inventory/ajax', { "node-type": nodetype }, frmDrupal)}
},'[id^="select-voc-"]','');

Categories

Resources