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.
Related
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
I got an problem with dynamically added DOM objects in jQuery. First of all I use this:
var $input = $('#search-input');
var $usersList = $('#ulist');
$input.on('input', function () {
$.ajax({
type: 'get',
url: '/userlist',
data: {query: $input.val()},
success: function (response) {
var json = JSON.parse(response);
$usersList.empty();
$.each(json, function (index, val) {
$usersList.append("<div id=\"listelem\">" + val + "</div>");
});
}
});
});
<div id="ulist"></div>
<input id="search-input" type="text">
to insert divs into usersList. This works well, but now I want to get val from this div when I click on it to process it further. I wrote this piece of code:
$usersList.on('click','#listelem', function(){
alert("clicked");
});
When I click on div I got proper alert, but now I have no idea how could I took data from inside of this element.
I don't know the proper engineering but I have dealt with similar issue while I was developing some requirements. basically as I understood you want to find out the target of the event and drag a value from there? if so you can do something like this:
jQuery(document).on('click', '#listelem', function(event){
var x = event.target.val();// event.target.value; depending on your situation and availability of the method.
});
Hope this helps.
try this
$(document).on('click','#listelem', function(event) {
alert($(event.target).text());
});
jsfiddle
Thanks you for help. for me proper option was to call
var mem =event.target.innerText;
you can do that with the regular javascript, you don't need Jquery.
document.addEventListener("click", function(e) {
if(e.target) {
console.log("item clicked ", e.target.textContent);
}
});
This should do the job to get the value of current target.
$('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.
How can I save the value of the title for a row? These are the values of the title=%s:
<a class="false" title=1106 href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
<a class="false" title=1153 href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
<a class="false" title=1175 href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
...
I've tried countless variations but none of them work. This is what I have now:
<script>
$(document).ready(function() {
console.log("ready");
$("a.false").click(function(e) {
$(this).closest("tr.hide").hide("slow");
var main_id = a.title;
var display = "false";
e.preventDefault();
});
$("a.false").click(function() {
$.ajax({
url: "/useradminpage?main_id=%s&display=false",
data: {main_id: "main_id", display: "display"},
success: function(data) {
display_false()
alert("4 - returned");
}
});
});
});
</script>
This is the third question on this topic. I appreciate any help. Thanks.
instead of
var main_id = a.title;
try
var main_id = $(this).attr('title');
because if I'm not wrong, "a" isn't defined
I think what you're trying to do is pass the value of the title attribute along in your AJAX request. If that's the case, the easiest thing to do will be to do it all in one event handler (is there a reason you're binding 2 different handlers to the same event?):
$("a.false").click(function(e) {
$(this).closest("tr.hide").hide("slow");
var main_id = this.title;
var display = "false";
e.preventDefault();
$.ajax({
url: "/useradminpage",
data: {main_id: main_id, display: display},
success: function(data) {
display_false();
alert("4 - returned");
}
});
});
Your problem currently is that main_id and display are not in the scope of the second event listener, so will be undefined (and they shouldn't be quoted, otherwise you're just passing in strings). As you're passing in a data object to the ajax function, you don't really need to add the query string to the URL either.
Aside from that, when you assign a value to main_id, you're using a.title. In this case a is undefined, and you will need to use this, which will be a reference to the clicked element.
I suspect that I might be missing something, but I suspect that your problem is using a.title instead of this.title:
$("a.false").click(function(e) {
$(this).closest("tr.hide").hide("slow");
var main_id = this.title; // or you could use the jQuery object approach: $(this).attr('title') instead
var display = "false";
e.preventDefault();
});
The problem in your original approach is that a would be parsed as a variable, which hasn't been assigned a value, nor has it been declared, so that it would return undefined or null (at best). Within the scope of the each() method, you're iterating over individual nodes; so to access the properties/attributes of that node use this.
To access any attribute of a DOM element through jQuery, you can use the .attr() function.
In your particular case you would do.
var main_id = $(this).attr('title');
I'm playing around with a function and getting
b.createDocumentFragment is not a function (jQuery)
My function is
function tweetCount(url) {
$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
count = data.count
$(this).append(count);
})
}
I've tried lots of different way but can't seem to find out why it doesn't like "append". "count" is a number and something like alert(count) works, but not append!
Any help?!
Alex
I don't think that this is referring to what you think it is. Change $(this) to an explicit reference to the DOM element you want.
Alternatively, you can define this by calling:
tweetCount.call($("#element"), url)
Edit
Try this:
$("span.tweetcount").each(function(){
url = $(this).attr('title');
tweetCount.call(this, url);
});
Or, to save space:
$("span.tweetcount").each(function(){
tweetCount.call(this, $(this).attr('title'));
});
Edit 2:
Try replacing tweetCount with this:
function tweetCount(url) {
var that = this;
$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
count = data.count;
$(that).append(count);
})