Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery match id and append

Posted on 2013-05-16
5
Medium Priority
?
478 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
[X]
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
  • 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

PowerShell Core for Advanced Linux Administrators

Understand advanced principals around Powershell Core with a focus on the Linux Administrator.  This course covers how to administer numerous environments across multiple platforms including Linux, Azure, AWS, and Google Cloud from a single shell instance.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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 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

719 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