We Keep Coding

JQuery hashchange event - where to place?

I am using JQuery hashchange event.
$(window).on('hashchange', function () {
//do something
});
When my url contains a hash during first time load I understand that this needs to be triggered with $(window).hashchange();
Can I place it inside document ready instead?
$(document).ready(function () {
$(window).on('hashchange', function () {
//do something
});
});

You can trigger it manually like:
$(document).ready(function () {
$(window).on('hashchange', function () {
//do something
}).trigger('hashchange');
});
Or you can do it like:
$(document).ready(function () {
//attaching the event listener
$(window).on('hashchange', function () {
//do something
});
//manually tiggering it if we have hash part in URL
if (window.location.hash) {
$(window).trigger('hashchange')
}
});

Pass variable relative to the selector to multiple jQuery events

I'm looking for a way to pass a variable that is relative to the element to both mouseenter and mouseleave events. For example, if I had:
jQuery('.element').on({
mouseenter: function () {
var $child = jQuery(this).find('.child');
$child.fadeIn();
},
mouseleave: function () {
var $child = jQuery(this).find('.child');
$child.fadeOut();
}
});
Is there a way to avoid defining the $child variable twice? I was able to figure this out using .hover(), however I am now unable to use that as I am calling it on dynamically generated elements, for which .hover() will not work.

You can use this way to delegate both events:
jQuery(document).on("mouseenter mouseleave", ".element", function(e){
jQuery(this).find('.child').fadeToggle();
// you can check for e.type for more complex logic
});
The syntax to delegate with different handlers is:
jQuery(document).on({
mouseenter: function () {
//...
},
mouseleave: function () {
//...
}
}, ".element");

Use something like that:
jQuery('.element').on({
mouseenter: function (e) {
var ele = e.currentTarget;
ele.fadeIn();
},
mouseleave: function (e) {
var ele= e.currentTarget;
ele.fadeOut();
}
});

You could reuse the same function in both events, something like:
jQuery('.element').on({
mouseenter: function () {
handleFade("enter", jQuery(this));
},
mouseleave: function () {
handleFade("leave", jQuery(this));
}
});
function handleFade(state, $elem){
var $child = $elem.find('.child');
if(state=="enter"){
$child.fadeIn();
} else if(state=="leave"){
$child.fadeOut();
}
}

Blur/focus event (delegeted) on inputs in iframe

I have an iframe on a page. In iframe there are few inputs in a form tag and more can be loaded via ajax.
I'm tring to bind blur or focus event to this inputs but it doesn't work. Other events, such as click works very well.
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find("input").focus(function() { // works but this is only for existing inputs
alert(1);
});
$(this).contents().find("form").on("click", "input", function (e) { // works
alert(1);
});
$(this).contents().find("form").on("focus", "input", function (e) { // doesnt work
alert(1);
});
});
});
});
Thanks in advance.

To select inputs and forms inside the iframe try this:
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find('body').find("input").blur(function() {
alert(1);
});
});
});
});

jquery - on submit form before form is rendered

I am using this code:
$(document).ready(function () {
$("#step1_next").validate({
submitHandler: function(form) {
$.post('step2.php', $("#step1_next").serialize(), function(data) {
$('#step2_div').html(data);
$("#step2_form").on("submit", function() {
$.post('../model/step2.php', $("#step2_form").serialize(), function(data) {
$('#step2_controller').html(data);
});
return false;
});
});
}
});
});
Basically, what I wanted to do is that when step2.php is rendered, another ajax function is attached onto step2_form (inside step2.php).
This code doesn't work probably because "step2_form" isn't loaded yet. What can I do?

Use event delegation using .on()
$(document).ready(function () {
$("#step1_next").validate({
submitHandler: function(form) {
$.post('step2.php', $("#step1_next").serialize(), function(data) {
$('#step2_div').html(data);
$(document).on("submit", "#step2_form", function() {
$.post('../model/step2.php', $("#step2_form").serialize(), function(data) {
$('#step2_controller').html(data);
});
return false;
});
});
}
});
});

Alert after second click

I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.

How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>

Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click