Open simple PHP file with Javascript/jQuery

Question

I have a PHP file on my server that stores one string <div id="username">my.username</div>. The URL is http://intranet/text.php.

I would like to use some jQuery/Javascript to read this file and grab this element value.

I had tried to put something together but not sure how to open the file with JS.

'use strict';

var template = '<div id="username">replace-me</div>';

var output = document.createElement('div');

output.innerHTML = template;
output.querySelector('#username').innerHTML = 'get replaced';

console.log(output.innerHTML);

@RomanHocke Thank you for this. Do you have an example of something similar to this or should I just Google? :) — michaelmcgurk
– michaelmcgurk, Commented Sep 13, 2016 at 8:29

Ismael Miguel · Accepted Answer · 2016-09-13 09:09:59Z

2

You can use the jQuery .load() method:

$('#username').load('http://intranet/text.php #username');

This should load the content of that remove <div> into your old <div>.

How it works:

The bit $('#username') will select the element with id username inside your page.
The load method, when you pass a string, will try to load HTML from a remote location, splitting the string by the space. (Internally, it will use a $.get on the URL)
The #username bit, after the URL, will apply to the fetched HTML. (The space is important)

This code uses the jQuery library! I've answered in jQuery since it is one of the tags.

edited Sep 13, 2016 at 9:09

answered Sep 13, 2016 at 8:59

Ismael Miguel

4,2691 gold badge35 silver badges44 bronze badges

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

7 Comments

michaelmcgurk Over a year ago

If I want to echo the value out on that page, how do I do this?

Ismael Miguel Over a year ago

@michaelmcgurk That depends on what you mean with "echo the value out".

michaelmcgurk Over a year ago

Apologies. I mean display the value of username on the same page. Just to make sure it actually works.

michaelmcgurk Over a year ago

I tried alert(#username); but got an Uncaught SyntaxError: Invalid or unexpected token error.

Ismael Miguel Over a year ago

That alert doesn't work. The character # is an invalid character there. And you can do it in many ways. The one I've written is made to fit your needs that you expressed on the question. I think I know what your problem is. I don't know how your file structure is, but you can do it with PHP only (using an include). But, my jQuery needs a fix. Should look like this: $.get('http://intranet/text.php', function(data){ $(data).appendTo(document.body); });. Can you try it?

|

KOUSIK MANDAL · Accepted Answer · 2016-09-13 08:43:06Z

1

Try ajax as follow:

$.ajax({

    url:"your-phpfile.php",

    success:function(data)
    {
           //data 'll hold the output of the php file
    }
})

Remember before doing this include jquery library.

answered Sep 13, 2016 at 8:43

KOUSIK MANDAL

2,0421 gold badge24 silver badges51 bronze badges

2 Comments

michaelmcgurk Over a year ago

Do you know if this will work on a local file on the Intranet?

KOUSIK MANDAL Over a year ago

It 'll work on a local file on intranet, I am sure. But you need to enable CORS in PHP side.

Romain De Sa Jardim · Accepted Answer · 2016-09-13 08:55:26Z

1

You can use AJAX to retrieve PHP file like this.

var template = null;
var req = new XMLHttpRequest();
req.open('GET', 'http://intranet/text.php', true);
req.onreadystatechange = function (data) {
  if (req.readyState == 4) {
    if(req.status == 200){
      template = data.responseText;
      var output = document.createElement('div');

      output.innerHTML = template;
      output.querySelector('#username').innerHTML = 'get replaced';

      console.log(output.innerHTML);
    }
    else{
      dump("An error occured");
    }
  }
};
req.send(null);

This code is in pure JS, cause i saw that you were not working with JQuery

edited Sep 13, 2016 at 8:55

answered Sep 13, 2016 at 8:50

Romain De Sa Jardim

965 bronze badges

5 Comments

michaelmcgurk Over a year ago

I will try right now - will post back shortly - thank you :)

michaelmcgurk Over a year ago

I get the error test.html:15 Uncaught SyntaxError: Unexpected token else

Romain De Sa Jardim Over a year ago

Of course, my bad, edit done, missed {} on my if

michaelmcgurk Over a year ago

Thank you. Unfortunately on this line output.querySelector('#username').innerHTML = 'get replaced'; I still get the error: Cannot set property 'innerHTML' of null - is it not reading the file properly?

Romain De Sa Jardim Over a year ago

The problem is that you're querySelector is null

Collectives™ on Stack Overflow

Open simple PHP file with Javascript/jQuery

3 Answers 3

7 Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related