Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Firing message box on submit & closing on left click?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #171841
    MBM
    Participant

    I want to display a confirmation message when a user saves, edits or delete a record. Currently this is done as follows :

    if($sql = mysql_db_query ($DBName, $Query, $Link)) {
    $message = "Your changes have been saved";
    $current = $_GET['page'];
    header("Location: edit.php?");
    }
    

    In the HTML :

    <div class="messagebox">
    <?php echo $message;?></div>
        
    <div class="submit"><input name="Submit" type="submit" class="savebtn" value="Save"/></div>

    The css :

    .messagebox {
    position:fixed;
    background-color:#000000;
    color:#ffffff;
    left:40%;
    top:40%;
    z-index:1;
    border:3px solid #ffffff;
    font-family:'Voltaire', sans-serif;
    font-size:24px;
    height:60px;
    width:300px;
    text-align:center;
    border-radius:15px;
    padding-top:20px;
    }
    

    The problem with this method is the message box always displays, irrespective of whether a change is being made but the message itself displays on save.

    I need a way for the messagebox to only fire on save and a way to close it, ideally on left click, I don’t want to use an x or square in the top corner. I don’t understand javascript so would be grateful if someone could point me in the direction of a tutorial. I tried to use jquery dialog but had the same problem, the dialog always displayed. The $message variable MUST be used as I use it for all confirmation messages across my website.

    http://codepen.io/Nullbreaker/pen/KrCbc

    #171844
    shaneisme
    Participant

    Is the HTML of the message inside your PHP if block? You would need to do that OR use client-side to add a class like .active when it should show and display:none; by default.

    #171846
    MBM
    Participant

    No. The HTML is outside of the php block. It’s inside the HTML, inside a form.

    #171847
    Mawaha
    Participant

    I think you need to revise your PHP. At the minute you’re setting your $message variable if your query was successful but then redirecting the user to edit.php. You need to pass some information about the outcome of your query to the edit.php page if you want this to work. For example:

    // myquery.php script
    <?php
    if($sql = mysql_db_query ($DBName, $Query, $Link)) {
      header("Location: edit.php?success=1");  // Redirect the user on success
    }
    // edit.php
    <?php 
    if($_GET['success'] === 1){
      $message = "Your changes have been saved";
    }
    ?>
    
    <?php if($_GET['success' === 1); ?>
      <div>
        <?php echo $message; ?>
      </div>
    <?php endif; ?>
    

    This way the message box will only display when the user is redirected here from your successful query.

    #171848
    MBM
    Participant

    Thanks. Sorry I posted the wrong php. This is how the redirect is setup so I need to know how to make the additions you listed while keeping the urlencode funtion :

    header("Location: comicsedit.php?page=".$current."&amp;message=".urlencode($message));
    
    #171853
    Mawaha
    Participant

    Ah right. In which case you could alter the above to something like this:

    // edit.php
    <?php if(isset($_GET['message']) && !empty($message)): ?>
    
    <div>
      <?php echo $message ?>
    </div>
    
    <?php endif; ?>
    
    #171855
    MBM
    Participant

    Awesome! That worked! Now how do I close it?

    #171869
    Mawaha
    Participant

    Cool. Well if you want to close it JavaScript will definitely come in handy.

    You could toggle the css display value directly.

    You could toggle a class which in turn affects the elements display value.

    Or you could remove the messageBox from the DOM completely.

    The message is non essential and you’re never going to need it back again once it’s been read so personally I’d just remove it.

    If you’re using jQuery this could be as simple as

    $('.messagebox').on('click', function(){
      this.remove();
    });
    

    or slightly more verbose with vanilla JavaScript

    var elem = document.getElementById('messagebox');
    
    elem.addEventListener('click', function(){
        this.parentNode.removeChild(this);
    });
    

    Note: That’s not the full cross browser compatible way to add an event listener in JavaScript but that’s not really the point of the example :)

    #171882
    MBM
    Participant

    I’m using jquery-2.1.1.js. This doesn’t work :

    <script>
    $('.messagebox').on('click', function()
    {this.remove();
    });
    </script>

    Got it with this :

    <script>
    $('.messagebox').click(function(e) { //button click class name is myDiv
      e.stopPropagation();
     })
    
     $(function(){
      $(document).click(function(){  
      $('.messagebox').hide(); //hide the button
    
      });
    });
    </script>
    #171884
    Alen
    Participant

    In the first example try replacing this with $(this);

    
    $box = $('.messagebox');
    $box.on('click', function(){
      $(this).remove();
    });
    

    http://codepen.io/anon/pen/qzlLh

    #171888
    MBM
    Participant

    That didn’t work. Is this method preferable to the one I am using?

    #171896
    Mawaha
    Participant

    If you’ve got it to work that’s great.


    @Alen
    ’s method should work for you and is simply more concise, there’s really no need to add two event handlers. Also, I believe stopping event propagation in this case is bad practice.

    You’re using the latest version of jQuery so the.on() method should work and so should .remove()

    .hide() is a good alternative though, plus if you pass it a time value it’ll animate out .hide(500), although it does a funky shrinking thing too that I don’t really like.

    Here’s a working example with the remove method.

    http://codepen.io/mawaha/pen/icoHy

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.