Open Ajax with addition to url

Question

I’m wanting that when I open the "#portfolioModal54" and run the ajax add in front of the url the name and id of the clicked block.

Example:
BLOCK 1: #portfolioModal54 opened with the $name = quad so the url will be: site.com.br/index.php#quad01

BLOCK 2:#portfolioModal54 opened with the $name = Circ so the url will be: site.com.br/index.php#circ02

Here on this site you can see the blocks and the ajax working: I just want to add $name and $id in front of url when clickado. somospixel.com/portfolio.php

Here is the Block that will open #portfolioModal54 that has the value "Executes ajax" and takes variables with database information.

  <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
  }
  ?>

Here is the Modal54 that is opened and inside it receives a "Receive Jax"

  <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>

Here the ajax.js

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

Answer 1

I suggest to pass as argument right away the two parameters, $name and $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 of history.pushstate

So it can be tested easily, here’s a little script that you can copy paste and try, see how the url changes depending on which click:

<?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>