How do I select and replace the contents of a div where the table row id is a shortened url using Jquery

Question

I want to replace the contents of the <div class="clicksAllTime"> but I cannot get it to work. The HTML below is part of a table. Each row has a different ID whch is a specific shortened url that im doing an ajax call on...

HTML:

<tr id="http://goo.gl/zxCR" class="shortenedUrl odd">
    <td class="center">
        <div class="clicksAllTime">
            <img src="../images/loading-gif-small.gif">
        </div>
    </td>
</tr>

JQUERY:

$('#http://goo.gl/zxCR.clicksAllTime').empty().append('<p>' + response[0].analytics.allTime.shortUrlClicks + '</p>');

why would you make your id a url for? You may need an escape character. — Har, Mar 05 '12 at 14:37
is it the fact that its a url causing the problem ? If it is then I could edit it and strip the http:// off server side... so it would be `id="zxCR"` — Luke Bream, Mar 05 '12 at 14:40

score 1 · Accepted Answer · answered Mar 05 '12 at 14:51

1

Here's a selector that works. Am using html() to replace with text for demo so you can easily test

Working demo: http://jsfiddle.net/zKSGP/

 $('#http\\:\\/\\/goo\\.gl\\/zxCR .clicksAllTime').html('New Text')

Note spcae befor "clicksAllTime classs was missing in example. Also don't need to use empty().append(), just use html() it replaces all inside element

answered Mar 05 '12 at 14:51

charlietfl

170,828
13
121
150

thanks very much for this. Your observation of the missing space was the main problem area. I have also done some server side processing to strip the `http://goo.gl/` off to make the id simpler. And it is now working! Thanks again – Luke Bream Mar 05 '12 at 15:20

score 0 · Answer 2 · answered Mar 05 '12 at 14:40

0

    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $('.clicksAllTime').html('<p>' + response[0].analytics.allTime.shortUrlClicks + '</p>');
    });
    </script>
    </head>
    <body>
    <tr id="http://goo.gl/zxCR" class="shortenedUrl odd">
        <td class="center">
                <div class="clicksAllTime">
                        <img src="../images/loading-gif-small.gif">
                </div>
        </td>
    </tr>
    </body>
    </html>

answered Mar 05 '12 at 14:40

t q

4,593
8
56
91

thanks for your answer but unless im missing something this selects every instance of `class=clicksAllTime`. I have a table with many rows each with the `class=clicksAllTime` in them – Luke Bream Mar 05 '12 at 14:42
this will affect any row that has the class in it – charlietfl Mar 05 '12 at 14:46
you said the contents of
so i thought thats what you wanted
– t q Mar 05 '12 at 14:47

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

This may work.Just try bellow code / is treated as special characters.

$('#http:\\//goo.gl\\/zxCR.clicksAllTime').empty().append('<p>' + response[0].analytics.allTime.shortUrlClicks + '</p>');

check this CSS selector to select an id with a slash in the id name?

edited May 23 '17 at 11:55

Community

1
1

answered Mar 05 '12 at 14:42

siva565

499
2
12
25

How do I select and replace the contents of a div where the table row id is a shortened url using Jquery

3 Answers3