Add strings with ajax from server using phpMyAdmin, jquery - php

Question

Right now, i'm trying to add a couple of <li>, using ajax. The problem is that i'd like these <li> to use data from a database I have on the server. I'd like to know how to do that! Also, is it possible to use jQuery?
Let's say I have a <div id="listHolder">, where I have a <ul> and then some <li>. Those <li> are the ones I want to change via ajax.
I use phpMyAdmin, where I have a database called t_menuMaterials, and I want to retrieve strings inside m_nom.
I'd also want to be able to change the menu, on a click of a button, change t_menuMaterials to t_menuTextures.
I have been able to populate my menu, but only at the load of the page like that!
$requeteMenuMaterials = "SELECT * FROM t_menuMaterials ORDER BY m_id LIMIT 10";
$ressourcesListe = mysql_query($requeteMenuMaterials);
$targetMenu = "SELECT r_categorie FROM t_ressources ORDER BY m_id LIMIT 10";
$ressourcesListe2 = mysql_query($targetMenu);
$menu2 ='';
while($tbl_ressources1 = mysql_fetch_assoc($ressourcesListe)){
$menu2 .='<li class="secondaryMenu"><a href="#" onClick="test('.$ressourcesListe2.');" ><div>'.$tbl_ressources1['m_nom'].'</div></a></li>';
}
Now, I'd like to be able to change the div (like if $requeteMenuMaterials became ="SELECT * FROM t_menuTextures(instead of t_menuMaterials). I have no idea on how to change those <li> via ajax using my databases and phpMyAdmin.

Answer 1

Its difficult to give you exact advice as you only list small parts of your service side code.
But some general guildlines:
Take a look on jQuery, it has support for ajax calls and also a lot of client side plumbing to update elements.
On the server you have to have som separation of the different calls to the DB so that the client via the URL or POST data can tell the service side script what to do.
There is no way from Javascript to directly call some inner part of a php page, you have to call the page as a regular http request and use URL arguments or postdata to have the page return different information.

Answer 2

jQuery $.get is probably what you need. Basically, have a page that pulls the relevant data from the database, and echo it out to your page. So your page (get-li-data.php, for example) might output:
<li>An item</li>
<li>Another item</li>
And use $.get to get that data and insert it into a div, like:
$.get('/get-li-data.php', function(data) {
$('#div-where-i-have-a-ul').html(data);
});