Get value from div in a html string with jquery and ajax

Question

I have a problem when i try to grab the value from a div in my html string. Maybe someone here could find the problem for me.

I have tried a lot of different ways to take the data out. Solutions that works for others don't work for me at all. So i think i am doing something seriously wrong

$(document).ready(function () {
    var id = 1;

    function updateMsg() {
        $.ajax({
            url: "/opt/history/update?current=" + 1,
            cache: false,
            success: function (html) {
                id = $(html).find('#last').html();
                console.log('ID: ' + id);
                $("#result").html(html);
            }
        });
        setTimeout(updateMsg, 5000);
    }

    updateMsg();
});

This is how the div looks like

<div id="last" style="display: none;">2</div>

There is a bunch of html code before this div. This div will always be at the bottom of the html string.

Update: The thing is. I need to transport the value of a id in this html string but not show it visually. If you have a better way that i should look at.

The HTML output on success

<tr>
<td>2014-07-08 14:35:47.456</td>
<td>123</td><td>321</td>
<td>Has data</td>
<td><a data-toggle="modal" data-request="2014-07-08 14:35:47.456" data-mobile="123" data-check="321" data-log="Has latest update" data-context="Context" data-historyid="28" title="info" class="open-logInfo btn btn-default" href="#logInfo">
<i class="icon-info-sign icon-black"></i> Info </a>
</td>
</tr>
<div id="last" style="display: none;">28</div>

I have a problem when i try to grab the value from a div in my html string.What's the problem? — user63762453
– user63762453, Commented Jul 14, 2014 at 12:07
When i try to console.log the id value. It is empty or undefined on everything i have tried — Jemil Riahi
– Jemil Riahi, Commented Jul 14, 2014 at 12:08
Can you give us the out put of console.log( html ) in the success callback. — PeterKA
– PeterKA, Commented Jul 14, 2014 at 12:11
Did you evaluate your "html" in success function. Your code looks correct I think maybe you get wrong result? — Baximilian
– Baximilian, Commented Jul 14, 2014 at 12:12
Please let me know why you are appening +1 in url ("/opt/history/update?current=" + 1) — Anjith K P
– Anjith K P, Commented Jul 14, 2014 at 12:12

Anoop Joshi P · Accepted Answer · 2014-07-14 12:42:55Z

3

Use filter() for it

 success: function(html){
                id = $(html).filter('#last').html();
                console.log('ID: ' + id);
                $("#result").html(html);
           }

find() will always search for the child elements.

Edit

Your returned html is invalid. Because the div is outside the tr. Thats why your code is returning undefined. Either you have to include that div inside a td(then you have to use find() ).

Fiddle using find()

Or you need to wrap the tr with a table. In this case you can use filter()

Fiddle using filter()

edited Jul 14, 2014 at 12:42

answered Jul 14, 2014 at 12:09

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

Comments

Abuzar Hasan · Accepted Answer · 2014-07-14 12:10:46Z

0

Instead of finding ('#last'), you can directly access it

id = $('#last').html();

answered Jul 14, 2014 at 12:10

Abuzar Hasan

1072 bronze badges

2 Comments

Karl-André Gagnon Over a year ago

No he cant, the HTML is not included to the DOM

PeterKA Over a year ago

This will look in the DOM, sorry.

Sandeeproop · Accepted Answer · 2014-07-14 12:12:26Z

0

You first need to insert this HTML into DOM, then only you can use jQuery to search your #last div with it. for eg.

function updateMsg() {
    $.ajax({
       url: "/opt/history/update?current=" + 1,
       cache: false,
       success: function(html){
            $("#result").html(html);
            id = $("#result #last").text();
            console.log('ID: ' + id);
       }
    });
setTimeout(updateMsg, 5000);
}

answered Jul 14, 2014 at 12:12

Sandeeproop

1,7761 gold badge12 silver badges18 bronze badges

2 Comments

Karl-André Gagnon Over a year ago

Adding it to the HTML is a bad idea. It is polluting the DOM and take extra juice to clean it.

Jemil Riahi Over a year ago

I tried that one out now. The log don't give me any value. Its like id is a empty string

mehsen · Accepted Answer · 2014-07-14 13:04:26Z

0

Try this solution:

I think it is a problem of dom structure so try to surround your html by table tag .

        $(document).ready(function(){
       var id = 1;

       function updateMsg() {
      $.ajax({
        url: "/opt/history/update?current=" + 1,
       cache: false,
       success: function(html){
          var html1= "<table>"+html+" </table>";
         var jqObj=$('<div>',{html:html1});   /// here is the trick   
            id = jqObj.find('#last').html();
            console.log('ID: ' + id);
            $("#result").html(html);
       }
    });
setTimeout(updateMsg, 5000);
}

updateMsg();
         });

edited Jul 14, 2014 at 13:04

answered Jul 14, 2014 at 12:18

mehsen

5882 gold badges7 silver badges18 bronze badges

3 Comments

Jemil Riahi Over a year ago

The log tells me that id is undefined when i try this one out

mehsen Over a year ago

@Jemil Riahi I tried it and it works perfect ! please console.log(html) and let me see it

Jemil Riahi Over a year ago

I have console.log(html) above.

Collectives™ on Stack Overflow

Get value from div in a html string with jquery and ajax

4 Answers 4

Comments

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related