Get URL Code ID and insert into JS

Question

How to get the code galeria of url http://URL/galerias.php?galeria=casais and put in js?

$(document).ready(function() {
    $('#conteudo').load('galeria.php?galeria='prodId'', 
      function(){
        $('#gallery a').lightBox();
      }
    );
});

Answer 1

When you have a URL of this type:

http://URL/galerias.php?galeria=casais

the part ?galeria=casais is called query string and you can pick up with window.location.search in format string. Now you just need to get that info out of there, for example via regex. If the key of value what you seek is galeria you can do it like this:

$(document).ready(function() {
    var query = window.location.search;
    var match = window.location.search.match(/galeria=(\w+)/);
    var galeria = match && match[1];
    $('#conteudo').load('galeria.php?galeria=' + prodId, 
      function(){
        $('#gallery a').lightBox();
      }
    );
});

The reason I do it first match and then galeria = match && match[1]; is because in case there is no match avoid giving error while accessing match[1], because if there isn’t match the method will give null and not a array.

Answer 2

You can recover by php

$galeria = $_GET['galeria'];

then create an input of type Hidden in html

<input type="hidden" id="galeria" value="<?php echo $galeria; ?>">

and finally recover in javascript

var proId = $('#galeria').val();

It’s a way I thought at first, I believe there can be something better.

BS.: I didn’t get to test

Answer 3

Man, the way you’re doing all this seems really complicated to me because you don’t try to simplify?

To know which gallery was selected you could do something like this:

<ol>
    <li class="galeria" data-galeria="casais">Casais</li>
    <li class="galeria" data-galeria="gravidas">Gr&aacute;vidas</li>
    <li class="galeria" data-galeria="criancas">Crian&ccedil;as</li>
    <li class="galeria" data-galeria="bebes">Beb&ecirc;s</li>
</ol>

And to load the galleries that are being clicked you do the following:

$(document).on("click", ".galeria", function()
{
    var galeriaSelecionada = $(this).data("galeria");

    $('#conteudo').load('galeria.php?galeria=' + galeriaSelecionada, 
      function(){
        $('#gallery a').lightBox();
      }
    );
});