jQuery filtering dynamic html content

Question

I am loading a HTML template using the $.get function and I would like to parse this HTML and inject my own values into it. So far I have tried the below snippet, but it doesn't seem to be working.

$.get('/js/dynamic/locations', function(newRow) {
    var existing_elem = $('.edit-table tr:last'); 
    existing_elem.after(newRow);
    var appendedRow = existing_elem;
    appendedRow.find('td[data-th="Name"] > span').text(v.location_name);
    appendedRow.find('input').val(v.location_name);
    appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});

The value of newRow when loaded is:

<tr>
  <td data-th="Name"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value=""></td>
</tr>

What is the value of v.location_name and how do you then attach the HTML to the DOM? — Rory McCrossan
– Rory McCrossan, Commented Jul 1, 2015 at 10:04

kapantzak · Accepted Answer · 2015-07-01 10:24:53Z

1

First of all you have to append the loaded content into the DOM. Then, select and edit any element you want:

EDIT (#2)

HTML (Assumung this is the html loaded: 2 columns)

<tr>
  <td data-th="Name"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value="">    </td>
  <td data-th="LastName"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value="">    </td>
</tr>

jQuery

$.get('/js/dynamic/locations', function(newRow) {
   var existing_elem = $('#existing_elem'); 
   //Append the html      
   existing_elem.append(newRow);
   //Select the appended html
   var appendedRow = existing_elem.children('tr');
   //Select eny elem inside the appended html
   appendedRow.addClass('appended');
   appendedRow.find('td[data-th="Name"] > span').text('your_text');
   appendedRow.find('input').val('new_value');
   //Second column
   appendedRow.find('td').eq(1).find('input').val('another_value');
});

edited Jul 1, 2015 at 10:24

answered Jul 1, 2015 at 10:06

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

V4n1ll4 Over a year ago

This seems to work but how would I change it if I wanted to change multiple elements in the HTML string?

V4n1ll4 Over a year ago

For example if my table had multiple columns and I wanted to change another span, how would I chain that together?

V4n1ll4 Over a year ago

please see my edit above. I have changed the code to reflect your suggestions. However I have had to change the selector slightly and now it is not working.

kapantzak Over a year ago

Select the last row as the appendedRow: --> var appendedRow = $('table tr:last-of-type');

Krishna · Accepted Answer · 2015-07-01 10:11:48Z

0

I think your selector has issue. Try this -

$.get('/js/dynamic/locations', function(newRow) {
    $(newRow).filter('tr td[data-th="Name"] span').text(v.location_name);
});

where the selector 'tr td[data-th="Name"] span' should be noticed OR

$.get('/js/dynamic/locations', function(newRow) {
    $('[data-th="Name"]', newRow).find('span').text(v.location_name);
});

answered Jul 1, 2015 at 10:11

Krishna

5,7142 gold badges31 silver badges33 bronze badges

Comments

lshettyl · Accepted Answer · 2015-07-01 10:16:43Z

0

Did you try:

$(newRow).find('.edit-input-text').text(v.location_name);

Working demo

//Create a jQuery object from your ajax response
var newRow = $('<tr><td data-th="Name"><span class="edit-input-text"></span><input class="inp input-edit" type="text" name="location_name" value=""></td></tr>');

//Manipulate
newRow.find('.edit-input-text').text("I am new here")

//Do whatever
$('#demo').append(newRow);

edited Jul 1, 2015 at 10:16

answered Jul 1, 2015 at 10:10

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery filtering dynamic html content

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related