SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    On select of a checkbox a loading screen covers the site until the selction is loaded

    I am building a page up using some javascript where basically on select of a checkbox the page automatically refreshes and eventually the page will load the results, not quite there on that bit yet.

    But what I want to see happening if its possible is that on click of the checkbox to stop them quickly selecting another checkbox before that one has loaded it would be good to have a faded out screen appear to cover the site until the site has loaded.

    here is my full code:

    Code:
    <?
    session_start();
    error_reporting(E_ALL);
    ini_set('display_errors','On');
    include("config.php");
    ?>
    <?
    $url = $_SERVER['REQUEST_URI'];
    print "<pre>";
    
    print $url;
    
    $url_parsed = parse_url($url);
    //print_r($url_parsed);
    
    parse_str($url_parsed['query'], $url_parts);
    print_r($url_parts);
    
    print "</pre>";
    ?>
    <!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>
    <script language="JavaScript">
    function checkRefresh(value)
    {
    
    	document.form1.submit();
    	
    }
    </script>
    
    <title></title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="css/style.css" rel="stylesheet" type= "text/css" />
    
    <meta name="keywords" content=""/>
    
    <meta name="description" content=""/>
    
    <meta name="robots" content="all" />
    </head>
    
    <body>
    <div id="wrapper">
    <?
    if (is_array($_GET['regions'])) {
         foreach($_GET['regions'] as $regions) {
           //echo $regions;
         }
    }
    ?>
    <form name="form1"> 
    <?php   
    $r=mysql_query("select Id_Rsrt, Nom_Rsrt, IdCntry_Rsrt, Id_show from tbl_resorts where (IdCntry_Rsrt='7') and (Id_show='1') order by Nom_Rsrt ASC");  
    while($q=mysql_fetch_assoc($r)){ ?> 
    <input type="checkbox" name="regions[]" value="<?=$q['Id_Rsrt']?>" onClick="javascript:checkRefresh()" <?=((in_array($q['Id_Rsrt'], $_REQUEST['regions'])) ? "checked=\"checked\"" : "")?> class="inline" /><?=$q['Nom_Rsrt']?><br/> 
    <? } ?> 
    </form> 
    
    <div id='result_table'></div>
    
    </div>
    </body>
    </html>
    I htink I understand that that process does its magic inside this function:

    Code:
    function checkRefresh(value)
    {
    
    	document.form1.submit();
    	
    }
    But looking for some tips of what to do.

    Cheers

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Does it have to be an overlay?
    A simpler solution might be to just temporarily disable the checkboxes.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    Umm no its not necessary but I know the people I work for given the option would like to see somehting visually appealing like that happening, as it looks clever too, than the other way, which in honesty sounds good too.

    If for instance the buttons checkboxes stopped working and also faded out whilst it loaded, now again that will go down better.

    Thanks for the reply though

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi again,

    Quote Originally Posted by multichild View Post
    I know the people I work for given the option would like to see somehting visually appealing like that happening
    Ok, lets go with that then.
    I presume your form is using (going to use) AJAX to fetch the results from the server.
    If that is the case, you will want to attach an event handler to your checkboxes, that fires the request and blocks the UI every time one of them is selected.
    Then, when the AJAX request returns, you will want to unblock the UI and update your content.

    I made you a simple demo that does that.

    My script fires a request to sleep.php, which, as the name suggests, sleeps for three seconds, then returns the value of whichever option you selected.

    Here's the code:

    index.html

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Block UI with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #myForm div{margin-bottom:5px;}
          #result{
            border:solid 1px green; 
            background: #6F9; 
            margin-top:15px; 
            padding:7px; 
            display:none;
          }
          #black_overlay{
            display: block;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
          }
          #loading{
            padding: 10px;
            border: 5px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
          }
        </style>
      </head>
      
      <body>
        <h1>My wonderful form</h1>   
        <form action="convert.php" method="post" id="myForm">
          <p>Please select an option:</p>
          <div>
            <input type="radio" name="option" value="1" id="option1">
            <label for="option1">Option 1</label>
          </div> 
          <div>
            <input type="radio" name="option" value="2" id="option2">
            <label for="option2">Option 2</label>
          </div> 
          <div>
            <input type="radio" name="option" value="3" id="option3">
            <label for="option3">Option 3</label>
          </div>   
        </form>
        
        <p id="result"></p>
        
        <script type="text/javascript">
          jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
          }  
    
          $(document).ready(function() {
            $("input:radio").on("change", function(e) {
              $("#result").hide();
              var v = ($(this).val());
              
              $('<div id="black_overlay"></div>').appendTo('body');
              $('<div id="loading">Loading Content</div>').appendTo('body').center();
              
              $.ajax({
                type : "POST",
                url : "sleep.php",
                data  : 'v=' + v,
                success : function(res) {
                  $("#loading").remove();
                  $('#black_overlay').fadeOut('slow', function() {
                    $('#black_overlay').remove();
                    $("#result").text("You chose option " + res).css("display", "inline-block");
                  });              
                }
              });
            });
          });
        </script>
      </body>
    </html>
    sleep.php

    PHP Code:
    <?php 
      sleep
    (2);
      echo 
    $_POST['v'];
    ?>
    I hope that helps you.
    If you have any questions, let me know.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    Good to speak to you again.

    I added all the above to my development page and I needed to make a small change as im using checkboxes rather than radio's so changed this bit:

    Code:
    $("input:checkbox").on("change", function(e) {
    I think also with the way this page works, the three second wait is being cancelled out and the blackout for some reason as there is another script thats being called on elect of the checkbox to refresh the page.

    Here is the link to the dev area:

    http://devchecksafetyfirst.csf.dcmanaged.com/

    And here is the full code for that page as it stands:

    Code:
    <?
    session_start();
    error_reporting(E_ALL);
    ini_set('display_errors','On');
    include("config.php");
    ?>
    <?
    $url = $_SERVER['REQUEST_URI'];
    print "<pre>";
    
    print $url;
    
    $url_parsed = parse_url($url);
    //print_r($url_parsed);
    
    parse_str($url_parsed['query'], $url_parts);
    print_r($url_parts);
    
    print "</pre>";
    ?>
    <!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>
    <script language="JavaScript">
    function checkRefresh(value)
    {
    	document.form1.submit();	
    }
    </script>
    
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
          #myForm div{margin-bottom:5px;}
          #result{
            border:solid 1px green; 
            background: #6F9; 
            margin-top:15px; 
            padding:7px; 
            display:none;
          }
          #black_overlay{
            display: block;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
          }
          #loading{
            padding: 10px;
            border: 5px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
          }
    </style>
    </head>
    <body>
    
    <?
    if (is_array($_GET['regions'])) {
         foreach($_GET['regions'] as $regions) {
           //echo $regions;
         }
    }
    ?>
    <form name="form1" id="myForm"> 
    <?php   
    $r=mysql_query("select Id_Rsrt, Nom_Rsrt, IdCntry_Rsrt, Id_show from tbl_resorts where (IdCntry_Rsrt='7') and (Id_show='1') order by Nom_Rsrt ASC");  
    while($q=mysql_fetch_assoc($r)){ ?> 
    <input type="checkbox" name="regions[]" value="<?=$q['Id_Rsrt']?>" onClick="javascript:checkRefresh()" <?=((in_array($q['Id_Rsrt'], $_REQUEST['regions'])) ? "checked=\"checked\"" : "")?> class="inline" /><?=$q['Nom_Rsrt']?><br/> 
    <? } ?> 
    </form> 
    
    <p id="result"></p>
    
    
    <script type="text/javascript">
          jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
          }  
    
          $(document).ready(function() {
            $("input:checkbox").on("change", function(e) {
              $("#result").hide();
              var v = ($(this).val());
              
              $('<div id="black_overlay"></div>').appendTo('body');
              $('<div id="loading">Loading Content</div>').appendTo('body').center();
              
              $.ajax({
                type : "POST",
                url : "sleep.php",
                data  : 'v=' + v,
                success : function(res) {
                  $("#loading").remove();
                  $('#black_overlay').fadeOut('slow', function() {
                    $('#black_overlay').remove();
                    $("#result").text("You chose option " + res).css("display", "inline-block");
                  });              
                }
              });
            });
          });
    </script>
    </body>
    </html>

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    The problem is the checkRefresh() function, which submits the form and cancels out the overlay.
    Do you need to submit the form every time a checkbox is checked?
    I had assumed you were doing something with AJAX.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The idea is that yes the page refreshes every time a checkbox is selected and the results then change.

    I'm building this up at the moment, as I havent used AJAX before so at this stage its using the checkRefresh() function.

    Its building an array up at the moment, eventually that array will control what gets displayed, but I'm not quite there yet.

    There no way around it is there with my checkRefresh() function.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know you will probably laugh, but i took the refresh bit out of the other function and placed it at the end of your one:

    Code:
    type : "POST",
     url : "sleep.php",
    data  : 'v=' + v,
    success : function(res) {
    $("#loading").remove();
    $('#black_overlay').fadeOut('slow', function() {
    $('#black_overlay').remove();
    $("#result").text("You chose option " + res).css("display", "inline-block");
    document.form1.submit();
    And by the seems it allows yours and what I got at the moment to work together.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by multichild View Post
    I know you will probably laugh...
    Nah, man!
    Everyone has to learn somewhere.
    Let's step through this bit by bit:

    If I understand you correctly, you are currently submitting your form every time a user checks a checkbox.
    The script you are submitting the form to is returning some kind of array based on what has been selected and you are using this array to add more content to your page.

    This is a perfect case for AJAX.
    Currently, every time you submit the form, you are causing the page to reload.
    On a small test site (probably hosted locally), this is ok and you don't notice much of a performance hit, but when your site grows and you have everything on a remote server, all of these reloads will slow your page down and could make it feel sluggish.

    What I was proposing is that you use JavaScript (and the jQuery library) to monitor when a user checks or unchecks a checkbox.
    You do that, like this:

    Code JavaScript:
    $("input:checkbox").on("change", function(e) {
    ...
    }

    Then, you should fire off an AJAX request to the script you were otherwise submitting your form to (sleep.php was just an example).

    Code JavaScript:
    $("input:checkbox").on("change", function(e) {
      $.ajax({
        type : "POST",
        url : URL HERE,
        data : DATA HERE
      });
    }

    This will post the data you specify to the script you specify.

    You can then use a success callback to update the page with whatever the PHP script returns.

    Code JavaScript:
    $("input:checkbox").on("change", function(e) {
      $.ajax({
        type : "POST",
        url : URL HERE,
        data : DATA HERE,
        success : function(res) {
          UPDATE STUFF HERE        
        }
      });
    }

    Now, we come to the starting point of your question.
    While the AJAX is off doing its thing, how can we block the UI and ensure that the user doesn't select a different checkbox.

    In psuedo code you would do that, like this:

    Code JavaScript:
    $("input:checkbox").on("change", function(e) {
      BLOCK UI HERE
      $.ajax({
        type : "POST",
        url : URL HERE,
        data : DATA HERE,
        success : function(res) {
          UPDATE STUFF HERE   
          UNBLOCK UI HERE     
        }
      });
    }

    And that was what my code was doing.

    However, you shouldn't use both scripts together, rather you should integrate mine into yours.

    Does that make sense?

  10. #10
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    Off Topic:

    @Pullo ; Dave, you really must put all the demos you create onto a snippets page on your blog! They are excellent as a learning tool and for reference/examples!

    Quote Originally Posted by multichild
    I know you will probably laugh,

    Nope, it is more appreciated by all of us when folk have a go at something and at least try and solve the problem before coming back to ask for help. Far too many people just expect a solution to be handed to them on a plate. Laugh? no, Applaud and help -yes.

    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Off Topic:

    Sure! I can do this in a spare moment and I'll link to the new page in my signature. Watch this space ...

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I think I can see what you where getting at, and will go through it now and take a look.

    And yes your right, basically what happens is the user for example clicks a country before heading to the page im developing, then all the hotels are displayed.

    Then through a set of dynamically generated checkboxes in relation to the country, the user refines their search by using the checkboxes, and each time they check it, it refreshes and the results change, thats why I wanted to stop them clicking one straight after the other, as there a possibilty they wont get the search they thought they asked for.

    Ive just managed to get the data out of the array in preparation to start using it to draw out the hotels from the database using the code below:

    PHP Code:
    if (is_array($_GET['regions'])) {
         
    $regionsArray = array();
         foreach(
    $_GET['regions'] as $regions) {
             
    $regionsArray[] = '\''.$regions.'\'';
              
    $ids implode(','$regionsArray);
    $sql mysql_query("SELECT * FROM table WHERE id IN ($regionData)");
         }
         echo 
    $ids;

    I wont to add a little bit to the off topic stuff to above, and say that in the course of 8-9 months this forum has pushed my skill level up massively, and I try not to come on here asking for the full answer, as I know its not the best way to learn, but everyone on here is awsome.

  13. #13
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ye I think I get it properly now, I get the sleep.php bit, so that basically will allow the script I just posted above to work to put the array into the select from the database instruction.

    Then on success of that the (success : function(res) {) deals with it and then the blackout screen goes away.

    Awsome ye, I like that, just getting it all tied up now to see if I can get it working.

    I will have a go and come back if needed, thanks Dave.

    Lee

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by multichild View Post
    Then through a set of dynamically generated checkboxes in relation to the country, the user refines their search by using the checkboxes, and each time they check it, it refreshes and the results change
    This is the bit you want to be doing with AJAX.
    You can define (for example) a <div> element with an id of "results" and dynamically load the results of your AJAX call into there.

    Quote Originally Posted by multichild View Post
    I get the sleep.php bit, so that basically will allow the script I just posted above to work to put the array into the select from the database instruction.
    Kind of. The sleep was just there, so that you could see the overlay blocking the UI.

    Quote Originally Posted by multichild View Post
    Then on success of that the (success : function(res) {) deals with it and then the blackout screen goes away.
    Also kind of. You do have to remove the overlay (it doesn't just happen automatically), but all of that will happen within the success callback.

    I wrote a short blog post on AJAX and jQuery. Maybe it'll help you.

    Quote Originally Posted by multichild View Post
    Awsome ye, I like that, just getting it all tied up now to see if I can get it working.
    Good luck! You sould have all the pieces you need now. It's just a matter of putting them together.

  15. #15
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just thinking out loud here:

    Can I add a php variable onto your code below, so it looks liek this.

    var v = ($(this).val());

    var v = (<?php $regionData?>);

    Or am I barking up the wrong tree, as rather than just sending up one value such as the value of the checkbox I need to build the query up.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Sorry for the short reply, but I am now away from the PC.

    Anyway, it is certainly possible to write the value of a JS variable using PHP.
    Just make sure it is the correct type (i.e. what your script is expecting) and all will be good.


Bookmarks

Posting Permissions

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