Home using ajax on php spawned buttons
Reply: 0

using ajax on php spawned buttons

user6316
1#
user6316 Published in July 16, 2018, 8:33 pm

Right, I have no idea what to search for in this context, I've tried my hardest to splice together other peoples working code but I just can't get it to work.

I've got an ajax function that sends a request to a php page to load data from a database and then spit it back out on the initial page via $(var).html. The code functions as intended and spawns correct html on the page with all the needed attributes and data, however when I try to use another ajax function to interact with buttons spawned in from the js using their id tag but it wont work at all. Do I need to reload the js file every time data gets spawned in? I'm at quite a mess right now so any help would be appreciated. I'll post all the relevant code in for people to browse. Apologies if it's all a bit messy, it's a work in progress.

This is my Index.php file, it's very basic as it only needs to hold the login form and the rest of the site functions handle the rest.

<!DOCTYPE html>
<?php 
session_start();
?>
<html lang="en">
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="main/login.js"></script>
  <script src="main/dashHandler.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Particles Login</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="particles-js">
    <div id="login">
      <form action="./" method="post">
        <div>
          <label for="username">Username</label>
          <br>
          <input type="text" placeholder="Username" name="name" id="name">
        </div>

        <div>
          <label for="password">Password</label>
          <br>
          <input type="text" placeholder="Password" name="word" id="word">
        </div>
        <input type="submit" value="Login" id="loginbtn">
        <div class-"err" id="add_err"></div>
      </form>
    </div>
    <div class="dash" id="dashboard">
        <div class="dash" id="dashboardContent">

        </div>
        <div id="output">


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


  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

  <script>
    particlesJS.load('particles-js', 'particles.json', function(){
      console.log('particles.json loaded...');
    });
  </script>

</body>
</html>

This is the PHP that spawns the data I'm after, I want to be able to interact with certain buttons that the PHP spawns in.

<?php

    $path = $_SERVER['DOCUMENT_ROOT'];
    $path .= "/main/config.php";
    include($path);

$user = $_POST['uname'];

$sql = "SELECT siteID, sitePath, siteOwner, siteName, siteCreation FROM sites WHERE siteOwner LIKE '{$user}'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {while($row = $result->fetch_assoc()){
$id = $row["siteID"];
$path = $row["sitePath"];
$owner = $row["siteOwner"];
$name = $row["siteName"];
$creation = $row["siteCreation"];

echo    
    '<ul>
        <li>'.$id.'</li>
        <li class="lidata">'.$name.'</li>
        <li>'.$creation.'</li>
        <li class="libtn">goto</li>
        <li class="libtn">clone</li>
        <li class="libtn" id="del" value="' . $path . '">Delete ' . $path . '</li>
    </ul>';

}}else{echo "something died";}
$conn->close();

?>

This is my Javascript file, it handles the login function as well as interacting with the spawned in button.

// JavaScript Document
var username, password, bigman;

$(document).ready(function(){
    $("#add_err").css('display', 'none', 'important');
    $("#dashboard").css('display', 'none', 'important');
     $("#loginbtn").click(function(){   
          username=$("#name").val();
          password=$("#word").val();
          $.ajax({
           type: "POST",
           url: "main/loginHandle.php",
            data: "uname="+username+"&pword="+password,
           success: function(html){  
           //this html passthrough variable is awesome, using fnc(var) gives you whatever shit the called php echos back, insanely useful for seamless passthrough :D migecki mageck  
            if(html=='true')    {

                $.ajax({type:"POST",url:"main/dashLoad.php",data:"uname="+username,success:function(dashPass){

                    //$("#add_err").html("right username or password");
                    $("#add_err").css('display', 'none', 'important');
                    $("#dashboard").css('display', 'inline', 'important');
                    $("#dashboard").html(dashPass);

                },
                       beforeSend:function()
                        {
                            $("#dashboard").css('display', 'inline', 'important');
                            //$("#dashboard").html("<img src='main/Assets/load.gif' /> Loading...");
                        }

                       });

            }
            else    {
            $("#add_err").css('display', 'inline', 'important');
             $("#add_err").html("<img src='main/Assets/alert.png' />Wrong username or password");
            }
           },
           beforeSend:function()
           {
            $("#add_err").css('display', 'inline', 'important');
            $("#add_err").html("<img src='main/Assets/load.gif' /> Loading...");
           }
          });
        return false;
    });


    $("#del").click(function(){

        bigman=$("#del").val();

        $("#add_err").css('display', 'inline', 'important');
        $("#add_err").html("<img src='main/Assets/alert.png' />Wrong username or password");

        console.log(bigman);

    });



});

If any more information is needed feel free to ask, I might have explained this terribly but hopefully my code will help it make sense.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.317378 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO