ASP.NET JQuery .click() not working in IE11 - javascript

The following .click()-method is fired in Chrome without problems.
In Internet Explorer it is only fired if I refresh the page (F5). If I access the page by entering the url (or redirected by a buttonclick from an other page) the .click-method is NOT fired.
But if I put an alert("?") before the .click() it works in IE too!
Why does it not work correctly in IE? I can't let the alert() be there...
$(window).load(function() {
//Fake click on the last used Tab
alert("?");
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
});
=> The available (clickable) tabs are created in
jQuery(document).ready(function($) {
...
});
EDIT From comments:
They are created inside the .read(function($) in this way:
$("#HillbillyTabs").append('<li>' + title + '</li>').after('<div id="Tab' + upperIndex + '"></div>');
After Container is created after the script:
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>

Do not try to inject the function call, but rather add an event listener to the code. For example: (I made up some variables as your code did not indicate some things here)
var upperIndex = $('#tabsContainer').find('ul').length;
var title = "mytitle";
var newHeadId = 'TabHead' + upperIndex;
var newTabId = 'Tab' + upperIndex;
$("#HillbillyTabs").append('<li>' + title + '</li>').after('<div id="' + newTabId + '"></div>');
$("#HillbillyTabs").on('click', '#' + newHeadId, function() {
console.log(this.id);
SetCookie(this.id);
});

It seems IE does not recognize :
$(window).load()
You could try :
window.onload = function() {
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
};

Got the solution.
Curiously the fadeIn in the .load doesn't work for IE too (like the .click)
$(window).load(function() {
//Fake click on the last used Tab
alert("?");
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
// When the page has loaded in Chrome
$("#DeltaPlaceHolderMain").fadeIn(0);
});
For fading in I had to put the method immediately after the creation-method for the tabs (inside the .ready()) instead of the end of .ready().
There is now also the .click and it works now for IE.
jQuery(document).ready(function($) {
setTimeout(function() {
...
//Creation of tabs
$("#tabsContainer").tabs();
//Fake click on the last used Tab
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
// When the page has loaded in IE
$("#contentBox").fadeIn(0);
}, 0);
//.click NOT here
});
Thanks for your fast responses and tips!
Kind regards

Related

Call user defined jQuery function with JS

I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best
You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}

jQuery Modal and FancySelect Plugin

I have the jQuery FancySelect plugin installed. Works fine. Now I am trying to call it in a modal popup, but it does not work. This is the code in the parent window:
<script src="/js/fancySelect.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.fancyselect').fancySelect();
var repoName = 'fancyselect'
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
}
else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
Adding class="fancyselect" to any select in the parent works. However, does not work if added to modal popup select.
Just speculating here as you did not show the HTML or the JS logic that is dealing with the popup creation. Are the elements where you wan to apply the FancySelect method, from the popup plugin already on the page when you call the:
$('.fancyselect').fancySelect();
?
If the elements are added after the page load they won't be picked up by that statement. When displaying the popup you would do somehting like
$('#popupcontainer .fancyselect').fancySelect();
So they will all the required code will be applied on that elements as well.
Update:
Following the update give in your original post, you can add something like: [not tested]
onLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
$(wrap).find('.fancyselect').fancySelect();
}
This should be triggered after the popup has been populated.

Targetting elements loaded with jquery load()

I am doing a website where all internal links make the current page fade out and the new contents fade in. I do that with jquery load(). The loading and fading part works fine like this:
var $mainContent = $("#ajaxcontainer"),
$internalLinks = $(".internal"),
URL = '',
$ajaxSpinner = $("#loader"),
$el;
$internalLinks.each(function() {
$(this).attr("href", "#" + this.pathname);
}).on('click', function() {
$el = $(this);
URL = $el.attr("href").substring(1);
URL = URL + " #container";
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(URL, function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
});
});
});
As you can see, I am targetting all internal links by a class I've given them (.internal). My problem is that once content gets loaded with ajax, I am not able to target this new content with my jquery, and so the $internalLinks.each() and so on gets broken, meaning that the site just reverts back to the default link behavior.
Another thing which is related to this, is that I want to be able to target this newly loaded content with the jquery.masonry plugin. That also isn't possible the way I'm doing things now.
Thank you very much.
When you update the page, the old .internal links are removed, so the event handler attached to them won't work. Change your code to use event delegation:
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
$(document).on('click', '.internal', function() {
$el = $(this);
URL = $el.attr("href").substring(1);
URL = URL + " #container";
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(URL, function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
});
});
});
As you see, I refresh the attribute href of each link after a refresh, too.
** EDITED ** I was missing changing the href attribute the first time. Now it should work!

