1

Estou querendo que quando eu abrir o "#portfolioModal54" e executar o ajax adicione na frente da url o nome e id do bloco clicado.

Exemplo:
BLOCO 1: #portfolioModal54 aberto com o $nome = quad então a url vai ser: site.com.br/index.php#quad01

BLOCO 2:#portfolioModal54 aberto com o $nome = circ então a url vai ser: site.com.br/index.php#circ02

Aqui nesse site você pode ver os blocos e o ajax funcionando: só quero adicionar $nome e $id na frente da url quando for clickado. somospixel.com/portfolio.php

Aqui está o Bloco que vai abrir o #portfolioModal54 que tem o value "Executa ajax" e pega variáveis com informações do banco de dados.

  <div class="element-item third-effect todos <?php echo "$menu";?>" data-category="transition">
    <a href="#portfolioModal54"  class="portfolio-link" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax">
                            <img src="<?php echo "$imageM"?>" alt="imagem">
      <div class="mask">    <div class="conteudo_mask" style="transform: translateY(-50%);top: 50%;position: relative;">
       <h1><?php echo "$nome"?></h1><div id="lin" style="width: 110px;"></div><h2><?php echo "$tipo"?></h2></div><h3 style="transform: translateY(-50%);top: 50%;position: relative;
        ">VEJA <br><img src="images/mais.png" alt="mais" style="width: 20px;height: 19px;margin-bottom: -1px;margin-top: 12px;margin-left:0px;"></h3>


</div>
        </a>
      </div>
        <?php
  }
  ?>

Aqui está o Modal54 que é aberto e dentro dele recebe um "Recebeajax"

  <div class="portfolio-modal modal fade" id="portfolioModal54" tabindex="-1" role="dialog" aria-hidden="true">
          <div id="barra-sty">
            <div class="wrap">
                   <div id="logo" style="width: 50px;      height: 50px;      float: left;">
          <img src="images/logom.png">
          </div></div>
  <div class="close-modal" data-dismiss="modal">
                  <div class="lr">
                      <div class="rl">
                      </div>
                  </div>
              </div></div>
  <div class="wrap RecebeAjax">
  </div>
      </div>

Aqui o ajax.js

function portfolioModal(id){
    $(".RecebeAjax").load("ajax.php?id="+id);
}

1 Resposta 1

1

Sugiro passar como argumento logo os dois parametros, $name e $id:

HMTL

...onclick="<?php echo 'portfolioModal(\'' .$name. '\', ' .$id. ');'; ?>"...

JS:

function portfolioModal(name, id) {
    // concatenamos o nome e o id ao url em que estamos (depois de retirar possiveis # que possam estar com o split), se preferir pode pôr por extenso "history.pushState('', '', site.com.br/index.php#" +name+id)";
    history.pushState('', '', window.location.href.split('#')[0]+ '#' +name+id);
    $(".RecebeAjax").load("ajax.php?id="+id);
}

DOCS do history.pushstate

Para que possa ser testado facilmente, aqui está um pequeno script que pode copiar colar e experimentar, veja como o url muda consoante em qual clica:

<?php
$name1 = 'Miguel';
$name2 = 'Kaiquemix';
$id1 = 123;
$id2 = 435;
?>
<span onclick="<?php echo 'portfolioModal(\'' .$name1. '\', ' .$id1. ');'; ?>">CLICA</span><br>
<span onclick="<?php echo 'portfolioModal(\'' .$name2. '\', ' .$id2. ');'; ?>">CLICA</span>
<script>
function portfolioModal(name, id) {
    history.pushState('', '', window.location.href.split('#')[0]+ '#' +name+id);
}
</script>
10
  • Consegui fazer ele pegar só o ID, mas quero que ele pegue o $nome tbm, mas sinto que estou colocando algo errado e por isso não vai. function portfolioModal(id){ $(".RecebeAjax").load("ajax.php?id="+id); history.pushState('', '', window.location.href.split('#')[0]+ '#' +id); } E AQUI O ONCLICK onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax">
    – kaiquemix
    19/08/2016 às 18:00
  • Fica aparecendo o ID e onde deveria ta o nome aparece undefined e as informações do ajax.php esta esperando um parametro booleano.
    – kaiquemix
    19/08/2016 às 18:11
  • Veja com atenção o principio da resposta... Coloquei o exemplo funcional depois em baixo
    – Miguel
    19/08/2016 às 18:21
  • sim eu estou a olhar o JS
    – kaiquemix
    19/08/2016 às 18:22
  • Dentro onclick coloque o que pus, e tenha e certeza que existe o $name e o $id, veja o codigo fonte da paginda para ver se está... Botão direito do rato e clique em ver codigo fonte
    – Miguel
    19/08/2016 às 18:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .