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);
});
});
});
});
Related
I'm trying to display a spinner instigator while modal content is loading using bootstrap v5 modal and jQuery I create an example but it has some issues.
The spinner instigator not displaying again while I closed the modal it displays only in the first time.
$(window).on("load", function() {
if ($(".modal").length) {
$(".modal").modal("show");
$(".modal").on("shown.bs.modal", function(e) {
e.preventDefault();
if ($(".spinner").length) {
$(".spinner").delay(3000).fadeOut(500, function() {
$(this).remove();
});
}
});
$(document).on("click", ".btn", function(e) {
$(".modal").on("shown.bs.modal", function(e) {
e.preventDefault();
if ($(".spinner").length) {
$(".spinner").delay(3000).fadeOut(500);
}
});
$(".modal").on("hidden.bs.modal", function(e) {
e.preventDefault();
if ($(".spinner").length) {
$(".spinner").delay(3000).fadeOut(500);
}
});
});
}
});
Live Example: https://codepen.io/themes4all/pen/oNWeYzp
Issues
$(this).remove() - removes the spinner completely. So the spinner element won't be available on the modal shown again.
Unnecessary code and conditions removed
Solution
Instead of removing the spinner element just hide it using the d-none class
CodePen
$(function () {
$(".modal").on("show.bs.modal", function (e) {
$(".spinner")
.removeClass("d-none")
.delay(3000)
.fadeOut(500, function () {
$(this).addClass("d-none");
});
}).modal("show");
});
I have put together some simple code as an excercise and seem to be having a problem enabling a click event using .on('click'); method.
The .off event works fine but when i click the $('#bdReset').click(function (e) { it does not turn the click event on. I would be grateful if someone could point out my error or offer some advice as to how I can overcome this error. Many thanks
JS Version: jquery-1.11.1.min.js
Fiddle
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").off("click").addClass('disable');
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").on("click").removeClass('disable').css('cursor', 'pointer');
});
});
Try the sample code below
// Disable click event on #srcsubmit
$(function () {
$('#dept').on('change', function () {
depts = $('#dept option:selected').html();
$("#srcsubmit").prop('disabled', true);
});
});
// Enable click event on #srcsubmit
$(function () {
$('#bdReset').click(function (e) {
//e.preventDefault();
$("#srcsubmit").prop('disabled', false);
});
});
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')
}
});
i need help with closing a div tag that has been expanded using jquery when a "read more" link has been clicked.
I can get one to work but not the rest.
I have attached a fiddle of my code:
http://jsfiddle.net/R9LvG/
This is the first time i have ever used jquery and i am very new to it so please bear with me.
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
As all those part of code are crappy, I would use :
$(document).ready(function () {
$('[class^="clickme"]').click(function (e) {
e.preventDefault();
$(this).next().slideToggle("slow");
});
});
Simpler, cleaner.
:)
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
})
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
JsFiddle
Also:
remove the '#' href to prevent it from jumping to the top of the page whenever it is clicked
<a class="clickme"><u><b>Read more</b></u></a>
To your clickme css class:
.clickme{cursor:poniter}
and then add a hover event:
.clickme:hover{color:#F00}
You close it 2 times which means it opens up again
Remove this at the end
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
Don't use dom ready functions more times in a single page.
Use Multiselector for click functions
For examples
$(document).ready(function () {
$("#selector1,#selector2, ... #selector-n").click(function () {
$(".content").slideToggle("slow")
});
Please use only one
$(document).ready(function () {
$(".clickme2, .clickme3, .clickme4, .clickme5").click(function () {
$(this).slideToggle("slow");
});
I didn't find any problem in you code.You modify the anchor tab by removing the href="" element, this will prevent moving the page to top each time you click on Read more.
<a class="clickme2" ><u><b>Read more</b></u></a>
And include the jQuery script in you page by copyng the below content in your page,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
And you can update the script for expanding and compressing as below since you are dealing with different divs with different classes,
<script>
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
</script>
need help.. this is my fiddle.
it shows a pop up on first load..
the problem is when i click on the pop up it hides..how do i prevent this.. also when i click on a link it should show the pop up again and when i click outside of the pop up it will hide..
Script
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$("#popupBoxClose").click( function () {
alert('hello');
unloadPopupBox();
});
$("#popup_box").click( function () {
e.stopPropagation();
});
$('#global_wrapper').click( function() {
unloadPopupBox();
});
$('.secure').click( function() {
loadPopupBox();
});
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').show();
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
You aren't passing the event to the click handler, try updating this event handler, note the e passed as a parameter to the function:
$("#popup_box").click( function (e) {
e.stopPropagation();
});