Opening HTML inside a DIV, does not retrieve the partions via GET

Question

Opening HTML inside a DIV, does not retrieve the partions via GET

Navigation

#1 by (1 votes)

1

I'm using Jquery to load an HTML page into a <div> . My code is working correctly, however it is not passing a value via GET that I need on another page:

<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
<script type="text/javascript" src="js/js_1.9/jquery-1.8.2.js"></script>  
<script type="text/javascript" src="js/js_1.9/jquery-ui-1.9.1.custom.min.js"></script>  
</head>
<body>    
 <div id="sidebar">
    <ul>
        <li><a onclick="carregar('receita.html?cod=1')" href="#">Receita 1</a></li>
        <li><a onclick="carregar('receita.html?cod=2')" href="#">Receita 2</a></li>
    </ul>
</div>
<div id="conteudo"></div>
</body>
<script>
    function carregar(pagina){
        $("#conteudo").load(pagina);
    }
</script>
</html>

I'm using a function on page receita.html that retrieves the variable cod

So, if I open in the browser receita.html?cod=10 it retrieves this variable, but opening the content inside the <div> it even opens the page, but it does not retrieve cod .

Does anyone have any idea how I can resolve this?

jquery html5

asked by anonymous 29.10.2015 / 12:52

1 answer

Transparent image and background color Method onCreateContextMenu of a Fragment calls the onContextItemSelected method of another Fragment

score 1 · Answer 1

I noticed that you are trying to get a value you already have ( cod is in the onclick attribute). These values can be accessible in javascript through data-* attributes where * can be replaced by a name.

As you are already using jQuery, it is better to use the .on('click', ...) function than the onclick attribute.

jQuery has the function .data() that accesses the values of the data-* attributes directly.

$('#sidebar a').on('click', function() {
  // this se refere ao <a> clicado
  var cod = $(this).data('cod'); // acesse sem o prefixo "data-"
  $("#conteudo").html('"cod" é igual a ' + cod);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="sidebar">
  <a data-cod="1" href="#">Receita 1</a><!-- observe data-cod="1" -->
  <a data-cod="2" href="#">Receita 2</a>
</div>
<div id="conteudo"></div>