The answer was simple - replace
$("#summDiv").load("<?php echo $siteURL; ?>/includes/>
StockFullSum.php", {ASXCode:z});
with
$.ajax({
type: "POST",
async: false,
url: "<?php echo $siteURL; ?>/includes/
StockFullSum.php",
data: "ASXCode=" + z,
success: function(html){
$("#summDiv").html(html);;
}
});
In other words, stop the 'asynchronous' bit of AJAX (does that then
make it JAX or SJAX?). That way, #chart1 and #chart2 exist when
doTheChart() is attempted.
Joy.
Cheers
GT
On Nov 9, 11:55 am, GT <geoffrey.tran...@gmail.com> wrote:
> Hi there,
>
> I've got a page that has navigation tabs, with each tab linked to a
> specific div (divs made visible by the click of the tab).
>
> The divs themselves are populated by load statements - a PHP file is
> fed an input code, and returns an HTML stream which then gets plonked
> in the div. Each time the code input changes, each div's PHP scripts
> is run in turn and all 5 divs are repopulated with content pertaining
> to the new input code.
>
> One of the divs has a child div that contains a SWF; at present the
> entire structure works exactly as I want, but the SWF is slow and fat
> (as SWFs are). I want to replace the SWF with a jqplot element.
>
> The problem is that there is no 'click' event (or other event) that
> can be used to trigger a 'live' instantiation of jqplot on this
> (dynamically-populated) child div. Once the PHP script has run, it's
> just 'there'. My attempts to get the jqplot element to insert itself
> have been pathetic, to say the least.
>
> So the following code is in my footer (after the script tag for
> jquery): as you can see, all I am trying to do at this stage is target
> the #chart1 and #chart2 divs (both which are added within the content
> populated into #summDiv when /includes/StockFullSum.php is run).
>
> If I put a breakpoint within doTheChart(), the breakpoint triggers (so
> the function is being activated) but nothing happens to either #chart
> div. Furthermore, the breakpoint occurs before #summDiv is populated
> (evidenced by the fact that loading.gif is still displaying).
>
> There is something I'm missing - it's clear that doTheChart has to be
> delayed until AFTER #summDiv's content is fully loaded: how can that
> be achieved? More to the point, why don't I get an error telling me
> that I'm trying to do stuff to an elements that doesn't exist (yet)?
>
> Cheerio
>
> GT
>
> problem script appears below....
>
> <script type="text/javascript">
> $(document).ready(function() {
> $("ul.tabs").tabs("div.panes > div");
> var asxcode= '<?php echo $ASXCode; ?>';
> if(asxcode!=='')
> {
> dotheFirst(asxcode);
>
> }
> });
>
> $("#hitThat").click(function() {
> var thisCode=$("#getCode").val();
> dotheFirst(thisCode);
>
> });
>
> function dotheFirst(z) {
> $("#summDiv").html('<center><img style="margin-top:70px;" src="<?
> php echo $siteURL; ?>/WIP/loading.gif" /></center>');
> $("#summDiv").load("<?php echo $siteURL; ?>/includes/
> StockFullSum.php", {ASXCode:z});
> doTheChart();
> doTheRest(z);
>
> }
>
> function doTheRest(t){
> $("#fundDiv").load("<?php echo $siteURL; ?>/includes/
> StockFundSum.php", {ASXCode:t});
> $("#techDiv").load("<?php echo $siteURL; ?>/includes/
> StockTechSum.php", {ASXCode:t});
> $("#sensDiv").load("<?php echo $siteURL; ?>/includes/
> StockSensSum.php", {ASXCode:t});
> $("#optDiv").load("<?php echo $siteURL; ?>/includes/
> StockOptSum.php", {ASXCode:t});
> $("#newsDiv").load("<?php echo $siteURL; ?>/includes/
> StockNewsSum.php", {ASXCode:t});
>
> }
>
> function doTheChart(){
> $("#chart2").hide(); ;
> $("#chart1").show()
> .css("background-color","blue");
>
> };
>
> </script>
