Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    52
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Question How to load data from database into jquery modal box

    I have been faced with this problem for a few days i have this script that retrieves data from the database and display it to the user but i want to load this database in jquery modal box please assist anyone:

    Script that gets data from database:

    PHP Code:
    <div class="citylist fl">
                <div class="inner_top1"></div>
                <div class="inner_center1">
                
                    <ul class="country_list">
            
                    <?php 
                     
    if(mysql_num_rows($resultSet)>0)
                     {
            
                            while( 
    $row mysql_fetch_array($resultSet))
                            {
                             
    ?>
                                <li class="fl"><a href="javascript:;" title="<?php echo ucfirst(html_entity_decode($row['cityname'], ENT_QUOTES)); ?>" onclick="javascript:citySelect('<?php echo DOCROOT?>','<?php echo CURRENT_THEME?>','<?php echo $row['cityid']; ?>','<?php echo html_entity_decode($row['cityname'], ENT_QUOTES); ?>','<?php echo html_entity_decode($row['city_url'], ENT_QUOTES); ?>');" ><?php echo ucfirst(html_entity_decode($row['cityname'], ENT_QUOTES)); ?></a></li>
                
                           <?php 
                
                            
    }
                            
                    }        
                    
    ?>
            
                    </ul>
                
                </div>
                <div class="inner_bottom1"></div>
                                    
            </div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    gazaian1 you have left a lot of needed information out of this post, like the name of the jquery modalbox you were using. So I did this using Simple jQuery Modal. You can find it here http://www.queness.com/post/77/simpl...indow-tutorial
    It is easy to understand and the three components of it are listed.

    What I did to modify this is use ajax to preform the db query and placed the return into the <div id="dialog" class="window"> section of the html code, which means I eliminated what was originally there in the demo. Next I added an ajax section to the jquery so you could get the results of the DB query and form the contents of the <div id="dialog" class="window"> box.

    I am thinking that you want to have a number of cities listed and when clicked they populate the modalbox and make it appear. If so you need to add the extra cities under <a href="#dialog" name="modal">The City Name</a> and get the name of the city to pass to the php file.

    Here is that php file [sort of you add the db query]
    PHP Code:
    <?php
    // DO the db inquery here and then
    $row['cityname'] = 'City Name';
    $row['cityid'] = 'City Id';
    $row['city_url'] = 'City Url';


    $name ucfirst($row["cityname"]);
    $id $row["cityid"];
    $url $row["city_url"];

    $info =  <<< BOB
        <b>$name</b><br /><hr />
        $id<br />
        $url |
        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>
    BOB;

    echo 
    $info;

    ?>
    Here is the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="Steffen Hollstein" />
    <meta name="copyright" content="Steffen Hollstein" />
    
    <link rel="stylesheet" type="text/css" media="all" href="css/jquery.modalbox.css" />
    <script type='text/javascript' src='javascript/jquery.js'></script> <!-- THIS IS MY JQUERY SUB YOUR OWN HERE -->
    <script>
    
    $(document).ready(function() {
    
        //select all the a tag with name equal to modal
        $('a[name=modal]').click(function(e) {
            //Cancel the link behavior
            e.preventDefault();
            //Get the A tag
            var id = $(this).attr('href');
    
    
            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
    
            //Set height and width to mask to fill up the whole screen
            $('#mask').css({'width':maskWidth,'height':maskHeight});
    
            //transition effect
            $('#mask').fadeIn(1000);
            $('#mask').fadeTo("slow",0.8);
    
            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();
    
            //Set the popup window to center
            $(id).css('top',  winH/2-$(id).height()/2);
            $(id).css('left', winW/2-$(id).width()/2);
    
            //transition effect
            $(id).fadeIn(2000);
    
    		$.post('test.php', function(data) {
    		$('#dialog').html(data);
    		});
        });
    
        //if close button is clicked
        $('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();
            $('#mask, .window').hide();
        });
    
        //if mask is clicked
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });
    
    });
    
    </script>
    <style>
    
    /* Z-index of #mask must lower than #boxes .window */
    #mask {
      position:absolute;
      z-index:9000;
      background-color:#000;
      display:none;
    }
    
    #boxes .window {
      position:fixed;
      width:440px;
      height:200px;
      display:none;
      z-index:9999;
      padding:20px;
      background-color: white;
    }
    
    /* Customize your modal window here, you can add background image too */
    #boxes #dialog {
      width:375px;
      height:203px;
    }
    </style>
    </head>
    <body>
    <!-- #dialog is the id of a DIV defined in the code below -->
    <a href="#dialog" name="modal">The City Name</a>
     <div id="boxes">
        <!-- #customize your modal window here -->
    	<div id="dialog" class="window">
    	</div>
        <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
        <div id="mask"></div>
        <div class="result"></div>
    </div>
    </body>
    </html>
    Last edited by sunfighter; 02-09-2013 at 10:05 PM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    52
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Thanks sun fighter but when i add my php files it loads the who page and not the contents from the DB any ideas i can't give a link to the site as it is not live yet. Please help me with this

    How can i acheive something like on this site:
    http://www.eversave.com/online/david-s-cookies-3
    Last edited by gazaian1; 02-09-2013 at 11:41 PM.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    If you look at the php file I gave you you will see
    FIRST I assign value to $row[] just like reading from a DB.
    THEN Set string equal to the returned $row[]. Don't use the $row['city_url'] USE variable.
    The heredoc section dups what is in the page I asked you to readhttp://www.queness.com/post/77/simpl...indow-tutorial. We move the contents of <div id="dialog" class="window"> and fill it in with the variables. THIS IS WHAT you might not be doing.
    LASTLY we echo it to the html.

    If you are still confused post your php file that loads the who page.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •