Databases
StackOverflow2013
Postsdbo
POCalling functions with Ajax?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCalling functions with Ajax?
    primarykey
    data
    text
    <p><strong>What I want to achieve</strong> I have some works I want to show. So, I have thumbnails of these. When a visitor clicks on a thumbnail, I want a div (called slickbox) to open and show the title, the description and a slider about the work clicked.</p> <p><strong>What I've already done and how</strong> I get my work's datas from a database. Here is the little part of my listing of works:</p> <p>index.php</p> <pre><code>&lt;?php $retour_messages = mysql_query('SELECT 2K13_works.*, 2K13_categories.nom AS nomCAT FROM 2K13_works, 2K13_categories WHERE 2K13_works.cat_id = 2K13_categories.cat_id ORDER BY 2K13_works.record_date DESC') or die(mysql_error());//requete sql pour récupérer les works de la page ?&gt; &lt;ul id = "creations" class = "step"&gt; &lt;?php while($donnees_messages=mysql_fetch_assoc($retour_messages)){ echo '&lt;li class = "step '.$donnees_messages['nomCAT'].'" id="'.$donnees_messages['work_id'].'"&gt; &lt;div class = "item"&gt;&lt;a href = "#"&gt;&lt;img src = "'.$donnees_messages['thumbLink'].'" alt = "'.$donnees_messages['titre'].'" title = "" width = "226" height = "147"/&gt;&lt;/a&gt; &lt;div class = "caption"&gt; &lt;h3&gt;'.$donnees_messages['titre'].'&lt;/h3&gt; &lt;p&gt;'.html_entity_decode($donnees_messages['resume'],ENT_QUOTES,'UTF-8').'&lt;/p&gt; &lt;p id = "desc" class = "hidden"&gt;'.html_entity_decode($donnees_messages['description'],ENT_QUOTES,'UTF-8').'&lt;/p&gt; &lt;!--&lt;p id = "idw" class = "hidden"&gt;'.$donnees_messages['work_id'].'&lt;/p&gt;--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt;'; } ?&gt; &lt;/ul&gt; </code></pre> <p>As you can see, I have a ul tag containing a li tagfor each work. Each li tag takes the id of the work in database, and each li contains h3 tag and p tag containing the texts I want to show in a slickbox (for the images, I'll see later).</p> <p>Now, my JavaScript code for the slickbox, appearing and disappearing:</p> <p>front_functions.js</p> <pre><code>//_____________SLICKBOX__________________________________ $('#slickbox').hide(); $("#creations li").click(function(e) { // shows the slickbox on clicking the noted link $titre = $(e.target).children("h3").text(); $bla = $(e.target).children("#hidden").text(); $("#description").children("h1").text($titre) ; $("#description").children("p").text($bla); $('#slickbox').slideDown(); e.preventDefault(); $(e.target).empty(); //return false; }); </code></pre> <p>This code is not working, because my slickbox is loaded before the works. So that's why I need Ajax and a asynchronous way of sending and executing requests.</p> <p>I read this sample code here: <a href="http://www.degraeve.com/reference/simple-ajax-example.php" rel="nofollow">which is quite helpful</a>. But, I have a problem: I'm using jQuery and I would like to use <code>$.ajax()</code>. And I just don't really understand how to do this.</p> <p>Do I have to set an XHMLHTTPRequest object? Where can I write the Ajax call? Can I call a function, instead of an URL?</p> <p>Like doing (I don't know):</p> <pre><code>$(#creations li).click(function(e){ $.ajax(){ function : "displayContent(id,desc,title)", } } function displayContent(id,desc,title){ $(#slickBox).children("h1").innerHTML(title); $(#slickBox).children("p").innerHTML(desc); $(#slickBox).show(); } </code></pre> <p>I don't even know if I should use JSON (but, well, because my data is already stored, and I just want to display them, I think I don't need Json).</p> <p>Please give me your informed opinion and your senior advice.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMat
    1. USGaelle
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCalling functions with Ajax?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCalling functions with Ajax?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAsynchronous programming (which AJAX is) tends to involves *callbacks*. If you look at the `$.ajax` syntax, you provide a function to be called as a parameter. You can do it like `$.ajax({ success: function(data) { ... }})`.
      singulars
      1. POCalling functions with Ajax?
      1. USWaleed Khan
    2. COthanks @WaleedKhan ! i'll try it and come back if i have questions or thanks :)
      singulars
      1. POCalling functions with Ajax?
      1. USGaelle
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload