We Keep Coding

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

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

jQuery event fires once, then never again

I've been wrestling with a simple JQuery event handler for hours.
My event handler fires exactly once, when the page loads, and never again no matter the event or the interaction with the select box.
When deferred, the alert (when I have one) shows the first select option. When not, the alert is blank.
All I want is for the select box to load from AJAX and for a user choice to trigger another AJAX call.
HTML:
<select id="connection" name="Connection"></select>
<div id="testme" style="background: #CCC; width:100%; height:50px;position:relative;color:red">testing</div>
Javascript:
$(document).ready(function () {
// Event handler. Tried as a separate function and as a parameter to $.on(...)
function connectionSelected() {
var str = $('#connection option:selected').text();
alert(str);
$("#testme").text(str);
}
var $connectionSelect = $('#connection');
//$connectionSelect.selectmenu(); // Tried enabling/disabling
// Tried this and all JS code inside and outside of $(document).ready(...)
$.when(
$.ajax({
dataType: "JSON",
url: '#Url.Content("~/API/ConnectionHint")', // The AJAX call (using ASP Razor) works fine
success: function(data) {
// This function is always called and works
var items = [];
$.each(data, function(key, val) {
items.push("<option value='" + key + "'>" + val + "</option>");
});
$connectionSelect.append(items.join(""));
// Tried setting up the event handler here
},
error: function() {
$connectionSelect.html('<option id="-1">none available</option>');
}
})
).then(function() {
//$("#connection option").blur(connectionSelected()).change();
$("#connection").on("change", connectionSelected());
});
});
Tried dozens of variations of the event handler, several events, inside and outside of a deferred.done and deferred.then, etc.. E.g.:
$connectionSelect.selectmenu({
change: function (event, data) {
$('#connection').change(function () {
var str = "";
$('#connection').each(function () {
str += $(this).text() + "<br>";
});
$("#testme").text(str);
});
}
});
I usually write back-end code and am familiar only with portions of JQuery, and this is driving me crazy. I've looked more than 30 related question on SO and elsewhere, e.g.
Jquery event fires once
Jquery .change() function not working with dynamically populated SELECT list
http://jqueryui.com/selectmenu/#product-selection
Any ideas are appreciated.

Instead of
$("#connection").on("change", connectionSelected());
try
$("#connection").on("change", connectionSelected);
Note that in the second one I'm passing your function handler by reference, instead of invoking it.

Dealing with detached dom elements, gridster.js plugin

I am working with the gridster.js plugin, which is great, however it seems to be giving me issues when I am removing items using it's remove method. I am using its built in method called remove_all_widgets to wipe out what I currently have on the page and load in new content.
You can see it here.
fn.remove_all_widgets = function(callback) {
this.$widgets.each($.proxy(function(i, el){
this.remove_widget(el, true, callback);
}, this));
return this;
};
It loops through the widgets and calls this remove_widget as seen here:
/**
* Remove a widget from the grid.
*
* #method remove_widget
* #param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove.
* #param {Boolean|Function} silent If true, widgets below the removed one
* will not move up. If a Function is passed it will be used as callback.
* #param {Function} callback Function executed when the widget is removed.
* #return {Class} Returns the instance of the Gridster Class.
*/
fn.remove_widget = function(el, silent, callback) {
var $el = el instanceof $ ? el : $(el);
var wgd = $el.coords().grid;
// if silent is a function assume it's a callback
if ($.isFunction(silent)) {
callback = silent;
silent = false;
}
this.cells_occupied_by_placeholder = {};
this.$widgets = this.$widgets.not($el);
var $nexts = this.widgets_below($el);
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function() {
$el.remove();
if (!silent) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), wgd.size_y );
}, this));
}
this.set_dom_grid_height();
if (callback) {
callback.call(this, el);
}
}, this));
return this;
};
I have small bits of javascript to run button functions and other assorted things. I realized soon after playing with it that it leaves the full html content of the widget in a detached dom tree thus keeping the js files running. I first found this because the buttons have the same names on new pages and it was running the click functions for both the newly loaded button and the one i had taken off the screen using gridsters remove_all_widgets method.
I can track the previous javascript to an (anonymous function) in chomes dev console, and within that i can see the entire html content inside of the detached tree. I am not refreshing the pages or anything, the new content is being brought in by ajax (I set ajax cache:false as well).
Is there any way around this? Would it be possible to clear the contents of the widgets before they get stuck like this? It would be ideal if it didn't happen at all or of there was some way to get rid of them completely when they get removed.
Thank you for taking the time to read this, any insight would be greatly helpful.
As per requests her is some of the code, the click functions on the lines button for example is double firing:
$(document).ready(function() {
$(document).on("change",".accountContries",function(e){
var countryPck = $("body > .addAccountForm1").find(".accountContries").find('option:selected').attr('id');
$.ajax(
{
cache: false,
url : "/listStates/" + countryPck,
type : "GET",
beforeSend: function(){
$("body").append("<div class='loadingNow'></div>");
},
success:function(data, textStatus, jqXHR) {
$('.loadingNow').remove();
$(".accountStates").empty();
$(".accountStates").append("<option value='' selected disabled> Select a State</option>");
$.each(data.states, function(){
$(".accountStates").append("<option value=" + this.id +" id=" + this.id + ">" + this.name +"</option>");
});
},
error: function(jqXHR, textStatus, errorThrown)
{
errorOffScreen("List States by account");
}
});
});
$(document).on("touchend click", ".lines-button", function(e){
e.stopImmediatePropagation();
if($(this).hasClass("close")){
$(this).removeClass("close");
$(".widget1x1Back").next(".actionsHolder3").slideUp("fast", function() {
$(this).remove();
});
}else{
var iconsList = $(this).closest(".top1x1").next(".hdnActnLst").find(".iconsHolder3").html();
$(this).closest(".widget1x1").append(iconsList);
$(this).closest(".widget1x1").find(".actionsHolder3").hide();
$(this).closest(".widget1x1").find(".actionsHolder3").slideDown(700,"easeOutBack");
$(this).addClass("close");
}
});
});
</script>
UPDATE : it seems I only the stuff inside the <Script> tag is being kept even after the elements are .removed

