Error Load multiple pages in php site

Asked

Viewed 236 times

0

I have a PHP site where I have to upload several pages. But only once.What’s happening is the overlapping of screens with various inclusions.

<div class="container">
  <h2>MAPAS</h2>
  <ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#menu1">Detalhes</a></li>
    <li class="active"><a data-toggle="tab" href="#menu2">Mapas</a></li>
    <li><a data-toggle="tab" href="#menu3">Cadastrar Devices</a></li>
    <li><a data-toggle="tab" href="#menu4">Alerta</a></li>
  </ul>

  <div class="tab-content">

    <div id="menu1" class="tab-pane fadee">
        <?php require_once "paginas/detalhes.php"; ?>
    </div>

    <div id="menu2" class="tab-pane fade in active">
        <?php require_once "paginas/mapas.php"; ?>
    </div>

    <div id="menu3" class="tab-pane fade">
        <?php require_once "paginas/cadastrodivices.php"; ?>
    </div>

    <div id="menu4" class="tab-pane fade">
        <?php require_once "paginas/alerta.php"; ?>
    </div>
  </div>
</div>

Screen Error inserir a descrição da imagem aqui inserir a descrição da imagem aqui

php javascript jquery html ajax
  • 2

    What’s the mistake Alex?

  • The structure of the Maps screen is present in all tabs..

  • I just want to load each structure once....

  • Is it because they are not there, but behind each other? See the source code of the page to see if they are there

  • Yes.. the error in include or require.. I need to load once and not load anymore. Think using ajax here or Jquery ??

  • Jquery/Javascript, you have to delegate the event click on the tabs and make the section appear, I’ll put a simple example with jquery below. But apparently you’re wearing bootstrap

Show 1 more comment

1 answer

1


I was able to solve the problem using the plugin jquery Tabs With it tabs load only once each page . php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  } );
  </script>

</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="paginas/detalhes.php">Detalhes</a></li>
    <li><a href="paginas/mapas.php">Mapas</a></li>
    <li><a href="paginas/cadastrodivices.php">Cadastrar Divices</a></li>
    <li><a href="paginas/alerta.php">Alerta</a></li>
  </ul>

</div>


</body>
</html>

Browser other questions tagged php javascript jquery html ajax

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