How to write a div with jquery or javascript?

Question

I was looking a solution to write one table, which comes from query to a DB in PHP, to a DIV, using Jquery. I'm not looking for the append's method, which I know works, but with append every time I press the button, which executes the query, the table is append to the document. The idea is not to load every time the page, but using the Jquery option, to send the post and get data back. Thank you.

UPDATE

<script>
var values = {var1: 2, var2:"Hello"};
$.get("phpfile.php", values, function(data) {
    $('#id').append(data);
});

Suppose that script is call from a "onclick()"; I don't want the append each time the data, but just write in a div.

If your question isn't about how to append elements to a page but really how to communicate with a DB through javascript, then you should rename the question. — Domino, Mar 27 '15 at 16:57
$('#divyouwant').html(html_of_table) should write the just the html/data which receive from a response ? — I love coding, Mar 27 '15 at 17:00

daniel451 · Accepted Answer · 2015-03-27T17:07:11.660

If I get you right, you just want to "update" the contents of a single div instead of reloading the whole page and this update contains a html table?!

For this purpose you could use the .html() function of jQuery: jQuery html()

In addition you should check .ajax() function of jQuery for all options/parameters: jQuery ajax()

A sample code could look like this:

$.ajax(
                    {
                        url: "yourfile.php",
                        cache: false,
                        success: function(htmldata){
                            $("#IdOfYourDiv").html(htmldata);
                        },
                        error: function(jqXHR, status, errorThrown){
                            alert("something went wrong");
                        }
                    }
                );

This would load data returned for example via an echo of the php file yourfile.php, load it in the temporary variable htmldata and write/update the html contents of YourDivID with the newly returned data.

score 1 · Answer 2 · edited May 23 '17 at 12:06

1 - on button pressed, do ajax get request (see https://stackoverflow.com/a/5942381/1163786)

2 - server receives request

3 - server sends back json response or html fragement

4a - json arrives and you start looping over these elements to build your desired html structure, then insert into the dom

4b - html fragment arrives and you simply insert it at the desired position into the dom

It's your decision, if you return a JSON respones or a HTML response.

For 4a and 4b read:

Every piece of these steps is already explained on StackOverflow.

How to write a div with jquery or javascript?

2 Answers2