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 5 of 5
  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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,300
    Thanks
    31
    Thanked 989 Times in 986 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. #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. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,300
    Thanks
    31
    Thanked 989 Times in 986 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.

  5. #5
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    The code above doesn't seem to work

    @Sunfighter

    Are you still in here?

    I have tried to use your code on this forum(above) and the site you refer to earlier in the post to make the modal box with data from a mysql and it works fine except the 'Close it' disappear from the modal box.

    Here is my html code:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Simple jQuery Modal Window Demo Queness</title>
    <
    meta name="description" content="A fully customizable and easy to build Modal Popup Windows."/>
    <
    script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <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 heigth 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(1000);

        $.post('test.php', function(data) {
        $('#dialog').html(data);
        });
    });


    $(window).resize(function () {
     
        var box = $('#boxes .window');
     
            //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});
                   
            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();
     
            //Set the popup window to center
            box.css('top',  winH/2 - box.height()/2);
      });

      //if close button is clicked
      $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
      });   
      
      //if mask is clicked
      $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
      });     
    });

    </script>
    <style>
    body {
    font-family:verdana;
    font-size:15px;
    }

    a {color:#333; text-decoration:none}
    a:hover {color:#ccc; text-decoration:none}

    #mask {
      position:absolute;
      left:0;
      top:0;
      z-index:9000;
      background-color:#000;
      display:none;
    }
      
    #boxes .window {
      position:fixed;
      left:0;
      top:0;
      width:440px;
      height:200px;
      display:none;
      z-index:9999;
      padding:20px;
    }

    #boxes #dialog {
      width:375px; 
      height:203px;
      padding:10px;
      background-color:#ffffff;
    }

    #boxes #dialog1 {
      width:375px; 
      height:203px;
    }

    #dialog1 .d-header {
      background:url(images/login-header.png) no-repeat 0 0 transparent; 
      width:375px; 
      height:150px;
    }

    #dialog1 .d-header input {
      position:relative;
      top:60px;
      left:100px;
      border:3px solid #cccccc;
      height:22px;
      width:200px;
      font-size:15px;
      padding:5px;
      margin-top:4px;
    }

    #dialog1 .d-blank {
      float:left;
      background:url(images/login-blank.png) no-repeat 0 0 transparent; 
      width:267px; 
      height:53px;
    }

    #dialog1 .d-login {
      float:left;
      width:108px; 
      height:53px;
    }

    #boxes #dialog2 {
      background:url(images/notice.png) no-repeat 0 0 transparent; 
      width:326px; 
      height:229px;
      padding:50px 0 20px 25px;
    }
    </style>
    </head>
    <body>
    <h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>

    <ul>
    <li><a href="#dialog" name="modal">Simple Window Modal</a></li>
    </ul>


    <div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

    <div id="boxes">

    <div id="dialog" class="window">
    Simple Modal Window | 
    <a href="#" class="close"/>Close it</a>
    </br></br>
    Test
    </div>

    <!-- Mask to cover the whole screen -->
      <div id="mask"></div>
    </div>


    </body>
    </html> 
    And my php code is here:
    PHP Code:
    <?php
    /* Attempt MySQL server connection. Assuming you are running MySQL
    server with default setting (user 'root' with no password) */
    $link mysqli_connect("localhost""root""""1_test");

    // Check connection
    if($link === false){
        die(
    "ERROR: Could not connect. " mysqli_connect_error());
    }
     
    // Attempt select query execution
    $sql "SELECT * FROM names";
    if(
    $result mysqli_query($link$sql)){
        if(
    mysqli_num_rows($result) > 0){
            echo 
    "<table>";
                echo 
    "<tr>";
                    echo 
    "<th>person_id</th>";
                    echo 
    "<th>first_name</th>";
                    echo 
    "<th>last_name</th>";
                    echo 
    "<th>email_address</th>";
                echo 
    "</tr>";
            while(
    $row mysqli_fetch_array($result)){
                echo 
    "<tr>";
                    echo 
    "<td>" $row['person_id'] . "</td>";
                    echo 
    "<td>" $row['first_name'] . "</td>";
                    echo 
    "<td>" $row['last_name'] . "</td>";
                    echo 
    "<td>" $row['email_address'] . "</td>";
                echo 
    "</tr>";
            }
            echo 
    "</table>";
            
    // Close result set
            
    mysqli_free_result($result);
        } else{
            echo 
    "No records matching your query were found.";
        }
    } else{
        echo 
    "ERROR: Was not able to execute $sql. " mysqli_error($link);
    }

    // Close connection
    ?>
    As you can see below, i get the data from my database, but the 'Close it' is gone.
    -thisworksbutwithoutclose-jpg

    I guess it's simple to you to solve this, but i cannot find out what the problem is. Can you help?

    Thank you in advance!

    Johnny


 

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
  •