Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

jquery match id and append

Posted on 2013-05-16
5
474 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 43

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 43

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 43

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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
jQuery - Add confirm message to button? 2 20
Google Analytics setup 5 50
Javascript 2 20
googleapis - jQuery.com and so forth 3 12
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

840 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