dynamically change function name in javascript - javascript

$('a').live('click',function(e){
e.preventDefault();
var id = $(this).attr('id');
infowindow2.open(map, marker2); // I need instead of 2 to print the value of variable id
});
How can I dynamically change the number 2 to variable ID ?
Thanks for any help


Don't use eval, use a hash:
var markers = {
"key1": function(){},
"key2": function(){},
"key3": function(){}
};
$('a').live('click',function(e){
e.preventDefault();
var id = this.id; //Use this.id instead of attr
infowindow2.open(map, markers[id]);
});


Instead of using eval, - better change you data structures:
var markers = {
'1': function () { doStuff(); },
'2': function () { doOtherStuff(); },
}
$('a').live('click',function(e){
e.preventDefault();
var id = $(this).attr('id');
infowindow2.open(map, markers[id]);
});


I think it would be easier to write a new function with a switch. I can't recommend using eval.


EVAL should always be the last option
In order use dynamic name in a function names you can windows object.
Here is an Example:
var id = '2';
function map2() {
alert('me called');
}
window["map"+id]();
Demo
Your Usage would be something like this
$('a').on('click',function(e){
e.preventDefault();
var id = $(this).attr('id');
infowindow2.open(map, window['map'+id]());
});


$('a').live('click',function(e){
e.preventDefault();
var id = $(this).attr('id');
infowindow2.open(map, eval('marker' + id));
});
LIVE DEMO
Notes:
eval is deprecated, You should look for a better design.
so as live... You should use on instead.

Related

how to use this incomplete javascript object in HTML

I got this javascript code to solve in a manner to use inner function but not able to use it. Please try to help me to use inner functions or do i need to modify this. I want to use inner functions on click on html element such as view and remove respectively;
var App = function(){
var url = 'api';
function view(event) {
var id = '??'; //here i have to receive id of the element(data-id)
$.ajax({
url: url + '/view/' +id,
data: data
}).done( function (data){
});
}
function remove(event) {
var id = '??'; //please determine the id
$.ajax({
url: url + '/remove/' + id ,
data: data
}).done( function (data){
});
}
function initialize() {
//
}
return {
//
}
}();

Try doing this:
For id you can do one thing, Save the id in data-id attribute of the element on which you want onClick listener and access it using Event-Delegation in javascript.
To use the inner method you don't need to return anything. Just do it this way :
var App = function(){
var url = 'api';
function view(event) {
//access the id attribute of event.target
}
function remove(event) {
//same
}
function initialize() {
//
}
App.view = view;
App.remove = remove;
};
//EDIT : instead of making it self-invoking, call the app function
App();
//to access it outside:
App.view("your_parameter");
App.remove("your_parameter");
EDIT : Instead of making it self-invoking, call the app function

Well it's pretty simple, use the $("#caller").click() function of our beloved
jQuery
Then inside the .click() function you can easily retrieve your id
Here you can find more on the .click() function
It will be something like this
$( "#view" ).click(function() {
id = document.getElementById("id").id;
//Here paste the code of your view function
});

JS adding a number to a class (classname+number)

There's a problem somewhere in ".addClass('clicked'+'nb')
my css classes are named "clicked1" "clicked2" etc.
I tried 'clicked1' and 'clicked2' and they work, but I'd like it to work with the "nb" that is collected.
$(document).ready(function() {
$('.boxes').on('click', '.box', function() {
var data = $(this).data('nb');
var tekst = $('.wrapper');
tekst.addClass('clicked'+'nb');/*'clicked1' is a css class, same with clicked2,3...*/
});
});
https://jsfiddle.net/yujtvd66/2/

I've updated the JSFiddle with the code i think you're looking for.
$('.wrapper').removeClass()
.addClass('wrapper')
.addClass('clicked'+data);

Here you are getting the data of the element to the data variable.
var data = $(this).data('nb');
You need to use that variable wherever you want to use your data.
tekst.addClass('clicked' + data);

$(document).ready(function() {
$('.boxes').on('click', '.box', function() {
var data = $(this).attr('data-nb');
var tekst = $('.wrapper');
tekst.addClass('clicked'+data);
});
});
Fiddle

Simplifying a jQuery functions

I was wondering the method of simplifying this script, because somehow I am repeating myself all over again...
$('.userprofile').click(function(){
card_profile.load(url_settings).dialog('open');
});
$('.cust-profile').click(function(){
card_profile.load(url_customer).dialog('open');
});
$('.my-profile').click(function(){
card_profile.load(url_my).dialog('open');
});

var obj = {
'.userprofile' : url_settings,
'.cust-profile': url_customer,
'.my-profile' : url_my
};
$.each(obj, function(sel, url) {
$(sel).click(function(){
card_profile.load(url).dialog('open');
});
});
or
$(".userprofile,.cust-profile,.my-profile").click(function() {
var url = $(this).hasClass("userprofile") ? url_settings :
$(this).hasClass("cust-profile") ? url_customer :
url_my;
card_profile.load(url).dialog("open");
});

This is somewhat better, but you can't get significant gain I guess:
$('.userprofile').data('url',url_settings);
$('.cust-profile').data('url',url_customer);
$('.my-profile').data('url',url_my);
$('.userprofile, .cust-profile, .my-profile').click(function(){
card_profile.load($(this).data('url')).dialog('open');
});
If you assign URL to every button, then you don't have to repeat the classes:
$('button').click(function(){
card_profile.load($(this).data('url')).dialog('open');
});

