How to load random content from MySql into div with JQuery onclick?

Question

Hi Guys i got a question im not familar with JQuery. So lets say i got a link. Onclick of this link i want to load random content from a MySQL into a div with a small loading animation without page reload.How to do this?

This is my div i want to load in the mysql ouput from jquery call.

                <p class="joketext">Some Text inside</p>

This is the button which is clicked by user and should load the random content from mysql into the div.

<a class="btn btn-success show_new_" href='#'>Load new random content into div</a>

try to read one here. [Using Jquery Ajax to retrieve data from Mysql](http://stackoverflow.com/questions/16707648/using-jquery-ajax-to-retrieve-data-from-mysql) — j.Doe, Jul 19 '16 at 00:15

score 0 · Answer 1 · answered Jul 19 '16 at 00:10

The docs explain it pretty well. http://api.jquery.com/load/

$(document).ready(function(){
  $('.show_new_').on('click', function(){
    $('.joketext').load('/path/to/some/script');
  });
});

Something to point out add an id attribute to your html. Unless you only have one item using the class..otherwise the ajax would happen on all items with that class.

You will need to create the script that grabs the data from mysql ensuring that it's on the same domain otherwise you'll run into this problem:

https://en.wikipedia.org/wiki/Same-origin_policy

su-ex · Accepted Answer · 2016-07-19T00:36:48.947

0

You need some server side code and some client side.

A good choice for your usecase is always json instead of plain text.

The simplest server side in php is probably this:

<?php
$host="localhost";
$username="youruser"; 
$password="yourpass"; 
$db_name="yourdb";
$db_query="yourquery"; 

$mysqli = new mysqli("$host", "$username", "$password", "$db_name");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}

$mysqli->real_query($db_query);
$res = $mysqli->use_result();
$rows = array();
while ($row = $res->fetch_assoc()) {
    $rows[] = $row;
}

print(html_entity_decode(json_encode($rows));
?>

How to make an asynchronus AJAX call with jQuery you can find nice examples here: http://api.jquery.com/jquery.getjson/

How to handly the click event see what @Loadx wrote. Of course you can change the php's output to plain text, but I'd advise you not to generate the html server side if you use JavaScript anyways.

edited Jul 19 '16 at 00:36

answered Jul 19 '16 at 00:30

su-ex

106
7

is this also a good way or is your way much faster?`query($sql) as $row) { echo "$row['witz']"; } ?> ` – Phil Jul 19 '16 at 00:40
With such a little amount of data computed and transferred it doesn't make much difference probably. PDO vs MySQLi: http://code.tutsplus.com/tutorials/pdo-vs-mysqli-which-should-you-use--net-24059 JOSN vs plain text: It'll simply become a mess if you generate your html server side while you manipulate your DOM client side. – su-ex Jul 19 '16 at 00:44
I dont understand my english is not ver well so please tell me only which way to use that is not mess up.thx – Phil Jul 19 '16 at 00:51
My strict advise would be to generate the HTML code client side in this case. With the code you provided in the comment above you can do it plain text of course. But if you want some formatting or load more jokes it'll be a problem. – su-ex Jul 19 '16 at 00:53
i just only want to load one joke at once after click on the button so it is possible to do i this way i wrote in the comment right ? – Phil Jul 19 '16 at 01:02
Sure. As long as it stays that easy you're fine to go. – su-ex Jul 19 '16 at 01:03
Oh no i also need the id and change some input text in form is this possible with this ? – Phil Jul 19 '16 at 01:18
No, if you want also the jokes id use json – otherwise it's very dirty and probably also not easier. It's not that difficult to parse json in JavaScript ... – su-ex Jul 19 '16 at 14:25

How to load random content from MySql into div with JQuery onclick?

2 Answers2