Based on your comments and updates, you have Javascript in the loaded content pages. As that includes the use of delegated event handlers, that code will live on.
This is one case were you would be better off with normal non-delegated event handlers like:
$(".lines-button").bind("touchend click", function(e){
e.stopImmediatePropagation();
These bindings will terminate when the elements are removed (as they are per-element handlers).
An alternative is to not have any code in the content pages, but only in the master page, and apply code as required when loading new content.

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
}
});

why is my element not targeted when reload through AJAX

I'm using object literals on my project. I'm targeting selecting with jquery. It works fine the first time but when the part I'm targeting is reloaded with AJAX I can't target those element anymore. But I look into firebug they're there...
I'm even doing console.log() to test if my code works and it works but it just doesn't want to pick those. So in order for it to work, I have to refresh the entire browser.
Do you know what's the deal with AJAX dom reload and selectors.
I think it's something to do with the DOM reloading and redrawing itself or something along those lines...
Here is my code:
Module.editWishlistTitle = {
wishListContent: $('.mod-wish-list-content'),
title: $('.title').find('h2'),
titleTextField: $('#wishlist-title-field'),
titleInnerContainer: $('.title-inner'),
editTitleForm: $('.edit-title-form'),
submitCancelContainer: $('.submit-cancel'),
notIE9: $.browser.msie && $.browser.version < 9,
edit: function () {
var fieldTxt = this.titleTextField.val(),
editForm = this.editTitleForm,
titleParent = this.titleInnerContainer,
fieldCurrentTitle = this.title.text();
this.titleTextField.val(fieldCurrentTitle);
this.submitCancelContainer.removeClass('hidden');
if (!this.notIE9) {
editForm.css('opacity', 0).animate({ opacity: 1 }).removeClass('hidden');
titleParent.addClass('hidden').animate({ opacity: 0 });
console.log(editForm);
} else {
editForm.removeClass('hidden');
titleParent.addClass('hidden');
}
}
init: function () {
var self = this;
console.log(this.editTitleForm);
//edit
this.wishListContent.delegate('.edit-title a', 'click', function (e) {
self.edit();
e.preventDefault();
});
};

If you are replacing an element on the page, you are destroying the original reference to the element. You need to redo the reference to point to the new element.
Create a new method in your code that (re)initializes the references you need. Instead of adding them in the odject, set them in the method.
Basic idea:
Module.editWishlistTitle = {
wishListContent: $('.mod-wish-list-content'),
title: $('.title').find('h2'),
//titleTextField: $('#wishlist-title-field'),
...
...
initReferences : function(){
this.titleTextField = $('#wishlist-title-field');
},
...
...
init: function () {
this.initReferences();
...
...
And when your Ajax call comes back you just need to call initReferences again.

After DOM ready, if you inject any data / class / id will not be available in DOM, so better you use live or delegate to get your new data access.
http://api.jquery.com/delegate/
Best to use delegate, that will take care your new data loaded after dom ready, that way you can avoid to refresh /reload your page.