$.post() works, but content disappears...

$.post() works, but content disappears...

The issue

I'm trying to use jquery to implement a form of 'background' loading of HTML content that's generated by a series of PHP scripts: the aim is to make the first 'tab' viewable before other content is loaded, and more generally, to reduce page reloads. (The existing version of the page calls a complete page reload whenever a tab is clicked, changing a PHP include file that populates a single DIV).


The central javascript that is giving me headaches is the submit function of the script that follows:

<script>
$(document).ready(function() {
$("ul.tabs").tabs("div.panes > div");                               
});
                 
$("#testform").submit(function() {
       var thisCode=$("#getCode").val();
       $.post("http://localhost/WIP/StockFullSum.php", {ASXCode:thisCode}, function(data){$("#summDiv").html(data);});         
       $.post("http://localhost/WIP/StockFundSum.php", {ASXCode:thisCode},function(data){$("#fundDiv").html(data);});         
       $.post("http://localhost/WIP/StockTechSum.php", {ASXCode:thisCode},function(data){$("#techDiv").html(data);});
       $.post("http://localhost/WIP/StockSensSum.php", {ASXCode:thisCode},function(data){$("#sensDiv").html(data);});
       $.post("http://localhost/WIP/StockOptSum.php", {ASXCode:thisCode},function(data){$("#optDiv").html(data);});
       $.post("http://localhost/WIP/StockNewsSum.php", {ASXCode:thisCode},function(data){$("#newsDiv").html(data);});
       
});
</script>



The javascript is pretty straight-forward: the document.ready stuff sets the ul.tabs to a tabbed nav; the div.panes furnish the content. That works as expected, except when I try to update the content dynamically.


The submit button on the #testform form fires a function which does the following:

(1) sets a POST var (ASXCode) to the input from #getCode in #testform;
(2) runs a series of PHP scripts (each of which takes $_POST['ASXCode'] as an argument) and;
(3) populates the HTML in the appropriate div in div.panes with the HTML output from each PHP script.

When I first wrote that code (a week ago) I used an older (or a cut-down) version of jQuery.js that came bundled with the javascript toolkit that does the tabs.

It worked like a charm; at that stage I had the first $.post() activated by the submit function, and the subsequent $.post()'s activated after the first one had run. The page time-to-view dropped by 80% compared with the non-jQuery version of the page, and all was right with the world.

When I updated my jQuery source, it stopped working - or more to the point, it still worked, but the content would flash into the divs and then disappear.



In debug (using FireBug), I added breakpoints to the Javascript after each $.post(), and it showed the following:

* The submission of #testform passes ASXCode to the POST stack [GOOD].

* The post vars are properly passed to the PHP scripts [GOOD].

* Each of the PHP scripts returns the desired HTML [GOOD].

* once the javascript finished, all divs were empty [BAD]



The HTML in each div appears to be set by each PHP script as required, but as soon as the javascript completes the HTML in each div disappears (there is no content in the div.panes before the submit).

It seems that, once the submit function finishes, the document is reloaded in its entirety and thus the HTML in each DIV is re-set to its default value. If so, it seems an absolute arse of a thing to do.

Since the PHP scripts are on the same server as the page, I tried changing the $.post() statements to load() (e.g.,

       $("#summDiv").load("StockFullSum.php", {ASXCode:thisCode})


This didn't solve the issue (although it might reflect better coding practice). Once again, the POST var is passed and the PHP script generates the right HTML, but it disappears the instant that the javascript completes.


For the sake of completeness, this is the rest of the page (ignoring the stuff in the <head> section prior to the inclusion of the jquery core, and ignoring the </body></html>)...

<!-- jQuery - the core -->
<script type="text/javascript" src="http://localhost/jscripts/jquery.js"></script>
<!-- jQuery - useful tools: tabs, tooltips and so forth -->
<script type="text/javascript" src="http://localhost/jscripts/jquery.tools.min.js"></script>
</head>
<body>
<div style="width:70%; height: 100%; min-height: 800px; margin: 0 auto; background: #FFFFFF;">
<h2>Workbench</h2>
<form id="testform">
<p>Please enter a stock code:</p><input type="text" id="getCode"/>
<input type="submit" />
</form>
<ul class="tabs">
<li id="dSumm"><a>Summary</a></li>
<li id="dFund"><a>Fundamental</a></li>
<li id="dTech"><a>Chart</a></li>
<li id="dSens"><a>Sensitivities</a></li>
<li id="dOpt"><a>Options</a></li>
<li id="dNews"><a>News</a></li>
</ul>
<div class="panes">
<div id="summDiv"></div>
<div id="fundDiv"></div>
<div id="techDiv"></div>
<div id="sensDiv"></div>
<div id="optDiv"></div>
<div id="newsDiv"></div>
</div>
</div>
<br />
<script>
$(document).ready(function() {
$("ul.tabs").tabs("div.panes > div");                               
});
                 
$("#testform").submit(function() {
       var thisCode=$("#getCode").val();
       $.post("http://localhost/WIP/StockFullSum.php", {ASXCode:thisCode}, function(data){$("#summDiv").html(data);});         
       $.post("http://localhost/WIP/StockFundSum.php", {ASXCode:thisCode},function(data){$("#fundDiv").html(data);});         
       $.post("http://localhost/WIP/StockTechSum.php", {ASXCode:thisCode},function(data){$("#techDiv").html(data);});
       $.post("http://localhost/WIP/StockSensSum.php", {ASXCode:thisCode},function(data){$("#sensDiv").html(data);});
       $.post("http://localhost/WIP/StockOptSum.php", {ASXCode:thisCode},function(data){$("#optDiv").html(data);});
       $.post("http://localhost/WIP/StockNewsSum.php", {ASXCode:thisCode},function(data){$("#newsDiv").html(data);});
       
});
</script>
</body></html>

    • Topic Participants

    • gt