I need the url in the ajax script to be a variable from a php file but I don't know how to do t-CodePudding

The top section has the variables and forms. The program calls an html page depending on who logs in. I need to be able to pull the page based on login information.

I pull the page number from the url when the page is called. I need to use that page number in the ajax part of the program at the bottom to pull the data off the right page and put it in the chatbox.

Right now I can't pull the right page. I am having a problem setting a variable in the ajax url:

I tried using "" but it will load the chatbox inside the chatbox as an image.

    <?php
    if(isset($_POST['enter'])){
    if($_POST['name'] != ""){
    $_SESSION['name'] = 
    stripslashes(htmlspecialchars($_POST['name']));
    }
    else{
    echo '<span >Please type in a name</span>';
    }
    }
    ?>
    <!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>Chat - Customer Module</title>
    <link type="text/css" rel="stylesheet" href="style1.css" />
    </head>
    <body>

    <?php
    if(!isset($_SESSION['name'])){
    loginForm();
    }
    else{
    ?>
    <div id="wrapper">
    <div id="menu">
    <p >Welcome, <b><?php echo $_SESSION['name']; ?> 
    </b></p>
    <p ><a id="exit" href="#">Exit Chat</a></p>
    <div style="clear:both"></div>
    </div>  
    <div id="chatbox"><?php
    if(file_exists($log) && filesize($log) > 0){
        $handle = fopen($log, "r");
        $contents = fread($handle, filesize($log));
        fclose($handle);
        echo $contents;
    }
     else{
        if(!isset($log));
        $contents = 'Welcome!';     
        file_put_contents($log, $contents);
        echo $contents;
    }
    ?>
    </div>
    
    <form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" size="63" />
    <input name="submitmsg" type="submit"  id="submitmsg" 
    value="Send" />
    </form>
    <br /> 
    <form action="upload.php" method="post" enctype="multipart/form- 
     data">
    Select image to upload:
    <input type="file" name="fileToUpload" />
    <input type="submit" value="Upload Image" name="submit" />
    </form>
    </div>
    <script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 
    </script>
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
        //If user submits the form
    $("#submitmsg").click(function(){   
    var clientmsg = $("#usermsg").val();
    $.post("post.php", {text: clientmsg});              
    $("#usermsg").attr("value", "");
    return false;
    });
 
    //Load the file containing the chat log
    function loadLog(){     
       var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
        
    $.ajax({
    url: "chat/9999.html", 
              
    cache: false,
    success: function(html){        
    $("#chatbox").html(html); //Insert chat log into the #chatbox div               
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); 
        //Autoscroll to bottom of div
                }               
            },
        });
    }
    setInterval (loadLog, 2500);    //Reload file every 2.5 seconds
    
     //If user wants to end session
    $("#exit").click(function(){
        var exit = confirm("Are you sure you want to end the 
            session?");
    if(exit==true){window.location = 'index.php?logout=true';}      
    });
    });
    </script>

I have updated to give you more code. I tried using the "" but the form isn't acting right. It keeps loading the form inside the form again.

I need the "chat/9999.html" to be a variable so it can bring up one of a few pages.

CodePudding user response：

Without the PHP part of your code it's hard to know how it looks but based on my experience something like this will work if you mix php and html/javascript/jquery/ajax code:

<?php
//this is where you list your urls (array, user input, db, etc.)
$url = 'chat/9999.html';
?>

$.ajax({
    url: "<?=$url?>", 
           
    cache: false,
    success: function(html){        
    $("#chatbox").html(html); //Insert chat log into the #chatbox div               
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if(newscrollHeight > oldscrollHeight){
    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); 
   //Autoscroll to bottom of div
            }               
        },
});

CodePudding user response：

If your ajax code is in a JS file, could use a hidden input to make the URL available, but not visible on the page, then query the value of the input from JS.

// index.php
<?php
// Get URL
$url = 'chat/9999.html';
?>

<input id="url-from-php" type="hidden" value="<?= $url ?>">

// script.js
$.ajax({
  url: document.getElementById('url-from-php').value,

  cache: false,
  success: function (html) {
    $("#chatbox").html(html); //Insert chat log into the #chatbox div
    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    if (newscrollHeight > oldscrollHeight) {
      $("#chatbox").animate({ scrollTop: newscrollHeight }, "normal"); //Autoscroll to bottom  of div
    }
  },
});

CodePudding user response：

You can save your JavaScript file as a .php extension or change your server config to interpret the given file with PHP.

Once you have PHP enabled to handle the file, you can use everything from PHP as usually.

To make sure the script is loaded by the browser with the correct MIME type, you can set it with PHP.

<?php

header('Content-Type: application/javascript');

$url = "chat/9999.html";

?>

$.ajax({
    url: "<?= $url ?>",
    // …
})