Felipe Bird Felipe Bird - 7 months ago 12
HTML Question

Assign click to all buttons and then trigger ajax to change div content

I have this html

<body>
<header>
<img src="" alt="BANNER 200PX" />
</header>
<div class="contenedorBody">
<nav id ="cssmenu">
<ul>
<li><a href="">Posts</a></li>
<li><a href="">Eventos</a></li>
<li><a href="">Noticias</a></li>
<li class = "derecha"><a href="">Facebook</a></li>
<li class = "derecha"><a href="">Twitter</a></li>
</ul>
</nav>
<div class = "grilla">

<div class = "col col-sidebar">
<div class = "module">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.</p>
</div>
</div>

<div class = "col col-content">
<div class = "module" id = "36" name = "post">
<h1>Titulo</h1>
<div class = "col col-desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
</p>
</div>
<div class = "col col-artwork">
<img src="artwork.gif" class = "artwork">
</div>
<button class = "verFrame" value = "">Ver Frame</button>
<div id = "contenedorFrame"></div>
</div>

<div class = "module" id="7" name = "post">
<h1>Titulo</h1>
<div class = "col col-desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
</p>
</div>
<div class = "col col-artwork">
<img src="artwork.gif" class = "artwork">
</div>
<button class = "verFrame" value = "">Ver Frame</button>
<div id = "contenedorFrame"></div>
</div>

</div>

</div>
</div>
<script src ="jquery-2.2.2.min.js" type="text/javascript"></script>
<script src ="javascript.js" type="text/javascript"></script>
</body>


and I want to make an jquery function to assign all 2 buttons of the sections to trigger a jquery post to get the value of an iframe and the append it to the

<div id = "contenedorFrame"></div>


My jQuery so far is this :

$(document).ready(function() {
$("#contenedorFrame").hide();
console.log($(this).parent(".module").children("#contenedorFrame").length);
$('.verFrame').click(function() {
$("#contenedorFrame").toggle();
if ($(this).parent(".module").children("#contenedorFrame").length) {
$.post("get_frame.php", {
id: "7"
})
.done(function(respuesta) {
console.log("Entre");
$(this).parent(".module").find("#contenedorFrame").html(respuesta);
});
}
});

});


I just want to do the ajax post once and then toogle that div on and off.

Answer

This is what solved my problem.

    $(".grilla .verFrame").click(function(){
    if($(this).next().text().length <= 0) {
        $(this).next().load("get_frame.php", {id : $(this).attr("value")});
    }
    $(this).next().toggle();
});
Comments