Open Ajax with url addition

Question

Open Ajax with url addition

Navigation

#1 by (1 votes)

1

I want to open the "# portfolioModal54" and run ajax add in the front of the url the name and id of the block clicked.

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

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

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

Here is the block that will open the # portfolioModal54 that has the value "Execute 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 Modal54 that is opened and inside it receives a "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>

Here ajax.js

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

javascript ajax url

asked by anonymous 18.08.2016 / 20:38

1 answer

SELECT in postgresql does not take records in the time interval How to pass the field of a struct to a function in a part library?

score 1 · Accepted Answer

I suggest passing the two parameters, $name and $id , as an argument:

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

To be easily tested, here is a small script that you can copy paste and try, see how the url changes depending on which one you 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>