• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 481
  • Last Modified:

jquery match id and append

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
Refael
Asked:
Refael
  • 3
  • 2
1 Solution
 
Chris StanyonCommented:
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
 
RefaelAuthor Commented:
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
 
Chris StanyonCommented:
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
 
RefaelAuthor Commented:
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
 
Chris StanyonCommented:
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now