Click here to Skip to main content
15,307,395 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
XML
<div id="display_flat_details">
    <div class="flat_no" id="104"><h3>104</h3></div>
    <div class="flat_area" id="1650 Sq.ft"><h3>1650 Sq.ft</h3></div>
    <div class="flat_price" id="75,34,544"><h3>75,34,544</h3></div>
    <div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div>

        </div>

XML
<div id="display_flat_details">
    <div class="flat_no" id="104"><h3>104</h3></div>
    <div class="flat_area" id="1650 Sq.ft"><h3>1650 Sq.ft</h3></div>
    <div class="flat_price" id="75,34,544"><h3>75,34,544</h3></div>
    <div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div>

        </div>



When I click on the button, I should get the value of flat_no of that respective row?How can I get this?Please help me out!
Posted
Comments
Janardhanam Julapalli 16-Dec-14 5:17am
   
please have a look at my fiddle http://jsfiddle.net/6o7rahmt/

1 solution

If you can change your markup slightly it will be more "correct" - you should not use numeric values in the id attribute.. as this id is meta data you should really use data-id="104"

If you don't want to change to data-id, simply change the JS below from .attr('data-id') to .attr('id')

HTML
<div id="display_flat_details">
	<div class="flat_no" id="104"><h3>104</h3></div>
	<div class="flat_area" id="1650 Sq.ft"><h3>1650 Sq.ft</h3></div>
	<div class="flat_price" id="75,34,544"><h3>75,34,544</h3></div>
	<div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div>
</div>


And the JS

JavaScript
$(document).ready(function(e){
	$('.flat_details input').on('click',function(e){
		var flat_no = $(this).parent().siblings('.flat_no').attr('id');

		console.log(flat_no); // outputs to your console
       // alert(flat_no); // uncomment to see the flat number alerted
	});
});


This JS stores a variable called flat_no
   
v3
Comments
Janardhanam Julapalli 16-Dec-14 5:33am
   
can I replace the "id" as "data-id" when I am generating it dynamically in jQuery
Chubby Ninja 16-Dec-14 5:50am
   
That's fine - I've accounted for that in my answer, just change data-id in the HTML back to id and the javascript too
Chubby Ninja 16-Dec-14 5:50am
   
See my updated answer :-) - the HTML and JS is back to id's for you
Janardhanam Julapalli 16-Dec-14 5:56am
   
When I click I am getting the required number.But I have 'n' number of such details.When I click on each item I should get that particular no.I am getting the same no. as alert here with this.
Chubby Ninja 16-Dec-14 7:29am
   
Are you sure? please check my http://jsfiddle.net/6o7rahmt/1/ - it is working as expected, please make sure you change both the id and the h3
Janardhanam Julapalli 16-Dec-14 7:29am
   
should I remove h3 here?
Janardhanam Julapalli 16-Dec-14 7:58am
   
You are right!It should work fine.But for some reason it is not working for me.I don't know y?
Janardhanam Julapalli 16-Dec-14 8:15am
   
I got it!My problem is with div structure.In my actual code,the static div is closing only after all the data is loaded inside of it.Now I have created a div dynamically and closing the div after each row of data.Now its working fine.
Janardhanam Julapalli 16-Dec-14 8:18am
   
<div class="display_details"><div class="flat_no" id="'+data[i].flat_no+'">'+data[i].flat_no+'</div><div class="flat_area" class="flat_area" id="'+data[i].area+'">'+data[i].area+'</div><div class="flat_price" id="'+data[i].price+'">'+data[i].price+'</div><div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div></div>
Janardhanam Julapalli 16-Dec-14 8:19am
   
Thank You so much.
Chubby Ninja 16-Dec-14 9:01am
   
Sorry for not replying instantly - was at lunch (killing zombies :-) ) - glad this helped you out!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900