Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax load via jquery, content not shown
    primarykey
    data
    text
    <p>hi i have a html file which use ajax for loading contents from other html files in the same server. for some reason it does not work?? i have no clue as i am new to ajax.</p> <p><strong>here is the index.html(default home page)</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="demo.css" /&gt; &lt;script type="text/javascript" src="../jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt; &lt;/head&gt;&lt;body&gt;&lt;div id="rounded"&gt; &lt;img src="img/top_bg.gif" alt="top" /&gt;&lt;div id="main" class="container"&gt; &lt;h1&gt;ajax example&lt;/h1&gt; &lt;h2&gt;ajax jquery&lt;/h2&gt; &lt;ul id="navigation"&gt; &lt;li&gt;&lt;a href="#info"&gt;Page_1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page2"&gt;Page2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page3"&gt;Page_3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page4"&gt;Page_4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;img id="loading" src="img/ajax_load.gif" alt="loading" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="pageContent"&gt; it is a test&lt;/div&gt; &lt;/div&gt;&lt;div class="clear"&gt;&lt;/div&gt; &lt;img src="img/bottom_bg.gif" alt="bottom" /&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>script.js(for adding hash in the url and enable back button and also loading content)</strong></p> <pre><code>ar default_content = ""; $(document).ready(function () { checkURL(); $('ul li a').click(function (e) { checkURL(this.hash); }); default_content = $('#pageContent').html(); setInterval("checkURL()", 250); }); var lasturl = ""; function checkURL(hash) { if (!hash) hash = window.location.hash; if (hash != lasturl) { lasturl = hash; if (hash == "") $('#pageContent').html(default_content); else loadPage(hash); } } function loadPage(url) { var datastring = url.replace('#', ''); $('#loading').css('visibility', 'visible'); $.ajax({ type: "POST", url: "load_page.php", data: 'datastring=' + datastring, dataType: "html", async: false, success: function (msg) { if (parseInt(msg) != 0) { $('#content').html(msg); $('#loading').css('visibility', 'hidden'); } } }); } </code></pre> <p><strong>and load_page.php</strong></p> <pre><code>&lt;?php $url = $_REQUEST['datastring']; echo $url; if(file_exists(''.$url.'.html')){ echo file_get_contents(''.$url.'.html'); } else{ echo 'There is no such page!'; } ?&gt; </code></pre> <p>need help! as you can see when the ajax calls the "pagecontent" div loads the content from the requested page, but nothing happens here! what am i doing wrong?</p>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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