Number, hover (etc) effect not work after Ajax Load More

I'm using Drupal 7 and get my content with View module on page. And my pager Views Load More module. And my thumbnail effect hover, shadow etc. Image hover using this code:
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
And getting number on my current thumbnail. This code:
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
Everything is OK. All effects on start page. But when click Load More button, my effects can't work another page.
How do i solve this problem? Thanks.
The reason why it stops working is due to the hover function (and your other scripts/functions) only works on existing elements. So if you add something with ajax, it wont apply to that unless you reload the script after the ajax load.
Another option is to use live() or on() (for the hover part. On is the new version of live, added in jQuery 1.7).
Live and on listens for any existing or future elements.
A live script would look something like this:
$(".yourElement").live({
mouseenter:
function () {
// Do something
},
mouseleave:
function () {
// Do something
},
mousemove:
function () {
// Do something
}
});

Hover effect not working from the second time in Safari

I'm facing a weird problem with safari
I'm now developing a website that loads its contents with Ajax I'm applying this by using Hashchange methodology and when hashchange
I'm getting the url and then load the content for the page
jQuery(window).bind('hashchange', function () {
url = window.location.hash.substring(1);
if (!url) {
return;
}
var tsTimeStamp= new Date().getTime();
jQuery.get(url, { action: "get", time: tsTimeStamp,"ajaxed": "true"} , function (data, status, xmlHttp) {
var container = jQuery("#hidden");
container.html(xmlHttp.responseText);
var content = jQuery(".inner", container).html();}
and then after loading the content I'm applying some jquery stuff like
var ids = " ";
var ids_2 = " ";
for (var i = 0; i <= jQuery(".cats").length; i++) {
ids += "#c" + i + ",";
ids_2 += "#l" + i + ",";
}
ids = ids.substr(0, (ids.length) - 1);
ids_2 = ids_2.substr(0, (ids_2.length) - 1);
jQuery(ids).hover(function () {
href = jQuery(this).attr("href");
id = jQuery('a[href="' + href + '"]').attr("id");
jQuery("img").not(jQuery("img."+id)).addClass("op");
}, function () {
time = setTimeout(remove, 200);
});
jQuery(ids_2).hover(function () {
clearTimeout(time);
jQuery("img.op").removeClass("op");
href = jQuery(this).attr("href");
id = jQuery('a[href="' + href + '"]').attr("id");
jQuery("img").not(jQuery("img." + id)).addClass("op");
}, function () {
jQuery("img.op").delay(200).removeClass("op");
});
function remove() {
jQuery("img.op").removeClass("op");
}
The above code is applying hover over effect on map areas for images
(this code is applicable to 4 pages).
All the above code is working fine with all the browser except Safari
The problem is when the first page that contains the maps loaded the code is working fine but when you load another page contains the same areas it will stop working until the whole page being refreshed.
seems like it caches the handler for the first time and then does not apply it to the new selectors
Keep in mind that when Alert ids & ids_2 it gives the correct values but when using alert inside the .hover it does not fire in the second time.
I know its complicated but really I'm stuck with this issue.
Well, it would be better to have small code snippets, but from what I can see you're having problem on binding jQuery handlers on newly created elements. To solve this problem you have to use the jQuery .live().
From jQuery documentation:
This method is a variation on the
basic .bind() method for attaching
event handlers to elements. When
.bind() is called, the elements that
the jQuery object refers to get the
handler attached; elements that get
introduced later do not, so they would
require another .bind() call.
The .live() method provides an
alternative to this behavior. To bind
a click handler to the target element
using this method:
$('.hoverme').live('hover', function(){
// Live handler called.
});
And then later add a new element:
$('body').append('<div class="hoverme">Another target</div>');
Then clicks on the new element will
also trigger the handler.

Categories