Load pages without refresh by clicking on the menu option

Asked

Viewed 1,031 times

1

Good evening guys! I’m making a school system, in it will have access levels, menu for each access. I want to do the following, when I click on some option of the side menu, where it is written "BLANK" in the middle part, I want the corresponding page to appear, without changing page. Anyway, I did some previous applications with ajax, but it didn’t get so good, I heard about Angular and stuff, could you give me a direction? If you can only do it with ajax, or is that what the angle is for? Because I did not understand very well what he does, and if there is framework for it, from now, thank you! inserir a descrição da imagem aqui

php javascript html css angularjs

  • Well, angular I don’t know. But if you want with ajax, I’ll give you an answer

  • 1

    What you’re talking about is making a Single Page Applicaiton. Angular is a great framework for this. We have 2 Angular: o Angularjs, which was the first version, and the Angular, which is totally different from its predecessor but much more complicated (In my view) Apparently you don’t understand much about it, so advice go by Angularjs which is simpler. Start some project using Angular and Angularjs Routing and post doubts =)

  • I suggest you watch this video

  • Thank you guys!!! I will watch the video and try to make the Single Page

1 answer

0

I think you don’t need so much, friend. Via javascript you get what you need quickly and without the need for plugins. The solution involves encapsulating each page in a DIV and controlling the "display" property by switching between visible and invisible according to the action of the user on the menu. Everything will be on a single page that will be shown where it is written "Blank", but only the content of a DIV will appear at a time.

function toggle(nome_da_div, estado) {
        var display = document.getElementById(nome_da_div).style.display;
        document.getElementById(nome_da_div).style.display = estado;
    }

By clicking on a menu item you can call the above function to change the visibility of the DIV:

toggle('div-nome-tal', 'block'); // visível
toggle('div-nome-tal', 'none'); // invisível

This is the simplest way to do it. However, if you want to use a plugin, I suggest you search for Bootstrap which has a number of features ready for it:

https://getbootstrap.com/docs/4.0/components/collapse/

  • Thank you!! I will implement this solution

  • 1

    From what I understood the question, the page would not be 100% loaded a priori, but rather its structure with the menu part. I believe that, in addition to the toggle to appear and disappear, it would be appropriate to put in your reply how to handle the ajax request so as to insert the content dynamically in the divs appropriate. It would also save who is being displayed on the member so that, if I had something from the menu displayed, I would automatically hide the previously selected item, but this last detail is more a gem to avoid bugs/decrease maintenance than something that answers the question

Browser other questions tagged php javascript html css angularjs

You are not signed in. Login or sign up in order to post.