Question

On my index.php page I use the jquery load() to load other pages in a div “bodycontent”. This works fine and dandy. I disable regular links, and must make the href the page name, without the php, and tag the php back on when the load() occurs. One of my pages I’m loading in the div I have dialog boxes pop up on links.

When you initially go to the page, this works fine, but if you steer away by clicking on “products” or any other link on the page at all, and then go back to “home” and click on a link “read more”, the dialog boxes will not show up again. You have to refresh, and then it will work until you click a link again. Also, this works fine in my IE 9, ver9.0.8, but older IE at work (like 8), and at least one other persons chrome the dialog box will not come up at all. There are also IE9’s at my work that this will just not work on, despite me deleting temp internet files, ect. On my computer it works fine on brand new downloads of firefox, chrome and IE, so I’m also wondering if my method is backwards compatible and cross browser, and if not what I can do to make it so. I’m also using get script in a function with the load to pull the jquery, jquery ui, and my javascript file for the dialog.

I’ve also looked at things like ajaxcomplete and such, but being mine initially works, I’m not really sure what to do.

My site main index page loading home.php initially (the news, ect)

Fiddle with my navigation javascript, which makes the pages inactive/active and load()/getscript in the div

dialog.js:

$(document).ready(function() {
$('#dialogbox').dialog({
    autoOpen: false,
    title: 'Loading title...', 
    modal: true,
    width: 500,
    height: 400
});
});
function readMore(id,title,cat,desc,post,auth) { 
//alert(id +","+ title +","+ cat +","+ desc +","+ post +","+ auth); 
var $dialog = $('#dialogbox').html('Category: '+ cat +'<br/>'+ desc +'<br/>---------------------------------<br/>Posted by: '+ auth +'<br/>' + post);
$dialog.dialog('open');
$dialog.dialog("option","title",title);
} 

How I pull to function readMore:

            <?php
                require('config/dbconfig.php');
                $query = "SELECT * FROM news ORDER BY id DESC LIMIT 4";
                if ($stmt = $mysqli->prepare($query)) {
                    /* execute statement */
                    $stmt->execute();

                    /* bind result variables */
                    $stmt->bind_result($idn, $titlen, $categoryn, $descn, $postdaten, $authorn);

                    /* fetch values */
                    while ($stmt->fetch()) {
                        //echo 'id: '. $id .' title: '. $title;
                        echo "<table border='0'>";
                        $shortDescLengthn = strlen($descn);
                        if ($shortDescLengthn > 106) {
                            $sDCutn = 106 - $shortDescLengthn;
                            $shortDescn = substr($descn, 0, $sDCutn);
                        } else {
                            $shortDescn = $descn;
                        }
                        echo "<h1>$titlen</h1>"; 
                        echo "<tr><td>$shortDescn...</td></tr>"; 
                        echo '<tr><td><a href="javascript:void(0);" onclick="' 
                        . 'readMore(' . $idn . ',' . htmlspecialchars(json_encode($titlen)) . ',' 
                        . htmlspecialchars(json_encode($categoryn)) . ',' 
                        . htmlspecialchars(json_encode($descn)) . ',' . htmlspecialchars(json_encode($postdaten)) . ',' 
                        . htmlspecialchars(json_encode($authorn)) . ')">Read More</a></td></tr>'; 
                        echo "<tr><td>Written by: $authorn</td></tr>"; 
                        echo '<tr><td><img src="images/hardcore-games-newsbar-border.png" width="468px" /></td></tr>'; 
                    }
                    echo "</table><br />";

                    /* close statement */
                    $stmt->close();
                }

                /* close connection */
                $mysqli->close();
            ?>

So again, basically I need to see why this isn’t working after I click a link, and how it can be more cross browser and backwards browser compatible.

Answer 1

All I had to do was add:

$('#bodycontent').empty();

before the load(), and it works on every computer I’ve tried so far. I’m guessing the div needed to be emptied before loading new html in it, so going back it was keeping the js and such from getscript and messing up. Also only kept the single js file that was required only by home.php to be loaded, and put everything else in the index page (like it should have been anyways).