CODEWITHSUNDEEP
javascriptjquery
user1477886
user1477886

Reputation: 263

How to clear content of div container using JS/Jquery?

I have been developing some page and I need to clear a content of some div:

                <table>
                    <tbody>
                    <div class="records_content">
                        <?php
                            $i=0;
                            foreach ($records as $record) {
                                echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
                                echo "<td width='400'>" . strip_tags($record['language_value']) . "</td>";
                                if ($record['approved_translation'])
                                {
                                    echo "<td width='200' height='30'><div class='field' id='".$record['label_value']."/".$record['language_id']."'>".
                                        strip_tags($record['approved_translation']['language_value'])."</div></td><td><button class='btn btn-info' id='{$record['label_value']}/{$record['language_id']}' href='#'>More...</button>"."</td>";
                                }
                                else
                                {
                                    echo "<td  width='200'>"."<div id='".$record['label_value']."/".$record['language_id']."'><span class='no_translate'>Not translated</span></div>" . "</td>";   
                                }                   
                                echo '</tr>';
                                $i++;
                            }
                        ?>
                    </div>
                    </tbody>
                </table>

Piece of JS code:

           $(".page_button").click(function () {
                $.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
                    function(data)
                    {
                        alert('123');
                        $(".records_content").empty();
                    });
            });

This script works, because I see '123' notification, but div container with '.records_content' class isn't clear. Please, tell me, how can I fix it? Thank you.

UPDATE: Now it works. But I have a new problem with pagination:

                <br><b>Page:</b><br/>
                <?php
                    for($i=0; $i<$count; $i++)
                    {
                        if ($i==0)
                        {
                            echo "<div class='selected_page_button'>".($i+1)." "."</div>";
                        }
                        else
                        {
                            echo "<div class='page_button'>".($i+1)." "."</div>";
                        }
                    }
                ?>

And code for changing class of button:

                $(".page_button").click(function () {

                    $(".selected_page_button").attr("class", "page_button");
                    $(this).attr("class", "selected_page_button");
                });

It works correctly for all buttons without first. When my page is created the first page is selected. When I click by "2", then "1" is simple and "2" is selected. The same thing is with all buttons without "1": if I click by "2" (or other one) then I can't click by first! "1" changes it's view but doesn't change behavior, because simple button is clickable and selected button is not clickable!

Upvotes: 1

Views: 11994

Answers (3)

Adil
Adil

Reputation: 148120

Try this:

$(".records_content").html('');

Upvotes: 2

Lix
Lix

Reputation: 47966

You'll see the alert happening before the HTML is emptied. Try placing the alert after the .empty() function or use a non-blocking command such as console.log() to debug your code.

Your code itself is correct... only the ordering of the commands is tripping you up...

Upvotes: 0

David Hellsing
David Hellsing

Reputation: 108500

It does clear using .empty() as your code already states, except that it clears after the alert. See here: http://jsfiddle.net/YPLeB/

After you click "OK", the DIV is cleared as expected.

Upvotes: 5

Related Questions