call include inside js

Asked

Viewed 119 times

0

found a code that changes the url without refresh, but wanted to include two pages inside js according to their url, when I click

inserir a descrição da imagem aqui

html

<ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="" data-tab-for="geral">Geral</a></li>

    <li class="nav-item">
      <a class="nav-link" href="" data-tab-for="buna-silva">Bruna Silva</a></li>

    <li class="nav-item"><a class="nav-link" href="" data-tab-for="amanda-castro">Amanda Castro</a></li>
</ul>

<div class="content">
    <p id="geral">Geral</p>
    <p id="buna-silva" class="hide">Bruna Silva</p>
    <p id="amanda-castro" class="hide">Amanda Castro</p>
</div>

htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1

js

var tabs = document.querySelectorAll("a[data-tab-for]");

var contents = document.querySelectorAll(".content>p");

tabs.forEach(tab => tab.addEventListener('click', tabClicked));

window.onpopstate = checkState;

history.replaceState({tabForId: tabs[0].dataset.tabFor}, null, ""+tabs[0].dataset.tabFor);

function showContent(id) {

  contents.forEach(content => {
    if (content.getAttribute('id') === id) 
        content.classList.remove('hide');
    else 
        content.classList.add('hide');
  });

  tabs.forEach(tab => {
    if (tab.dataset.tabFor === id) 
      tab.classList.add("active");
    else 
      tab.classList.remove("active");
   });

}

function tabClicked(e) {
  var contentId = e.target.dataset.tabFor;
  e.preventDefault();
  showContent(contentId);
  history.pushState({tabForId: contentId}, null, ""+contentId);

if(contentId == 'geral') {
  // linha do erro da variavel indefinida
  document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";
} else {

  document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";
}
console.log(content);
}

function checkState(e) {
  if(e.state) {
    console.log(e.state.tabForId);
    showContent(e.state.tabForId);
  }
}
  • @Sam actually now pulls nothing

  • it was stupid of me, calling require on the console, just not including on the page http://prntscr.com/mu2x3w if(contentId == 'geral') {&#xA; &#xA; document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('lobby.php');?>";&#xA; &#xA; console.log(document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('lobby.php');?>");&#xA; } else {&#xA; document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('private.php');?>";&#xA;&#xA; console.log(document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('private.php');?>");&#xA; }

  • for now ta empty, but will have html and php

  • You should use Ajax for this, not put a page inside innerHTML.

  • @Sam what I tried was this function ajax() {&#xA; $.ajax({&#xA; url: 'https://localhost/public/' + contentId,&#xA; method: 'GET',&#xA; cache: false,&#xA; success: function(data) {&#xA; content.html(data);&#xA; console.log(data);&#xA; }&#xA; });&#xA;} gave this error http://prntscr.com/mu3bic

2 answers

1

Is giving error in Function tabClicked, making that "content" is not defined, and is not even, see well the body of Function:

function tabClicked(e) {
    var contentId = e.target.dataset.tabFor;
    e.preventDefault();
    showContent(contentId);
    history.pushState({
        tabForId: contentId
    }, null, "" + contentId);

    if (contentId == 'geral') {
        // linha do erro da variavel indefinida
        document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";
    } else {

        document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";
    }
    console.log(content);  // <-este content, onde foi declarado???
}

I left the commented line to help identify. I don’t know what I wanted to observe here, maybe the contentId? Or would it be the variable contents?

  • really was inattentive

-1

function showContent(id) {

  contents.forEach(content => {
    if (content.getAttribute('id') === id) 
        content.classList.remove('hide');
    else 
        content.classList.add('hide');
  });

tries to give a console.log of content and see the result.

  • he’s getting it right, I don’t know pq da indefinida http://prntscr.com/mtzfeo

  • &#xA;if(contentId == 'geral') {&#xA; // linha do erro da variavel indefinida&#xA; document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";&#xA;} else {&#xA;&#xA; document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";&#xA;}&#xA;console.log(content);&#xA;}&#xA;&#xA; maybe if you remove that console.log

  • console has nothing to do, the console only shows if you’re getting the right information, it’s the "variable" that is not defined

  • but content does not exist within the tabClicked(e)

  • tries to save the output of querySelector to a var

  • You’re right, I think you need to ajax if(contentId === 'geral') {&#xA; console.log(document.querySelectorAll(".content"));&#xA; document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";&#xA; alert(contentId);&#xA; } else {&#xA; document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";&#xA; alert(contentId);&#xA; } so it worked, but always q ajax use where have htaccess file it duplicates the page, which complicates my, never it is certain

  • and if you save the html <body> right into a variable and use it as a base. .

  • he is pulling only not showing, only ajax msm salva http://prntscr.com/mtzoyq has any idea what he calls by ajax?

  • maybe this can help you https://blog.especializati.com.br/howto do/

Show 4 more comments

Browser other questions tagged

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