Render the content on the screen from an option

Asked

Viewed 52 times

1

Like to know how I do to instead of having multiple pages for each option of a menu, I just render according to the event by clicking the content on the screen, for example:

<main class="container">
    <div class="banner">
      <img class="img-responsive" srcset="img/publicidade_cupom.png" alt="banner-guia-cupom">
    </div>

    <div class="menu-opcoes">
          <ul>
                <li class="menu-opcoes-principal"><a href="#">Compras</a></li>
                <li class="menu-opcoes-right"><a href="indexCadastro.html">Cadastro</a></li>
                <li class="menu-opcoes-right"><a href="#">Endereço</a></li>
                <li class="menu-opcoes-right"><a href="#">Atendimento</a></li>
                <li class="menu-opcoes-right"><a href="indexPainelClienteComprar.html">Pagamento</a></li>
                <li class="menu-opcoes-right"><a href="#">Sair</a></li>
          </ul>
    </div>

    <hr />

    <div class="conteudo-muda-deacordo-com-o-menu-opcoes">
      <div class="exemplo-de-cupom col-md-6">
          <img class="img-responsive"  src="img/cupom_modelo.png" alt="cupom-de-exemplo"/>
      </div>
      <div class="menu-opcoes-de-compra col-md-6">
        <form class="form-compra" name="formCompra" method="get" onsubmit="return validaPainelCliente(this)">
              <div class="form-group row">
                <label for="quantidade" class="col-sm-3 col-form-label">Quantidade:</label>
                <div class="col-sm-12 col-md-4">
                  <input type="number" class="form-control" id="quantidade" placeholder="Ex:300" min="0">
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEntregar" class="col-sm-3 col-form-label" id="entrega">Entregar:</label>
                  <div class="col-sm-12 col-md-4">

                      <select class="form-control" name="category">
                        <option selected>Escolha..</option>
                        <option value="1">Sim</option>
                        <option value="2">Não</option>
                      </select>
                  </div>
              </div>
              <div class="form-group row">
                <label for="preco" class="col-sm-3 col-form-label">Preço:</label>
                <div class="col-sm-12 col-md-4">
                  <input type="text" class="form-control" id="preco">
                </div>
              </div>
              <div class="form-group row">
                <label for="preco" class="col-sm-3 col-form-label">Valor Total:</label>
                <div class="col-sm-12 col-md-4">
                  <input type="text" class="form-control" id="valorTotal">
                </div>
              </div>
          </form>
      </div>

  </div>

This top part is common on all screens, what changes or will change would be the part of the div <div class="conteudo-muda-deacordo-com-o-menu-opcoes">

Could you give me a hand, how will I do that? What I need to read or seek to do?

javascript html5

1 answer

0

+-----------------------+
| Página: index.html    |
+-----------------------+

<html>
<head>
<title>Ajax</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

function ajax(url,postData) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,'/' + url + '.html',true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
            alert('HTTP error ' + req.status);
            return;
        }
         document.getElementById("ajax").innerHTML = req.responseText;
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
    var xmlhttp = false;
    for (var i=0;i<XMLHttpFactories.length;i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e) {
            continue;
        }
        break;
    }
    return xmlhttp;
}
</script>

</head>
<body>

<main class="container">
    <div class="banner">
      <img class="img-responsive" srcset="img/publicidade_cupom.png" alt="banner-guia-cupom">
    </div>

    <div class="menu-opcoes">
          <ul>
                <li class="menu-opcoes-principal"><a href="javascript:ajax('compras')">Compras</a></li>
                <li class="menu-opcoes-right"><a href="javascript:ajax('cadastro')">Cadastro</a></li>
                <li class="menu-opcoes-right"><a href="javascript:ajax('endereco')">Endereço</a></li>
                <li class="menu-opcoes-right"><a href="javascript:ajax('atendimento')">Atendimento</a></li>
                <li class="menu-opcoes-right"><a href="javascript:ajax('pagamento')">Pagamento</a></li>
                <li class="menu-opcoes-right"><a href="#">Sair</a></li>
          </ul>
    </div>

    <hr />

    <div id="ajax">

    </div>
</main>

</body>
</html>

+-----------------------+
| Página: compras.html  |
+-----------------------+

<div class="exemplo-de-cupom col-md-6">
  <img class="img-responsive"  src="img/cupom_modelo.png" alt="cupom-de-exemplo"/>
</div>
<div class="menu-opcoes-de-compra col-md-6">

<form class="form-compra" name="formCompra" method="get" onsubmit="return validaPainelCliente(this)">
      <div class="form-group row">
        <label for="quantidade" class="col-sm-3 col-form-label">Quantidade:</label>
        <div class="col-sm-12 col-md-4">
          <input type="number" class="form-control" id="quantidade" placeholder="Ex:300" min="0">
        </div>
      </div>
      <div class="form-group row">
        <label for="inputEntregar" class="col-sm-3 col-form-label" id="entrega">Entregar:</label>
          <div class="col-sm-12 col-md-4">

              <select class="form-control" name="category">
                <option selected>Escolha..</option>
                <option value="1">Sim</option>
                <option value="2">Não</option>
              </select>
          </div>
      </div>
      <div class="form-group row">
        <label for="preco" class="col-sm-3 col-form-label">Preço:</label>
        <div class="col-sm-12 col-md-4">
          <input type="text" class="form-control" id="preco">
        </div>
      </div>
      <div class="form-group row">
        <label for="preco" class="col-sm-3 col-form-label">Valor Total:</label>
        <div class="col-sm-12 col-md-4">
          <input type="text" class="form-control" id="valorTotal">
        </div>
      </div>
  </form>
</div>

  • Remembering that you should put these pages in the public folder of your web server in order for it to work properly. I tested it here and it worked perfectly. Note: Pages that are loaded into the <div id="ajax"></div> do not need to have <html><head> and <body>.

  • I’ll try here and study these objects

Browser other questions tagged javascript html5

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