Databases
StackOverflow2013
Postsdbo
POOnly select a <div> from an external page with Ajax/PHP
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOnly select a <div> from an external page with Ajax/PHP
    primarykey
    data
    text
    <p>I've got a little problem. So, I'm using Ajax to load the content of another page into a <code>&lt;div&gt;</code>, after a change is detected in a <code>&lt;select&gt;</code>. But the thing is, I only want to load a particular <code>&lt;div&gt;</code> from that external page into my main page. Here is the code of the main page:</p> <pre><code>&lt;script type="text/javascript"&gt; $(function(){ createListeSelectWithDefault("categorie", &lt;?php echo getJsCategorieListe()?&gt;); }); function showListes(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","liste_result?q="+str,true); xmlhttp.send(); } &lt;/script&gt; &lt;div id="content"&gt; &lt;div id="bloc"&gt; &lt;div id="title"&gt;Combiner&lt;/div&gt; &lt;div class="mx"&gt; &lt;form name="new_combiner"&gt; &lt;select id="categorie" name="categorie" onchange="showListes(this.value)"&gt;&lt;/select&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="mx"&gt; &lt;div id="txtHint"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is my external page:</p> <pre><code>&lt;html&gt; &lt;div&gt; some other kind of text, no need to post it here, but can't take it away&lt;/div&gt; &lt;div id="mainDiv"&gt; &lt;?php $q=$_GET["q"]; $liste = getListeByCategorie($q); echo "&lt;table border='1'&gt; &lt;tr&gt; &lt;th&gt;Titre&lt;/th&gt; &lt;th&gt;Vues&lt;/th&gt; &lt;/tr&gt;"; foreach($liste as $row) { echo "&lt;tr&gt;"; echo "&lt;td&gt;" . $row-&gt;titre() . "&lt;/td&gt;"; echo "&lt;td&gt;" . $row-&gt;vue() . "&lt;/td&gt;"; echo "&lt;/tr&gt;"; } echo "&lt;/table&gt;"; ?&gt; &lt;/div&gt; &lt;div&gt; some other kind of text, no need to post it here, but can't take it away&lt;/div&gt; </code></pre> <p></p> <p>So there you go, nothing more. What should I do? I only want the <code>&lt;div id="mainDiv"&gt;</code> to be loaded into my page.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjackJoe
    1. USYannick Bloem
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COSince you're already using jQuery, why aren't you using its built-in AJAX handler instead of writing it yourself?
      singulars
      1. POOnly select a <div> from an external page with Ajax/PHP
      1. USDiodeus - James MacFarlane
    2. COUse responseXml to get an Xml document back, then use the DOM to get the element you want from it.
      singulars
      1. POOnly select a <div> from an external page with Ajax/PHP
      1. UScrush
    3. COYes, please check [$.ajax](http://api.jquery.com/jQuery.ajax).
      singulars
      1. POOnly select a <div> from an external page with Ajax/PHP
      1. USrationalboss
 

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