Jquery function . load however inside the document

Asked

Viewed 417 times

-1

I want to use something similar to the function of .load, but I want to take a div inside my own document, which I will leave hidden with display : none, How could you make that call? I tried to: 

if(escolha == "predefinido")
{
    $("#filtro").load("#predefinido1");
}

But I had no result, which would be correct?

javascript

2 answers

0


Are you passing an element as a parameter in the load? Apologies, but I believe that this will have no effect, the load can be used to query the server through an ajax in the parameter and even a url that can provide a data payload, but this does not apply to an element in your Search. You could achieve a better result by clarifying what you want to do and what you expect as a response to your need, and who knows, you may receive guidance that is actually feasible and possible.

EDITED:

see this example if it suits you...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>

  <div id="conteudo">
    <h2>CONTEÚDO PRINCIPAL...</h2>
  </div>

  <button data-tipo="1" onclick="mudaConteudo(this)">MUDAR CONTEÚDO</button>

  <script type="text/javascript">
    function mudaConteudo(obj) {
      // if para verificar o tipo do botão
      if ($(obj).attr("data-tipo") == 1) {
        // se for 1 o data-tipo ele faz as seguintes alterações...
        $("#conteudo").html("<h2>CONTEÚDO ALTERADO...</h2>"); // muda o html da div conteúdo
        $(obj).html("DESFAZER CONTEÚDO"); // Muda o html do botão
        $(obj).attr("data-tipo", 2); // Muda o valor do atributo data-tipo do botão
      } else {
        // se for diferente de 1 o data-tipo ele faz as seguintes alterações...
        $("#conteudo").html("<h2>CONTEÚDO PRINCIPAL...</h2>"); // muda o html da div conteúdo
        $(obj).html("MUDAR CONTEÚDO"); // Muda o html do botão
        $(obj).attr("data-tipo", 1); // Muda o valor do atributo data-tipo do botão
      }

    }
  </script>

</body>

</html>

A small patch in your git code in function..

<script type="text/javascript">
 $(document).ready(function(){ 
     $("#predefinido").click(function(){ 
         $("#predefinido").html("#predefinido1") }); });

</script>

I got that result... inserir a descrição da imagem aqui

that’s exactly what I intended to do?

Complement of the Solution

var escolha = $(this).val();
var predefinido1 = " copie o html que vc quer no arquirvo todasEscolhas.html e cole aqui"; 
var naopredefinido = " copie o html que vc quer no arquirvo todasEscolhas.html e cole aqui"; 
var contato = " copie o html que vc quer no arquirvo todasEscolhas.html e cole aqui"; 
if(escolha == "predefinido")
{
  $("#div-unica").html(predefinido1);
}
else if(escolha == "naopredefinido")
{
  $("#div-unica").load(naopredefinido);
}
else if(escolha == "contato")
{
  $("#div-unica").load(contato);
}
// NOTA: div-unica é a criação de apenas uma div que vai se alterando conforme o botão clicado e escrevendo o html da opção desejada
// como os conteúdos são sobrescrito, não tem necessidade de ter mais que um elemento para servir como quadro para esse conteúdos

  • Please avoid long discussions in the comments; your talk was moved to the chat

  • @Bacco would be really feasible in several situations the use of chat, but this feature does not appear to me as an option of choice, so I should end other days attempts to help those who sought the community due to this issue :/

  • The room was created specifically for this case, and can be accessed by the link of the comment above. (is the same as this one)

0

It would be easier for you to use a combination of jQuery and css. You can hide #preset 1 with display:None in your css and use jquery to show there. 

$('button.btn').click( function(){
  $('#predefinido1').toggle();
   $('#conteudo').toggle();
});
$('button.mostra').click( function(){
  $('#predefinido1').slideToggle();
   $('#conteudo').slideToggle();
});
#predefinido1 {
  display: none;
  padding:40px;
  border:1px solid green;
}
#conteudo{
  padding:40px;
  border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="predefinido1">
  Contédo secundário
  <button class="btn">Mostra Div</button>
  <button class="mostra">Slide Div</button>
</div>
<div id="conteudo">
  Conteudo principal
   <button class="btn">Mostra Div</button>
</div>

  • In case the button disappears.... thus giving space to other buttons, will have a back button, but it is not the case This function would work?

  • I edited the code above. You just need to organize inside each div the content you want to appear or disappear.

Browser other questions tagged javascript

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