Attaching data to DOM elements - javascript

I m new to jquey.I m facing a problem to attach data to particular inner div's. I am writing a demo code for the problem that i faced which did the same behaviour as original one. I have to small div inside a big div and i want to store (for some further processing) and show some data to small div's based on user input.
[html code]
<div id="ctrl-1001" class="big">
<div id="m1" class="small"></div>
<div id="m2" class="small"></div>
</div>
<div id="input" class="control-group module">
<label class="control-label">Module Name</label>
<div class="controls">
<select id="ModuleName" name="DSname" class="input-large">
<option>TitleImage</option>
<option>SearchBox</option>
<option>CategoryLinks</option>
<option selected>BannerSlides</option>
</select>
</div>
<button id="sa">save</button>
</div>
[jquery code]
$('.small').click(function(){
$('#input').show();
var myId = $(this).attr("id");
var myParentId = $(this).parents('.big').attr('id');
var uniqueId = '#'+myParentId+' #'+myId;
create(uniqueId);
});
function create(uniqueId){
$('#input').show();
$('#ModuleName').change(function(){
var name = this.value;
$('#sa').click(function(){
save_name(name,uniqueId);
});
});
}
function save_name(name,uniqueId){
var div = $(uniqueId)[0];
jQuery.data(div,'store',name);
//alert(uniqueId);
//var val = jQuery.data(div,'store');
$(uniqueId).text(name);
$('#input').hide();
}
But the problem is when I click on second div to store some data the first div also changes the value which second one contains. demo on Jsfiddle

It is because when you click the first time one change handler is added to the select with targeting #m1 element, then again when you click on #m2 a new change handler is added without removing the first one, so when you click the button both these code gets executed.
So try
$('.small').click(function () {
var uniqueId = '#' + this.id;
create(uniqueId);
});
function create(uniqueId) {
$('#input').show();
//remove previously added handlers
//take a look at namespaced event handlers
//also there is no need to have a change handler for the select element
$('#sa').off('click.create').on('click.create', function () {
var name = $('#ModuleName').val();
save_name(name, uniqueId);
});
}
function save_name(name, uniqueId) {
var div = $(uniqueId);
//you can use the .data() method instead of the static jQuery.data() method
div.data('store', name);
//alert(uniqueId);
var val = div.data('store');
$(uniqueId).text(name);
$('#input').hide();
}
Demo: Fiddle
But a more jQueryish solution might look like
var $smalls = $('.small').click(function () {
var uniqueId = '#' + this.id;
$smalls.filter('.active').removeClass('active');
$(this).addClass('active');
$('#input').show();
});
$('#sa').on('click', function () {
var name = $('#ModuleName').val();
save_name(name, '.small.active');
});
function save_name(name, target) {
var div = $(target);
//you can use the .data() method instead of the static jQuery.data() method
div.data('store', name);
//alert(uniqueId);
var val = div.data('store');
div.text(name);
$('#input').hide();
}
Demo: Fiddle

Related

<img> as EventHandler in JS Function

I'm trying to bind a click handler for my search field to an img or class with on() but it will not work. I'm adding the image with this code:
jQ('#psc').append('<div class"psc-search-wrapper" style="float:left;"><input class="psc-input"></input><img class="psc-search-image"title=""/></div>');
var table = $('#tbl-me').DataTable();
table.columns().eq(0).each(function(colIdx) {
var searchHandler = $(".psc-search-image");
jQ('.psc-input', table.column(colIdx).header()).on('click', searchHandler, function() {
table.column(colIdx).search(this.value).draw();
});
});
You should select the parent of the <div class"psc-search-wrapper" ... you just appended then select the child which is the searchHandler.
you can't select jQ( '.psc-input', ... you should select the parent then use find() to select it :
var myInput = jQ('#psc').find('.psc-input')
var table = $('#tbl-me').DataTable();
jQ('#psc-search').on('click',function(){
var pscValue = jQ('.psc-input').val();
table.column(3).search(pscValue).draw();
});
Solved :)

Using jQuery to show/hide html content only works if class is hard-coded