One way to do this would be to iterate over an array (or two) of strings.
Edit: declared i outside of for loop to address comment from #crazytrain
arr = ['user', 'cust', 'my'];
url_arr = [urlA, urlB, urlC];
var i;
for (i in arr){
$('.' + arr[i] + '-profile').click(function(){
card_profile.load(url_arr[i]).dialog('open');
});
}

$(document).on('click', function(e){
if($(e.target).hasClass('userprofile')){
card_profile.load(url_settings).dialog('open');
}
if($(e.target).hasClass('cust-profile')){
card_profile.load(url_costumer).dialog('open');
}
if($(e.target).hasClass('myprofile')){
card_profile.load(url_my).dialog('open');
}

It's a little better with a function:
$('.userprofile').click(function(){
loadDiag(url_settings);
});
$('.cust-profile').click(function(){
loadDiag(url_customer);
});
$('.my-profile').click(function(){
loadDiag(url_my);
});
function loadDiag(url){
card_profile.load(url).dialog('open');
}
You could also switch through the parameter and do multiple things per click

$('.my-profile, .userprofile, .cust-profile').click(function(){
card_profile.load(url).dialog('open');
});
Edit: on second thoughts - do what Eltier says.

Assign a url attribute to each element. Then you can retrieve that value and use in your code in this way.
$('.userprofile').attr('url',url_settings);
$('.cust-profile').attr('url',url_customer);
$('.my-profile').attr('url',url_my);
$('.my-profile, .userprofile, .cust-profile').click(function(){
var url = $(this).attr('url');
card_profile.load(url).dialog('open');
});

You could use the html data attribute and have it simple like this
$('.userprofile, .cust-profile, .my-profile').click(function(){
var url = $(this).attr('data-url');
card_profile.load( url ).dialog('open');
});
<div class="userprofile" data-url="settings.php">Settings</div>
And to make it even better you could add a class to all load items like this
$('.load-box').click(function(){
var url = $(this).attr('data-url');
card_profile.load( url ).dialog('open');
});
<div class="userprofile load-box" data-url="settings.php">Settings</div>

Throwing another hat in the ring here...
var links = [{profile: '.userprofile', url: url_settings, clickDialog: 'open'},
{profile: '.cust-profile', url: url_customer, clickDialog: 'open'},
{profile: '.my-profile', url: url_my, clickDialog: 'open'}];
function clickOpen(url,value) {
card_profile.load(url).dialog(value);
}
links.forEach(function(element) { $(element.profile).click(
clickOpen(element.url,element.clickDialog) });

You can save a parameter in de caller object and then do something like this:
$('.userprofile, .cust-profile, .my-profile').on('click',function(){
var parameter = $(this).data( 'parameter' );
card_profile.load( parameter ).dialog( 'open' );
});
You can find more information about storing data here, is very easy.

Change element style after .get() success

I'm new to JS. I'm trying to change button's background-color after .get() success.
Here is example: http://jsfiddle.net/csTpG/95/
What's wrong with my code?
$('.add').click(function() {
var productID = $(this).attr('name');
$.get('/',{item_id : productID}, function() {
$(this).addClass('clicked');
});
return false;
});
<button class="add">click me</button>

Your button has no name attribute.
Aside from that, reference the clicked element outside the $.get callback to use it in the callback:
$('.add').click(function() {
var productID = $(this).attr('name');
// keep a reference to the element in this scope
var self = this;
$.get('/',{item_id : productID}, function() {
// use the reference in the callback
$(self).addClass('clicked');
});
return false;
});

Inside the $.get callback, this is not your element. You need save a reference to this first.
$('.add').click(function() {
var $this = $(this),
productID = $this.attr('name');
$.get('/',{item_id : productID}, function() {
$this.addClass('clicked');
});
return false;
});

Javascript variable in Jquery DataTables

I am not sure if this question relates to Javascript or more to Jquery. And it seems really simple but I am stuck.
I am trying to assign a javascript variable to a jquery DataTables function.
[script]
//Not working
var counter = 0;
function testfunction(){
doSomething();
counter++;
}
$(function() {
var newId = "#table" + counter;
$(newId).live('dblclick', function () {
alert("test");
});
});
[/script]
$("#table") refers to a table id in my html. However, this does not work. The below version works instead.
[script]
//Working version
$(function() {
//var newId = "#table1"
$("#table1").live('dblclick', function () {
alert("test");
});
});
[/script]
How can I solve this problem? Thanks.

Its quite difficult to say, but here is my attempt at fixing it, try below
[script]
var counter = 1;
var newId = "#table" + counter;
$(function() {
$(newId).live('dblclick', function () {
alert("test");
});
});
[/script]
If that works then it's because your using variables locally, and 'live' can no longer access the variable. have you tried an alternative function, like $(newId).click().

You never call testfunction to increment the counter variable. Therefore, newId will have the value table0 instead of table1.
Your code should look something like this:
var counter = 0;
function testfunction(){
doSomething();
counter++;
}
$(function() {
testfunction(); //Call testfunction to increment the counter.
var newId = "#table" + counter;
$(newId).live('dblclick', function () {
alert("test");
});
});
Here is a working JsFiddle example.

Categories

Resources