JQuery: Cannot Access php file using Relative Path

Question

Really struggling to get a relative path to work for an Ajax request.

From like.js I'm trying to get to likeunlike.php

Error message:

jquery-3.3.1.js:9600 POST http://localhost:8000/serverside/likeunlike.php 404 (Not Found)

File structure:

JQuery:

$(document).ready(function(){

    // like and unlike click
    $(".content").on("click",".like",function(){
        var id = $(this).attr("id");  // Getting Button id
        var split_id = id.split("_");

        var postid = split_id[1]; 
        var userid = split_id[2];

        // AJAX Request
        $.ajax({
            url: '../serverside/likeunlike.php',
            type: 'post',
            data: {postid:postid,userid:userid},
            dataType: 'json',
            success: function(data){
                var likes = data['likes'];
                var type = data['type'];

                $("#likes_" + postid + "_" + userid).text(likes);

                if(type == 1){
                   $("#like_" + postid + "_" + userid).css("color","lightseagreen");

                }

                if(type == 0){
                    $("#like_" + postid + "_" + userid).css("color","#ffa449"); 
                }
            }
        });

    });

});

Have provided the index file as requested by one of the answers. Hope it helps. Index.php:

<?php

include "detail/config.php";

?>

<html>
    <head>
        <title>Talk</title>
        <link href="style/style.css" type="text/css" rel="stylesheet" />
        <script src="jquery/jquery-3.3.1.js" type="text/javascript"></script>
        <script src="search/script/like.js" type="text/javascript"></script>
        <script src="search/check/check.js" type="text/javascript"></script>
    </head>

<script>

$(function() {
  $('form').on("submit", function(e) {
    e.preventDefault();
    $('#error').text(""); // reset
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }

    $.ajax({
      url: 'search/search.php',
      method: 'POST',
      data: {
        msg: name
      },
      dataType: 'json',
      success: function(response) {

      $(".content").html("")
      $(".total").html("")

        if(response){
          var total = response.length;
          $('.total') .append(total + " Results");
         }

        $.each(response, function() {
          $.each($(this), function(i, item) {

            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
  });
});


</script>

<body>

<form action="index.php" method="post" id="myForm" autocomplete="on"><pre>

<input name="msg" id="search" type="text" autofocus value= "<?php if(isset($_POST['msg'])) { 
 echo htmlentities ($_POST['msg']); }?>"></input> <span id="error"></span>

<input type="submit" style="border:0; padding:0; font-size:0">

</pre></form>

<div class="total">
</div>

<div class="content">
</div>

</body>
</html>

url: '../serverside/likeunlike.php' <--- this is relative to yout current URL not relative to your js file. — db1975
– db1975, Commented Feb 1, 2020 at 21:15
@vivekmodi hi sorry. This is the first time I've tried to seperate my code into different folders. index.php is the home page. I don't quite understand the question. My knowledge isn't great. — CGarden
– CGarden, Commented Feb 1, 2020 at 21:19
@db1975 sorry I'm not sure what you mean. Can you elaborate. I'm struggling with this. — CGarden
– CGarden, Commented Feb 1, 2020 at 21:20
I think you don't need to use ../ just use serverside/likeunlike.php in url — vivek modi
– vivek modi, Commented Feb 1, 2020 at 21:26

db1975 · Accepted Answer · 2020-02-01 21:27:05Z

1

jquery / js has no information about his location.

this should be work.

var base_url = window.location.origin;

// like and unlike click
    $(".content").on("click",".like",function(){
        var id = $(this).attr("id");  // Getting Button id
        var split_id = id.split("_");

        var postid = split_id[1]; 
        var userid = split_id[2];

        // AJAX Request
        $.ajax({
            url: base_url + '/search/serverside/likeunlike.php',
            type: 'post',
            data: {postid:postid,userid:userid},
            dataType: 'json',
            success: function(data){
                var likes = data['likes'];
                var type = data['type'];

                $("#likes_" + postid + "_" + userid).text(likes);

                if(type == 1){
                   $("#like_" + postid + "_" + userid).css("color","lightseagreen");

                }

                if(type == 0){
                    $("#like_" + postid + "_" + userid).css("color","#ffa449"); 
                }
            }
        });

    });

});

answered Feb 1, 2020 at 21:27

db1975

7853 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

CGarden Over a year ago

Thank you. This gives the error jquery-3.3.1.js:9600 POST localhost:8000/search/serverside/likeunlike.php 404 (Not Found)

db1975 Over a year ago

I think, your php files are only reachable over index.php. can you show your index.php? is there anywhere reference to likeunlike.php?

CGarden Over a year ago

Ok thank you. Have added the index.php file code to the question.

db1975 Over a year ago

it is difficult to solve this without having complete code. is there a .htaccess file besides index.php or likeunlike.php? In the index.php file there is also an ajax call. Does this call work?

CGarden Over a year ago

Yes the Ajax call works and there is not a .htacces file. I don’t know what that is.

|

CGarden · Accepted Answer · 2020-02-02 20:43:03Z

0

I have resolved the situation by:

Making my directory structure simpler as well as the file names. It was over-engineered. I have my root folder now and then just one level below that for folders.
The Ajax url path, which I was struggling with was amended to 'serverside/like.php', which picked up the php file but nothing happened.
Reviewing the like.php code I had an include("../con/config.php") without a ';'. I added this and it's now working fine.

Thank you for everyone's help. Much appreciated as always.

New folder structure:

answered Feb 2, 2020 at 20:43

CGarden

3494 silver badges22 bronze badges

Collectives™ on Stack Overflow

JQuery: Cannot Access php file using Relative Path

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related