I have a series of hidden html form-groups that I want to display based on the values chosen in two cascading select lists. I'm using jQuery to toggle a class on the second list which is then called by an on change event function.
If I hard-code the class, the subsequent form-groups are shown when the on change is fired.
If I use the toggleClass from jQuery to dynamically change the class, the on change function doesn't fire even though the class is toggled correctly.
HTML
<div class="form-group hidden" id="option_env">
<label class="col-xs-12 col-sm-2 control-label" for="ddl_env">Options</label>
<div class="col-xs-12 col-sm-10">
<select name="category" id="ddl_env" class="form-control ">
<option value="-- Select an option --">-- Select an option --</option>
<option value="horse">Tethered horses</option>
<option value="Watercourses">Watercourses</option>
</select>
</div>
</div>
jQuery
var cascadeSelect = $('#ddlcategory');
var optionSelect = cascadeSelect.on('change', function () {
hideAll();
var option = $(this).val();
var childSelect = showOption(option);
return childSelect;
});
$('.option').on('change', function () {
hideDetail();
var detail = $(this).val();
showDetail(detail);
});
function showOption(option) {
var returnOption = null;
$('#' + option).toggleClass('chosen hidden')
.find('select').toggleClass('option')
;
var ddl_option = option.substr(option.indexOf('_')+1);
return returnOption = $('#ddl_' + ddl_option);
}
This works insofar as the ddl_env select has the option class added by the jQuery find, however, the $('.option').on('change', function () doesn't fire when the select list item is changed.
If I comment out the line .find('select').toggleClass('option') and manually add the option class to the ddl_env select then it works fine.
I get the same result with jQuery.addClass.
Debugging in Chrome shows that the ddl_env select change doesn't fire the change event when the option class isn't hard-coded.
Classic question.
Replace
$('.option').on('change', function()...
with
$(document).on('change', '.option', function()...
The second syntax works on present and future '.option' items.
This handler will only work on anything with the clas option when the page loads
$('.option').on('change', function () {
hideDetail();
var detail = $(this).val();
showDetail(detail);
});
In order for you to get it to work on elements dynamically allocated that class after the page has loadewd you need to delegate the event handler to a higher element, so basically its parent, or if all else fails document
$(document).on('change', '.option', function () {
hideDetail();
var detail = $(this).val();
showDetail(detail);
});

Finding the value of a class within a list

I have
<ul id="list">
<li data-markerid="0" class="">
<div class="list-label">A</div>
<div class="list-details">
<div class="list-content">
<div class="loc-id">2</div>
<div class="loc-addr">England</div>
<div class="loc-dist">2 miles</div>
<div class="loc-addr2">Test</div>
<div class="loc-addr2">Bristol</div>
</div>
</div>
</li>
<li data-markerid="1" class="">
<div class="list-label">A</div>
<div class="list-details">
<div class="list-content">
<div class="loc-id">3</div>
<div class="loc-addr">England</div>
<div class="loc-dist">60 miles</div>
<div class="loc-addr2">Test</div>
<div class="loc-addr2">London</div>
</div>
</div>
</li>
</ul>
I'm wanting to extract the value of this using JQuery.
I tried:
var targetID = $(this).find('.loc-id').text();
But this gets me values of both loc-id's. I want just the one that I'm selecting (clicking).
For full context, please look here: Parsing data using JQuery
$('#list').click(function () {
//Change the src of img
var targetID = $(this).find('.loc-id').text(); // Get the ID
// Since array of objects isn't indexed, need to loop to find the correct one
var foundObject = null;
for (var key in parsedArray) {
if (parsedArray.hasOwnProperty(key) && parsedArray[key].id == targetID) {
foundObject = parsedArray[key];
break;
}
}
// If the object is found, extract the image and set!
if (!foundObject)
return;
var imageSrc = foundObject.LocationPhoto; // From the object
$('#location-image').attr('src', imageSrc); // Set the new source
});
Thanks
In your click handler, this references the <ul> element which has multiple <li> children.
Change the click handler to act as a delegate instead:
$('#list').on('click', 'li', function () {
Now, inside the click handler, this references an <li> element so the search should only yield a single value.
For var targetID = $(this).find('.loc-id').text(); to work, you must be clicking an element that is an ascendant of only one .loc-id. For example:
$('.list-details').on('click',function(){
var targetID = $(this).find('.loc-id').text();
});
You need to change selector. In your event handler. $(this) referes to ul which has multiple loc-id thus when you are using text() its concatenating text.
Use
$('#list li').click(function () {
//Change the src of img
var targetID = $(this).find('.loc-id').text(); // Get the ID
alert('targetID: ' + targetID)
});
instead of
// When we select the item
$('#list').click(function () {
//Change the src of img
var targetID = $(this).find('.loc-id').text(); // Get the ID
DEMO
You could use event.target in case you are delegating on #list:
Demo: http://jsfiddle.net/abhitalks/CxcU8/
$("#list").on("click", function(e) {
var $t = $(e.target);
if ($t.hasClass('loc-id')) {
alert($t.text());
}
});

jQuery: add multiple data attributes with each click function

I have a click function setup whereby when you click on the .click div, it takes the data-hook attribute, and add it as a data-filter attribute to the .button div, this works fine, but after each click it is replacing the data-filter attribute with the new one, ideally I want to add a new value to the attribute with each click, separating each value with a comma.
Here's a jsFiddle demo: http://jsfiddle.net/neal_fletcher/pSZ2G/
HTML
<div class="button">THIS</div>
<div class="click" data-hook="one">CLICK</div>
<div class="click" data-hook="two">CLICK</div>
<div class="click" data-hook="three">CLICK</div>
<div class="click" data-hook="four">CLICK</div>
<div class="click" data-hook="five">CLICK</div>
jQuery:
$(".click").click(function () {
var thing = $(this).attr("data-hook");
$('.button').attr('data-filter', thing);
});
If this is at all possible? Any suggestions would be greatly appreciated!
You can store the previous value and can concatinate with new clicked value, something like.
$(".click").click(function () {
var thing = $(this).attr("data-hook");
var earData = $('.button').attr('data-filter');
if(typeof earData != 'undefined'){
$('.button').attr('data-filter', earData + ","+thing);
}else{
$('.button').attr('data-filter', thing);
}
});
DEMO
$(".click").click(function () {
var thing = $(this).attr("data-hook");
var prevValue = $('.button').attr('data-filter');
if(prevValue){
$('.button').attr('data-filter', prevValue +','+thing)
}
else{
$('.button').attr('data-filter', thing)
}
});
$(".click").click(function () {
var thing = $(this).attr("data-hook")||'';
var df = $('.button').attr('data-filter')||'';
$('.button').attr('data-filter', df+','+thing)
});
on a side note.. I hope you don't have any other elements with a .button class in it.. if you're looking to update a single target, you should reference by an id attrib instead.

Get DIV ID where Class is selected?

I currently have the following:
$(window).load(function(){
$(".boxdiv").click(function () {
$(this).toggleClass("selected");
});
});
Which perfectly does the first part of what I need. I have a fair amount of div's with the class "boxdiv" and they each have a unique ID that will identify it. What I need to happen is to have some kind of button that when pressed sends all of these div ID's with the class selected, to the next page.
Anyone got any idea of how I can do this?
Map the ID's in an array, and use $.param to create a querystring
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;});
window.location.href = '/next_page?' + $.param({ids : id_arr});
});
EDIT:
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;}),
qs = encodeURIComponent(id_arr.join(','));
window.location.href = '/next_page?ids=' + qs;
});
Perhaps this is what you're looking for:
$(".button").click(function(){
var id_arr = [];
$(".boxdiv").each(function(){ // Loop through each element with that class
id_arr.push($(this).attr('id'));
}); // Loop through each element with that class
});
window.location = 'next.html/ID=' + id_arr.join(',');
The ID's should be stored in id_arr
You can loop over each div that has the class selected. You can then use attr() to access the ID names.
Javascript
var ids = [];
$.each($(".selected"), function() {
ids.push($(this).attr('id'));
});
ids = ids.join(',');
HTML
<div id="boxA"></div>
<div id="boxB" class="selected"></div>
<div id="boxC" class="selected"></div>
<div id="boxD"></div>
This should return ["boxB", "boxC"]
See: http://jsfiddle.net/B4V28/1/
All of the answers submitted are in fact correct - but I think the real issue is your expectation of what jQuery is doing for you.
jQuery will gather all of the ID's in any manner, but you will need to have a way to collect them on the next page and actually do something with them. This will all need to happen server side.
Most likely, the ideal method, based on your comment of "potentially there could be many" you would want to do a mapping (see other answers), and pass the json object to your server, where it can pass it to the next page.
With the same code -
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;}),
qs = encodeURIComponent(id_arr.join(','));
alert('/next_page?ids=' + qs);
});
Here is a fiddle for you - http://jsfiddle.net/kellyjandrews/4dYfh/

Categories