Solved

jquery match id and append

Posted on 2013-05-16
5
469 Views
Last Modified: 2013-05-16
Hello experts,

I retrieve a data from a table in another page on the server using ajax. I actually filter the data to get only the first <td> using a loop.

The content/text in each <td> is e.g. "01", "02"...

The page that receives the data have an few div with an id e.g. "01", 02"....

This is the page and the table I receive the data from. The first TD in each row will be used to identify the DIV id in the page that receives the content.

<table class="mytable">
  <tr>
    <td>01</td>
    <td>price01</td>
    <td>location01</td>
  </tr>
  
  <tr>
    <td>02</td>
    <td>price02</td>
    <td>location02</td>
  </tr> 
</table>

Open in new window


This is the HTML of the page that receive the data

<div id="01" class="place"></div>
<div id="02" class="place"></div>
<div id="03" class="place"></div>

Open in new window


What i am trying to do is something like the following: if the text from the first TD is "01" then append it to the DIV with the ID "01" and so on for the other DIV's and data.

Here is the script that receives the data from the table:

$(document).ready(function() {
	
	var url = "table.html";	
	
		$.ajax({
			type:"GET",
			cache:false,
			url:url,
			dataType:"html",
			contentType:"text/html",
			success:function(data) {
				processData(data)
			},
			error: errorAlert
		});

})

  function processData(data) {
	var resultStr = "";
	
	$(data,".mytable").find("td:nth-child(1)").each(function () {		
		
		resultStr +=$(this).text();		
	});	
	
	    $('.place').each(function () {
			var appendID = $(this).attr('id');			
			
			if ($(appendID) == $(resultStr)) {
				$('.place').append(resultStr).html();				
			}		
		});
	
   }		
function errorAlert(e, jqxhr) {		
		alert("Your request was not successful: " + jqxhr);		
 } 

Open in new window

0
Comment
Question by:Refael
  • 3
  • 2
5 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39170870
What exactly do you want appending to the DIVs with the IDs of 01, 02 etc.

At the moment your code won't work because you loop through through the returned data and build a variable called resultStr. Using your table.html from above that will set it to '0102' which you then check against the IDs of the DIVs but obviously none of your DIVs have an ID of 0102.

If you just want to add the value of the TD to the DIV with a matching ID, then it's just something like this:

$(data, ".mytable").find("td:nth-child(1)").each(function () {
    var ID = $(this).text();
    $("#" + ID).append(ID);
});

Open in new window

0
 

Author Comment

by:Refael
ID: 39170916
You are right. I am simply getting this value "0102" that's why i could not understand why i am getting only one value when doing an alert with length.

Basically the end result i am trying to do and i would be thankful if you can help me. I need to use the entire table content not only the first td in each row. then do the same... meaning attach the content per row to the div id using the first td text to match the id of the div as you did above.

can you help me with this?
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39170970
Sure - have a look at this - http://jsfiddle.net/ChrisStanyon/UEty4/

You need to click the button to fire the code. I've commented it so it should make enough sense for you to tweak to your own needs, but just ask if you're unsure.
0
 

Author Closing Comment

by:Refael
ID: 39171055
ChrisStanyon thank you so much! it works yet i need to go through your code and learn :-) the .push is new to me too :-) again, thank you a lot!
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39171091
No worries. EE is a great place to learn.

push() is a native javascript function (as opposed to jQuery) that simply adds a new element to an array.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now