How can I make an AJAX application similar to nodebb?

Question

I am very new to ajax and am really struggling. My end goal is to make a forum software like nodebb. I've already made a php forum but decided not to use it because it just seemed old unlike faster looking forums like nodebb. What I'm trying to understand is how to make multiple tabs that display different information each but keep the same data for the header. I understand this is probably a very simple thing to do, but currently I am unable to accomplish this. https://dogecraft.net is a great example of what I'm trying to accomplish.

If you click on the different tabs, it loads information in each one. I tried this but I had trouble with the url. When I reloaded, it simply just loaded my new file and that's not what I want.

(Yes, I am using a local jquery file. Jquery isn't the issue.)

I've tried w3schools but didn't find really helpful information

I've also tried many other websites.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $( "#one" ).click(function(){
    $("#div1").load("/one/").hide().fadeIn();
    window.history.pushState("object or string", "Title", "/one/");
  });
});
$(document).ready(function(){
  $( "#two" ).click(function(){
    $("#div1").load("two.html").hide().fadeIn();

  });
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>


</body>
</html>

I would like to have a homepage 'index.html/php' I need a button to load one page of content (one.html/php) and then another button that loads another page of content (two.html/php).

On refresh, I would like it to keep the same content that was on the homepage including the buttons in the header.

Answer 1

You could make an Ajax call to your html/php to retrieve the html code and then inject the content on your div. Here is an example:

$(document).ready(function() {
    $("#one").click(function() {
        $.ajax({
            url : 'http://myserver.com/myhtmlpage.html',
            success : function(html) {
                $("#div1").html(html);
            }
        });
    });
    $("#two").click(function() {
        $.ajax({
            url : 'http://myserver.com/myphppage.php',
            success : function(html) {
                $("#div1").html(html);
            }
        });
    });
});

When you click a button, an ajax call is made, and if succesful, the success function will be called. The first parameter has the html code of the webpage you requested. Then you can use the html function of jQuery you can inject it on your div.

A couple of tips:

You might want to use only one onready function, no need to declare it several times
You might consider returning a json object with the data instead of a php page. This will be useful later on if you consider using a framework such as Angular or Vue. If you can generate a JSON file on your php such as this:
{ "name": "John" }

Then you could do something like this:

    $("#two").click(function() {
        $.getJSON({
            url : 'http://http://myserver.com/myphppagethatservesjson.php',
            success : function(json) {
                $("#div1").html("<h1>My name is " + json.name + "</h1>");
            }
        });
    });

Then it will render "My name is John".

This could be improved a lot,but I hope it could help you a bit.

How can I make an AJAX application similar to nodebb?

Question

1 answers

solution1
0 2019-06-11 16:36:18

How can I make an AJAX application similar to nodebb?

Question

1 answers

solution1 0 2019-06-11 16:36:18

solution1
0 2019-06-11 16:36:18