Modal works on local server but not remote?

Question

I have a table that a user can click on a link to see the write up on a game. Works great on my local server, but when deployed the modal just comes up blank.

In my head I call these.

<script type="text/javascript" src="Cal/jquery-1.8.3.js"></script>
<script type="text/javascript" src="Cal/jquery.simplemodal.js"></script>
<script type='text/javascript' src='Cal/basic.js'></script>

in my table I have a cell

<?php $gamenotes = strip_tags($row_RcdSchd['gamenotes']); ?>
        <div id='basic-modal'>
        <a href="?id=<?php echo $gamenotes ?>"  data-mydata="<?php echo $gamenotes ?>" class='basic'>***</a> </div>

each table row I call this

    <h3></h3>
    <p></p>

</div>

<!-- preload the images -->
<div style='display:none'>
    <img src='Images/x.png' alt='' />
</div>

and this is my basic.js file.

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content')
        .text($(this).data('mydata'))
        .modal();

        return false;
    });
});

As I said works perfect locally. I click any game not hyperlink and it opens the modal with the game notes in it. On the remote server it opens but just blank. I can see that the game notes are correct in the hyperlink, just not displaying.

Thanks!

Answer 1

Try this:

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$(document).on('click','#basic-modal .basic',function (e) {
    $('#basic-modal-content')
    .text($(this).data('mydata'))
    .modal();

    return false;
 });
});