Thanks in advance, I just started coding a few weeks ago and I can't figure this out.
I have been trying to set up where you click an image and it opens a modal that is matched by the img tag, and that modal click event will in turn call a method. Problem is that I can't seem to get the onclick event to open the modal, i think once i get that to work I can get the method calls to work. I have tried a bunch of things and can't seem to figure out how to get it to pop up,
here is the JS/ajax
$('#img').click(function(){
$('#vendingModal').dialog('open');
return false;
});
$('#vendingModal').click(function (event) {
event.preventDefault();
var element = $(event.relatedTarget);
var inventoryId = element.data('inventory-id');
var modal = $(this);
$.ajax({
type: "GET",
url: 'inventory/' + inventoryId
}).success(function (inventory) {
modal.find('#inventory-id').text(inventory.inventoryId);
modal.find('#inventory-name').text(inventory.inventoryName);
modal.find('#inventory-price').text(inventory.price);
modal.find('#inventory-count').text(inventory.count);
});
});
here is the jsp
<%# page pageEncoding="UTF-8" %>
<div class="column2" id="inventoryGrid">
<div class="row">
<div class="col-xs-3 offset-3-12">
<div class="pic morph">
<img id="item1" src="img/item1.jpg" alt="3 Musketeers" title="3 Musketeers" class="img-rounded img-responsive" style="width:128px;height:128px">
</div>
</div>
</div>
</div>
The click event is linked to the wrong element.
"$('#img')" will point to an "img" id. Your image, however, has the id "item1", so try with $('#item1').click(function(){
Related
I am playing around with Bootstrap modal and I want to change content of div when clicking a button. Here is the code :
html code of modal content
<div class="modal-content">
<div class="modal-body">
<div id="login-box" class="animated fadeIn">
Login form
<button id="show-register">Register</button>
</div>
<div id="register-box" class="animated fadeIn">
Register form
<button id="show-login">Login</button>
</div>
</div>
</div>
css styling
#register-box {
display: none;
}
javascript function to hide/show div
$(document).ready(function(){
loginRegisterSwitch();
});
function loginRegisterSwitch(){
var registerBtn = $("#show-register");
var loginBtn = $("#show-login");
var registerBox = $("register-box");
var loginBox = $("#login-box");
registerBtn.on('click',function(){
loginBox.hide();
registerBox.css('display','block');
});
loginBtn.on('click', function(){
registerBox.hide();
loginBox.css('display','block');
});
}
When user clicks register button, login-form div hides and register box shows.I can't get this code working(When user click register button , register div shows but login div does not hide). I would like to know if there is a better way to achieve this for example using jQuery html()
You're missing the # in the selector for the registerBox.
Change var registerBox = $("register-box"); to var registerBox = $("#register-box");
I have one question about jquery click to load url in a div using id.
I am trying when user clicking the class="open" id="1" then the ajax URL will open just id="openpage1" but the code showing in all id="openpageXX" what i am doing wrong here anyone can help me in this regard ?
$.base_url = 'http://localhost/';
$(".open").on('click', function() {
var ID = $(this).attr("id");
$("#openpage" + ID).slideToggle('fast');
var URL = $.base_url + 'page.php';
$.ajax({
type: "POST",
url: URL,
cache: false,
success: function(html) {
if (html) {
$(".page_area").html(html);
}
}
});
return false;
});
Html
<!--First Post Started-->
<div class="post_area" id="1">
<div class="open" id="1">Click for 1</div>
<div class="opened_page" id="openpage1">
When user click (class=open id 1 then ajax page will need to open just here)
</div>
</div>
<!--First Post finished-->
<!--Second post started-->
<div class="post_area" id="2">
<div class="open" id="2">Click for 2</div>
<div class="opened_page" id="openpage2">
When user click (class=open id 2 then ajax page will need to open just here)
</div>
</div>
<!--Second Post finished-->
I see 3 issues
I strongly suggest using unique non-numeric IDs - but my code no longer needs ID - I use datza-id to hold the information for the link
you need to find the closest opened_page - you try page_area which is not in your HTML
I would cache the clicked object to use in the success
like this:
<div class="post_area">
<div class="open" data-id="1">Click to open</div>
<div class="opened_page">
When user click (class=open id 1 then ajax page will need to open just here)
</div>
</div>
using
$(function() {
$(".open").on('click', function(e) {
e.preventDefault(); // in chase you change to a link or button
var $this = $(this),
URL = $.base_url + 'page.php?page='+$this.data("id"),
$page = $this.next("opened_page"); // sibling
$.ajax({
type: "POST",
url: URL,
cache: false,
success: function(html) {
if (html) {
$page.html(html).slideToggle('fast');; // sibling
}
}
});
});
});
So i have this problem i couldn't get the html code of page using ajax from a userscript since the page loads only a bit of the page firstly before everything else so performing ajax from a userscript to get the whole page html is impossible. So i used an invisible i frame to bypass the problem. And it works fine. But my url always stays the same and i don't know why, i'm doing a .each() function on some <a> elements but something's wrong.
What i want to do is using the magnific popup library and open images in a popup. Basicly this part works but the url of the image doesn't change so no matter what image i click it's always the same image.
Here's my code
var link = '';
var link2 = '';
var iFrame = $('<iframe id="tempData" style ="display: none">').appendTo('body');
$("head").append('<link rel="stylesheet" href = "https://49535f300cc62ae84be0bc4341ad834057099639.googledrive.com/host/0B7xSofmydrHqMU9pRDJXTEtpQWc">');
$(document).ready(function() {
$('section[class="article"]').find("#intelliTXT").find('a').each(function(){
var that = $(this);
if (that.find('img').attr('src') != undefined){
iFrame.attr('src',that.attr('href'));
iFrame.load(function(){
link = iFrame.contents().find('.big').find('img').attr('src');
that.magnificPopup({
items: {
src: link
},
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
}
});
});
And somehow the link variable stays the same on every image i click. I don't know why. Any help please?
link2 is the url on the main page the one i have to access to find the actual image to show in the popup.
linkis the url of the image that has to be shown in the popup. And it's also the link that always stays the same. And it's always the last image of the page.
I made and alert to check if the link2 variable changes and it is changing so i should get a new link everytime the iframe is done loading but in magnificPopup function the link stays always the same
HTML
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00CE007400811425.jpg" alt="Senran Kagura Estival Versus 2015 07 13 15 005" width="206" height="116">
That's on the main page, there's some other link too. The img inside the is only a screenshot. The href in is the link to the second page where the image with the actual big size is located.
<section id="zoom" class="galerie">
<nav class="smalls clearfix">
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-001-811421-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-001_00DC007C00811421.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_001">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-007_00DC007C00811427.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_007">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" class="small active">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00DC007C00811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-004_00DC007C00811424.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_004">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-003-811423-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-003_00DC007C00811423.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_003">
</a>
</nav>
<div class="zoom">
<span class="big"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_0903D4000000811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005"></span>
<header>
<h1 class="titre">Senran-Kagura-Estival-Versus_2015_07-13-15_005</h1>
</header>
</div>
<div class="bup"> <script type="text/javascript">tmntag.adTag('side_ad');</script>
</div>
<a class="btn" data-icon="" href="/actualites/senran-kagura-estival-versus-premieres-images-ayame-combattante-264284-1">Retour au contenu</a>
</section>
This is on the second page. The image inside .big class is the image i clicked on the main page and it has it's real size. The link inside the img element of this .big class is the link i have to use. All the other images are only small screenshots of some other images i don't have to use them.
SOLUTION
Well, finally i managed to make it work, just create a different iframe for each link.
var iFrameContainer = $('<div id="iFrameContainer" style = "display: none">').appendTo('body');
and then just append a new iframe to it in the each function
var iFrame = $('<iFrame>').appendTo(iFrameContainer);
link = iFrame.contents().find('.big').find('img').attr('src');
Looks like you are adding the same url to every iterated link. Try to iterate over images.
You can try with onload
iFrame.on('load', function() {
iFrame.load(function(){
link = iFrame.contents().find('.big').find('img').attr('src');
that.magnificPopup({
items: {
src: link
},
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
});
I'm setting things up very simply and i just can't wrap my brain why this won't work. I know this is correct, yet it doesn't work.
.navigate-button is being ajax'd into .overlay-content so .overlay-content isn't in the dom on page load, hence using .on
When i click the link it just takes me to the page as normal. I know that the even tisn't being bound to .navigate-button
Mark Up:
<div class="overlay" id="overlay">
<div class="overlay-content--bg">
<div class="overlay-content">
<a class="navigate-button left" href="/question.php?id=<?php echo $json->id-1;$json->id+1; ?>">
<
</a>
<a class="navigate-button right" href="/question.php?id=<?php echo $json->id+1; ?>">
>
</a>
</div>
</div>
</div>
JS: if i run this code in console it works as expected
$('#overlay').on('click','.navigate-button', function(){
var id = $(this).attr('href');
id = id.split('=');
console.info(id[1]);
callPage(id[1]);
return false;
});
function callPage (id) {
$.ajax({
url:'/question.php?id='+id,
success: function(data){
$('.overlay-content').html(data);
FB.XFBML.parse(document.getElementById('overlay'));
$('.overlay').fadeIn();
}
});
}
We solved this in chat. Jamie's problem was that the click event on the .navigate-button div wasn't bubbling up to the #overlay div because it was being caught and handled in between by a handler that called .stopPropagation on it. The solution was to remove that intermediate handler.
Have you tried this?
$(document).on('click', '.navigate-button', function() {
YOUR FUNCTION
});
<div class="content" id="current">
<div id="loader" style="display:none;"><img src="/images/loader.gif" alt="" /></div>
</div>
I have this code. Above, which is a Box, and on submitting a button, I want a loader image there then when i get the response back, i want the image that s in the response to fadeIn.
When i click submit, I dont see the loader and I dont see the image replacing into #current.
$('#Submit').click(function (e) {
$('#error').html("");
e.preventDefault();
code = $('#Code').val(),
$('#loader').show();
$.post('/home/foo/', { code: code },
function (data) {
$('#loader').hide();
alert(currentItem.ItemImage);
$('#current').html(currentItem.ItemImage);
How can i fix this?
What am i doing wrong?
I'm thinking you need a semicolon after this line, not a comma:
code = $('#Code').val(),
to
code = $('#Code').val();
Turns out that within css .content img {display: none} was causing loader not to show.