I have a table in which I can click the rows () with the class .details. This will show a div with id="details" with extra information about the element in the row.
I have the following code.
$('.details').click(function () {
$('#details').slideUp('slow');
$('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
$(this).slideDown('slow');
});
});
However I would like the loading (.load()) to happen after the .slideUp() due to the fact that the load starts while the element is sliding up (which looks wierd). I have tried to add it as a callback function the following way:
$('#details').slideUp('slow', function () {
$('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
$(this).slideDown('slow');
});
});
However that stops the code from working. Does anyone have an idea on how to solve this?
Thanks.
EDIT:
My table row looks as follows:
<tr class="details" data-id="#item.VehicleID" data-url="#Url.Action("Details", "Vehicle")">
</tr>
My div looks as follows:
<div id="details"></div>
One problem i see with your code is, you are using $(this).data('url') to get the url data attribute value set to the tr which was clicked. but $(this) is actually the $('#details') there because you are accessing it inside the slideUp of $('#details'), which does not have the url data attribute. So you must be getting an error
The solution is to assign the $(this) (clicked row) to a local variable and use that inside your other callback function.
This should work.
$(function () {
$('.details').click(function () {
var _this = $(this);
$('#details').slideUp('slow', function () {
$('#details').load(_this.data('url'), { id: _this.data('id') }, function () {
$('#details').slideDown('slow');
});
});
});
});
Related
I have different "Profiles" in a Json-File. In an index.html different profile cards are shown and filled with the information of the Json-File. When you click on a Profil (Profil-Card) a detailed profile.html will be loaded and the function initateProfile will be executed.
$(document).on("click", ".profile-card", function () {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(this).data("profileid"));
});
});
I want to transmit the content of the profileid-class, which is the index for the Json-File.
function initiateProfile(id) {
var profile_data;
$.getJSON('data/profiles.json', function (data) {
profile_data = data[id];
$('.trn-name').text(profile_data.name);
$('.trn-studies').text(profile_data.studies);
$('.trn-stage').text(profile_data.stage);
});
}
Unfortunatly the id-variable is undefined. So the function can't get the information of the Json-File. What's the problem?
Thx
The issue is because this within the load() callback handler function is not the element which raised the event. It runs under a different scope. To fix this you need to save the element reference to a variable in the scope of the click handler, and use that within the callback, something like this:
$(document).on("click", ".profile-card", function () {
var profileId = $(this).data('profileid');
$('#page-content').load("sections/profile.html", function () {
initiateProfile(profileId);
});
});
Assuming that the data-profileid attribute is defined on the element which has the class .profile-card:
Your problem is this.
$(document).on("click", ".profile-card", function () {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(this).data("profileid")); // "this" points to the element with id "page-content"
});
});
One solution would be to use event.currentTarget:
$(document).on("click", ".profile-card", function (event) {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(event.currentTarget).data("profileid"));
});
});
On Ajax Success, li element is appended to ul.
$.ajax({
..
success: function (response) {
response.data.forEach(function (x) {
$("#ulMain").append('<li class="liSub">' + x + '</li>');
}
});
It creates sth like this:
<ul>
<li class="liSub">ABC</li>
<li class="liSub">BCF</li>
</ul>
I want the dynamically added li elements to fire an alertbox on click.
But the code below is not being hit.
$(document).ready(function () {
$(".liSub").on("click", function () {
alert("Fired");
});
});
Interestingly, If I run the document.ready section of the code using F12 - Console, it works. What stops it run normally, and lets it run through console?
You missed . prefix for class and use event delgation for created dynamic dom elements
$("ul").on("click", '.liSub', function () {
alert("Fired");
});
Since it is an element loaded dynamically, try delegating it:
$(document).ready(function () {
$("body").on("click",".liSub", function () {
alert("Fired");
});
});
It is because when your page is ready, the ajax call is not finished. You can try this :
$(document).ready(function () {
$("#ulMain").on("click",".liSub", function () {
alert("Fired");
});
});
It will bind the click to the #ulMain which exists at the execution and will delegate the event to .liSub at the moment of the click. It creates only one binding which is also better for global performance.
I'm including the Javascript (jQuery really) in order to change the img src in question from one image to another image on hover.
However this isn't working - the images don't change at all.
My only guess is that the unnamed functions aren't doing what I want them to do.
My knowledge of jQuery is still somewhat new, so I'm stumped here and can't find any resources on what I might be doing wrong.
jQuery("#fbicon").hover(
function () {
jQuery(this).attr("src","images/nohoverfb.png");
},
function () {
jQuery(this).attr("src","images/fb.png");
});
jQuery("#linkedinicon").hover(
function () {
jQuery(this).attr("src","images/nohoverlinkedin.png");
},
function () {
jQuery(this).attr("src","images/linkedin.png");
});
jQuery("#googleplusicon").hover(
function () {
jQuery(this).attr("src","images/nohovergoogle+.png");
},
function () {
jQuery(this).attr("src","images/google+.png");
});
jQuery("#youtubeicon").hover(
function () {
jQuery(this).attr("src","images/nohoveryoutube.png");
},
function () {
jQuery(this).attr("src","images/youtube.png");
});
jQuery("#twittericon").hover(
function () {
jQuery(this).attr("src","images/nohovertwitter.png");
},
function () {
jQuery(this).attr("src","images/twitter.png");
});
jQuery("#emailicon").hover(
function () {
jQuery(this).attr("src","images/nohoveremail.png");
},
function () {
jQuery(this).attr("src","images/email.png");
});
Here is an example of the HTML:
<span class="icon"><a target="_blank" href="http://www.facebook.com/facebookname"><img id="fbicon" src="http://www.website.com/sites/all/themes/website/images/fb.png" style="height:48px;width:48px"></a></span>
I think you are making a mistake in order of functions:
Try this:
$("#fbicon").hover(
function () {
jQuery(this).attr("src","images/fb.png"); //hover in function
},
function () {
jQuery(this).attr("src","images/nohoverfb.png"); //hover out function
});
Change all images accordingly in your code, and that should do what you want it to.
See the demo fiddle which changes background css to red on hover and blue when mouse leaves that div.
Hope it helps.
EDIT
I made a fiddle, with your html, which uses 2 images from internet. See that images are changed in Hover in, Hover out.
HTML:
<span class="icon"><a target="_blank" href="http://www.facebook.com/facebookname"><img id="fbicon" src="http://s2.reutersmedia.net/resources/r/?m=02&d=20141020&t=2&i=985015946&w=580&fh=&fw=&ll=&pl=&r=LYNXNPEA9J0XH" style="height:48px;width:48px"></a></span>
jQuery:
$("#fbicon").hover(
function () {
jQuery(this).attr("src","http://www.gizbot.com/img/2014/10/14-1413281227-sonyxperiaz3cropedimages600x450withwatermark3.jpg"); //hover in function
},
function () {
jQuery(this).attr("src","http://s2.reutersmedia.net/resources/r/?m=02&d=20141020&t=2&i=985015946&w=580&fh=&fw=&ll=&pl=&r=LYNXNPEA9J0XH"); //hover out function
});
I am looking to load json data as html as show in this fiddle and below.
(function () {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function (data) {
$.each(data.items, function (i, item) {
$("<img>").attr("src", item.media.m).appendTo("#images");
if (i === 3) {
return false;
}
});
});
})();
jQuery("#images img").on("click", function (event) {
console.log('aaa');
});
I can get the json to load however I can't then get events such as on click to work with data that has been loaded with json, what am I doing wrong here?
You need to delegate your click events. They're being bound to items in the DOM, and then you're adding new items, and the events are not bound to them.
Try replacing your click binder with this:
jQuery(document).on("click", "#images img", function (event) {
console.log('aaa');
});
You'll want to replace document with the lowest-level consistent wrapper to avoid redundant traversal on click.
try this instead:
$("#images").on("click", "img", function (event) {
console.log('aaa');
});
the element with the id images exists when your event binding is attached, but the image elements do not. So using the on method, you can pass the img elements as a second parameter so that all img elements that are added after the page load are properly bound to this event handler.
When a div is opnened i want to load html content into it via ajax. This is the code im working with:
http://jsfiddle.net/uhEgG/2/
$(document).ready(function () {
$('#country').click(function () {
$("#country_slide").slideToggle();
});
$('#close').click(function (e) {
e.preventDefault();
$('#country_slide').slideToggle();
});
});
The code I think I need is this:
$.ajaxSetup ({
cache: false
});
var ajax_load = "Loading...";
var loadUrl = "www.test.com/site.html";
$("#load_basic").click(function(){
$("#country_slide").html(ajax_load).load(loadUrl);
})
How can I make it work to make it load up when the div is opened by the code above, firstly because it is setup for a click function not a toggle function, and second, because the toggle doesn't seem to be able to distinguish if the div is open or not.
to make it load up when the div is opened by the code above
$("#country_slide").slideToggle(function(){
if($(this).is(':visible')){
$("#country_slide").html(ajax_load).load(loadUrl);
}
});
Try to delegate the events.. Looks like the element is not yet available in the DOm when the event is bound
Replace
$('#country').click(function () {
with
$(staticContainer).on('click', '#country', function () {
staticContainer is the element which is already in your DOM when the event is bound and the ancestor of country
Either store the slide state in a variable or in a data attribute liek this:
<div id="country_slide" data-state="1">
And make something like this:
$('#country').click(function () {
$("#country_slide").slideToggle();
if ($("#country_slide").attr("data-state") == 0)
$("#country_slide").html(ajax_load).load(loadUrl);
});