Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery match id and append

Posted on 2013-05-16
5
Medium Priority
?
479 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 44

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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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 44

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

824 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