1. Tired of not being able to see links? Want to chat with other members? Need help?

Javascript And PHP Ajax

Discussion in 'Help & Support' started by Berk, Jun 24, 2017.

  1. Berk

    Berk print_r($_SESSION['RastaLulz']); Developer

    hello

    so what i'm trying here is, when i click <a href="" id="admin">e<?php echo $array['username']; ?></a> I want it to pop a modal (custom css, not bootstrap) with including some information about the $array['username'];
    I tried AJAX but it didn't send any response. Either success or error.
    My code:
    Code:
    <script>
    $("#admin").click(function() {
        function toggleProfile(id) {
            $.ajax ({
                url: "getProfile.php",
                method: "POST",
                data:id,
                success: function(data) {
                    $("#profile").html(data);
                    },
                error: function (jqXHR, exception) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            console.log(msg);
                }
                });
            }   
        });
        </script>
    
    PHP:
    <?php
    $id 
    $_POST['id'];
    $q $db->assoc($db->query("SELECT * FROM users WHERE id = '{$id}'"));
    ?>
     <div id="openModal" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="close">X</a>
            <div style="padding-top:20px;">
            <h4>Profile</h4><hr><img src="http://domain.com/pictures/<?php echo $r['username']; ?>.png" style="border-radius: 5000px; float:right; width:300px; height:300px;"/></div>
            <h2><?php echo $q['username']; ?> </h2> <div style="padding:10px;"><?php if($q['is_away'] == 1) { ?><div style="border:5px solid rgb(115,56,128);border-radius:3px; height:25px;width:125px; background: rgb(0,0,0); font-weight:bold;color:white;padding:10px;"><center>This user is away</center></div></div><?php ?>
            <p><B>Region</b>: <?php echo $q['region']; ?></p>
           <p><b>Rank</b>: <?php echo $q['rank']; ?></p>
    <?php
        
    if($user->hasGroup('4') || $user->hasGroup('5')){
            
    ?>
            Admin actions<br>
                <form method="post" action="" >
                <input type="submit" class="mws-button red" value="Log out this user." name="logout">
                </form><br>
                <form method="post" action="" >
                <input type="submit" class="mws-button red" value="Alert this user." name="alert">
                </form><br>
                <form method="post" action="" >
                <input type="submit" class="mws-button red" value="Suspend this user." name="suspend">
                </form>
                <?php
              
      
            
    if($_POST['logout']) {
                
    $user->logoutUser($uid['id']);
            }
          
        }
            
    ?>
      

    </div>
    </div>
    </div>
    </div>

    It doesn't return anything. Maybe i'm missing something?

    Any help appreciated.

    Thanks
     
    Last edited: Jun 24, 2017
  2. Zombzon

    Zombzon New Member

    Hello,

    Personally I don't use $.ajax, but I use the XMLHttpRequest() object.
    An example (in the file)​
     

    Attached Files:

    • code.txt
      File size:
      302 bytes
      Views:
      4
  3. LukeOx

    LukeOx PeakRP.com

    All you've done in the js is declared a function. You need to remove the function or actually call it inside the handler.
     
  4. Markshall

    Markshall Русский Стандарт Contributor

    You're defining a function called toggleProfile but not actually invoking it. And even then, where is the id parameter coming from?

    Also, in your JavaScript, all you appear to be sending is an ID number, no parameter names.

    It should be something like this (also change your method to GET rather than POST. You're not posting anything, you're trying to get information. This will also need updating in your PHP):
    This code refers to a variable called id, but you'll need to figure out how to grab it from your link.
    Code:
    <script>
        $("#admin").click(function() {
            $.ajax({
                url: "getProfile.php",
                method: "GET",
                data: 'id=' + id,
                success: function(data) {
                    $("#profile").html(data);
                },
                error: function() {
                    console.log('Error occurred');
                }
            });
        });
    </script>
    After that, you're filling the #profile element, but where is it opening? There's no code in there which looks like it is opening the modal dialog.
     
    Berk likes this.
  5. Berk

    Berk print_r($_SESSION['RastaLulz']); Developer

    ID meant to be onclick="toggleProfile(<?php $array['id']; ?>)". I messed it up.

    Modal only uses CSS. Here is it's CSS:
    Code:
    <style>.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    
    .modalDialog > div {
        width: 700px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: white;
        height:500px;
    }.close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    
    .close:hover { background: #00d9ff; }</style>
    
    And to open, i do <a href="#openModal" >Modal</a> and for modal <div id="openModal">
    So if you have any better code, please share with me.
     
  6. LukeOx

    LukeOx PeakRP.com

    You're combining JavaScript events and jQuery, you need to use one or the other.

    $("#admin").click(function() {}); is called when a div with ID 'admin' is clicked. There's no need to define a function within your handler (as in Mark's snippet). Just remove the onclick="" from your html.

    A way to pass the ID to JavaScript would be to add a data attribute to your html. For example:

    Code:
    <a id="#admin" data-id="<?php $array['id']; ?>">Username</a>
    And updating Mark's code to get the id from the element:

    Code:
    <script>
        $("#admin").click(function() {
            var id = $(this).data('id');
    
            $.ajax({
                url: "getProfile.php",
                method: "GET",
                data: 'id=' + id,
                success: function(data) {
                    $("#profile").html(data);
                },
                error: function() {
                    console.log('Error occurred');
                }
            });
        });
    </script>
    
    Again, you would also need to add the code which opens the modal on success as well.
     
    Berk likes this.
  7. Berk

    Berk print_r($_SESSION['RastaLulz']); Developer

    Thanks. How can I open it? As I stated, it uses CSS, nothing else.
    And, how do I write everything in getProfile.php? I mean, the data. I have queries and things and want to write modal to main page. Should I use json_encode or something?
    Thanks
     
  8. LukeOx

    LukeOx PeakRP.com

    If it were me, I'd format the data as JSON on the server and parse it using JS when it's received (look up JSON.parse). Then populate the elements on the page with the relevant data. To show the modal (if it's not bootstrap/anything and just CSS) you can just do something like $('#myModal').show() or $('#myModal').fadeIn();
     
  9. Berk

    Berk print_r($_SESSION['RastaLulz']); Developer

    Okay, I'm confused now. So can you show me an example of getProfile.php? I can't quite understand :/
     
  10. Sentinel

    Sentinel PinkJS Lead Engineer

    Also the Ajax example has been deprecated.
    Code:
    <script type="text/javascript">
    $('#admin').on('click', function () {
       var id = $(this).data('id');
    
       $.ajax({
          url: 'getProfile.php',
          method: 'GET',
          data: { id: id }
       }).done(function (data) {
          $('#profile').html(data);
       }).fail(function (err) {
          console.log('An error occurred: ' + err);
       });
    });
    </script>
    
     
    Berk likes this.
  11. LukeOx

    LukeOx PeakRP.com

    If you don't understand it, stick with what you have for now until you have time to learn about JSON, it should work fine. If you're going to use this for production, make sure you use prepared statements or at least filter the input properly.

    Code:
    $q = $db->assoc($db->query("SELECT * FROM users WHERE id = '{$id}'"));
    
    This is subject to SQL injection.
     
  12. Berk

    Berk print_r($_SESSION['RastaLulz']); Developer

    Okay, trying javascript itself now. I tried to json_encode modal and it says '<' is unexcepted.
    Any ideas?
     
  13. Northyy

    Northyy Boredom, it vexes me.

    You have a "<" where it doesn't belong.
     
    Sentinel likes this.
  14. Berk

    Berk print_r($_SESSION['RastaLulz']); Developer

    Well I actually fixed this but, it was saying the first < (where modal starts).
    Anyway, thanks
     

Share This Page

Loading...