Appending external PHP file in jQuery

Question

I'm referring a question answered here.

Trying to append an external PHP file in to jQuery and tried load.

$(".chatbox").load("./one.php");

This gives me the output;

Your success message!

However the concern is this removes all HTML in the body and does not really 'append' the success message.

I tried the following instead.

$(".chatbox").append("./one.php");

which merely prints this!

./one.php

Am I missing something here?

load() replaces the entire content of the selected element. It sounds like you simply need to change your .chatbox selector to a lower level element. If you want to append the content instead, then you would need to use $.ajax() to retrieve the value and append() it manually. — Rory McCrossan
– Rory McCrossan, Commented Oct 9, 2018 at 12:51
you would need $.get() and use $.append() in the success callback. But read the documentation of jquery for all these functions (load, get, append) closely. They're quite clear and will most probably solve your question, or at least help you in asking a more specific question. — giorgio
– giorgio, Commented Oct 9, 2018 at 12:52

Mohammad · Accepted Answer · 2018-10-09 12:52:59Z

2

The .load() load data from the server and place the returned HTML into the matched element. But you need to use $.ajax() or $.get() that get data and return it into callback function.

$.get("./one.php", function(data) {
   $(".chatbox").append(data);
});

answered Oct 9, 2018 at 12:52

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

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

Comments

Hamzeen Hameem · Accepted Answer · 2019-01-24 09:29:29Z

in case if the page you're trying to load is failing due to some reason, you also need to handle the error block to inform you about the issue. Here is a more comprehensive way to do it. Here I have called a wiki page but you will know, all the php pages are in fact interpreted as valid html by PHP engine :)

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
  }
});


$.ajax({
  type: "GET",
  url: "https://en.wikipedia.org/wiki/PHP",
  data: { },
  success: function(data){
    $('#demo').html(data);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    $('#demo').html("Status: " + textStatus + "<br/>Error: " + errorThrown);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="demo"></div>

Collectives™ on Stack Overflow

Appending external PHP file in jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related