jQuery works fine in chrome fails in IE9/IE8 etc - javascript

I'm using the following jquery (theres a lot of it, sorry) to load in a dynamic dropdown and to update when one of them changes. In IE it loads the dropdowns at the start, but doesn't seem to fire on the onchange events (even in IE9)
Any help will really be appreciated
<script type="text/javascript">
$(document).ready(function() {
<%= loadValues%>
$('.dropone').change(function() {
var tmpRoomID = $('.drpChg1').val();
$(".drpChg2").empty();
$(".drpChg2").load("ajaxdropdown.aspx?drpType=room&roomid=" + tmpRoomID, function() {
updateTB()
});
});
$('.droptwo').change(function() {
updateTB()
});
$('.dropfive').change(function() {
updateTB()
});
$('.dropfour').change(function() {
updateTB()
});
$('.dropthree').change(function() {
var tmpRoomID = $('.drpChg3').val();
$(".drpChg4").empty();
$(".drpChg4").load("ajaxdropdown.aspx?drpType=cat&catID=" + tmpRoomID, function() {
updateTB()
});
$(".drpChg5").load("ajaxdropdown.aspx?drpType=subcat&subcatID=" + tmpRoomID, function() {
updateTB()
});
});
function updateTB() {
$('#drop1').val($(".drpChg1").val());
$('#drop2').val($(".drpChg2").val());
$('#drop3').val($(".drpChg3").val());
$('#drop4').val($(".drpChg4").val());
$('#drop5').val($(".drpChg5").val());
}
function loadValues() {
var roomID = "0"
$('.dropone').load('ajaxdropdown.aspx', function() {
$('#drop1').val($(".drpChg1").val());
});
$('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID + '', function() {
$('#drop2').val($(".drpChg2").val());
});
$('.dropthree').load('ajaxdropdown.aspx?drpType=type' + '', function() {
$('#drop3').val($(".drpChg3").val());
});
$('.dropfour').load('ajaxdropdown.aspx?drpType=cat&catID=' + roomID + '', function() {
$('#drop4').val($(".drpChg4").val());
});
$('.dropfive').load('ajaxdropdown.aspx?drpType=subcat&subcatID=' + roomID + '', function() {
$('#drop5').val($(".drpChg5").val());
});
}
function loadNewValues() {
var roomID = "0"
$('.dropone').load('ajaxdropdown.aspx', function() {
$('.drpChg1').val($("#drop1").val());
});
$('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID + '', function() {
$('.drpChg2').val($("#drop2").val());
});
$('.dropthree').load('ajaxdropdown.aspx?drpType=type' + '', function() {
$('.drpChg3').val($("#drop3").val());
});
$('.dropfour').load('ajaxdropdown.aspx?drpType=cat&catID=' + roomID + '', function() {
$('.drpChg4').val($("#drop4").val());
});
$('.dropfive').load('ajaxdropdown.aspx?drpType=subcat&subcatID=' + roomID + '', function() {
$('.drpChg5').val($("#drop5").val());
});
}
});
</script>

Try out those links you refer to as normal links.
Sometimes there's a confusion between browsers needing a link to:
Somefile.asp?blah=yaddah
/Somefile.asp?blah=yaddah
./Somefile.asp?blah=yaddah
I see this with CSS sometimes.

Related

when use click of item it not go to the JQ function

I update a version of all plugins, PHP, Jquery in my site
and now this code doesn't work.
when i go to this line :
$('#order_line_items .item .create-discount-for-item-'+ order_item_id).click();
it need go to this line:
$('body').on('click', this.selector, function(e)
but it no go there, and I don't have any errors
modalDiscountItem function:
$.fn.modalDiscountItem = function (options){
var settings = $.extend({
onChargeSuccess: false,
onChargeFailed: false,
orderId: 0,
order_item_id : false,
}, options);
var deferred = $.Deferred();
$('body').on('click', this.selector, function(e){
e.preventDefault();
var url = product_picker.ajax_url + "?action=discount_for_item";
url += "&order_id=" + settings.orderId;
url += "&order_item_id=" + settings.order_item_id;
url += "&TB_iframe=true&width=800&height=700";
tb_show("Discount for Item ", url);
icreditChargeModal.success = function(){
tb_remove();
deferred.resolve();
};
icreditChargeModal.failed = function(){
tb_remove();
deferred.fail()
}
});
return deferred;
}
anther function:
order_items_container.on('click', '.create-discount-for-item', function (e) {
var order_id = $('#post_ID').val();
var order_item_id = $(this).closest('tr.item').data('order_item_id');
if (!$('#order_line_items .item .create-discount-for-item-' + order_item_id).hasClass('active')) {
var deferred = $('#order_line_items .item .create-discount-for-item-' + order_item_id).modalDiscountItem({
orderId: order_id,
order_item_id: order_item_id
});
deferred.then(function () {
location.reload(true);
}, function () {
});
}
$('#order_line_items .item .create-discount-for-item-' + order_item_id).click();
$('#order_line_items .item .create-discount-for-item-' + order_item_id).addClass('active');
});
the output of $('#order_line_items .item .create-discount-for-item-' + order_item_id).length is 1

Show No record message for search on textbox

I have a textbox which I use for filtering gridview. IT filters properly whenever I add proper text. But when I dont add proper text what I want is to show some alert as, Invalid Record.
Below is my code
$(function () {
$('.field-style').each(function (i) {
$(this).quicksearch("[id*=grdSapDetails] tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
});
Please suggest what to do
UPDATE
I have added my alert message in noResults like below in quicksearch.js but still it is not giving alert.
var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({
delay: 100,
selector: null,
stripeRows: null,
loader: null,
noResults: 'tr#noresults',
matchedResultsCount: 0,
bind: 'keyup',
onBefore: function () {
return;
},
You can use the Jquery to search the Grid View and based on the Row Filter count you can show the alert message:
function SearchGrid(txtSearchSAP, grdSapDetails) {
if ($("[id *=" + txtSearchSAP + " ]").val() != "") {
var count = 0;
$("[id *=" + grdSapDetails + " ]").children
('tbody').children('tr').each(function () {
$(this).show();
});
$("[id *=" + grdSapDetails + " ]").children
('tbody').children('tr').each(function () {
var match = false;
$(this).children('td').each(function () {
if ($(this).text().toUpperCase().indexOf($("[id *=" +
txtSearchSAP + " ]").val().toUpperCase()) > -1) {
match = true;
count++;
return false;
}
});
if (match) {
$(this).show();
$(this).children('th').show();
}
else {
$(this).hide();
$(this).children('th').show();
}
});
$("[id *=" + grdSapDetails + " ]").children('tbody').
children('tr').each(function (index) {
if (index == 0)
{
$(this).show();
}
});
if(count==0)
{
alert("No Matching Records");
}
}
else {
$("[id *=" + grdSapDetails + " ]").children('tbody').
children('tr').each(function () {
$(this).show();
count=0;
});
}
}
$(document).on("keyup", function () {
SearchGrid('txtSearchSAP', 'grdSapDetails');
});
Here is the working Fiddle
I can't understand how are you merging server side and client side code.
You are talking about server control (GridView) so you can use the EmptyDataText property.
https://msdn.microsoft.com/it-it/library/system.web.ui.webcontrols.gridview.emptydatatext(v=vs.110).aspx
Client side you can work on document ready: counting visible rows and showing a message.

unable to place javascript into if else statement

So I have this nifty little if else statement prepared for i.e9 being a zombie browser that doesn't support things like css3 animations (generally) this is the if statement ....
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if (ms_ie) {
} else {
}
$('.submenu-ctn').fadeTo(3000, 1);
I am trying to fit this script into the if else statement...
$(document).ready(function() {
$("body").on("click", ".slide", function(e) {
e.preventDefault();
$("#mission,#overview,#music,#potential,#people,#expression,#ethos,#cpd,#workshop,#team,#referrals,#local-links,#family,#mental,#palliative,#autism,#schools,#dementia,#private,#acreditations,#definitions,#research,#contact,#email,#phone,#contact-form,#finley,#councelling,#music-performance,#community-music,.slides").addClass("bounceOutUp");
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
});
so that it looks like this ....
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if (ms_ie) {
$("body").on("click", ".slide", function(e) {
e.preventDefault();
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
} else {
$("body").on("click", ".slide", function(e) {
e.preventDefault();
$("#mission,#overview,#music,#potential,#people,#expression,#ethos,#cpd,#workshop,#team,#referrals,#local-links,#family,#mental,#palliative,#autism,#schools,#dementia,#private,#acreditations,#definitions,#research,#contact,#email,#phone,#contact-form,#finley,#councelling,#music-performance,#community-music,.slides").addClass("bounceOutUp");
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
But for some reason it doesn't work.. I took out the document.ready bit and i don't think that is the problem but unsure.. Can someone help ?
HOOORAY !!
So basically this is the solution, the closing braces needed to be inside the if and else parts that are now split naturally....
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
$("body").on("click", ".slide", function(e){
e.preventDefault();
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
}else{
$("body").on("click", ".slide", function(e){
e.preventDefault();
$("#mission,#overview,#music,#potential,#people,#expression,#ethos,#cpd,#workshop,#team,#referrals,#local-links,#family,#mental,#palliative,#autism,#schools,#dementia,#private,#acreditations,#definitions,#research,#contact,#email,#phone,#contact-form,#finley,#councelling,#music-performance,#community-music,.slides").addClass("bounceOutUp");
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
}
This is a great little method of running browser specific code, you should check it out!

JavaScript Refactoring / Avoid Repitition

I need to refactor this to avoid code repetition.
$('#showmore-towns').toggle(
function() {
$('.popularTownsAdditional').show();
console.log(this);
$('#showmore-town .showless').show();
$('#showmore-town .showmore').hide();
$('#showmore-town').removeClass('sd-dark28').addClass('sd-dark28down');
return false;
},
function() {
$('.popularTownsAdditional').hide();
$('.showless').hide();
$('.showmore').show();
$('#showmore-towns').addClass('sd-dark28').removeClass('sd-dark28down');
});
$('#showmore-cities').toggle(
function() {
$('.popularCitiesAdditional').show();
$('#showmore-cities .showless').show();
$('#showmore-cities .showmore').hide();
$('#showmore-cities').removeClass('sd-dark28').addClass('sd-dark28down');
return false;
},
function() {
$('.popularCitiesAdditional').hide();
$('#showmore-cities .showless').hide();
$('#showmore-cities .showmore').show();
$('#showmore-cities').addClass('sd-dark28').removeClass('sd-dark28down');
});
basically, it shows the same functionality but only on different divs with different IDs.
Probably just need to reference a named function or two instead of the anon ones.
function showStuff(typeToShow) {
$('.popular' + typeToShow + 'Additional').show();
$('#showmore-' + typeToShow + .showless').show();
$('#showmore-' + typeToShow + .showmore').hide();
$('#showmore-' + typeToShow).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
}
function hideStuff(typeToHide) {
$('.popular' + typeToHide + 'Additional').hide();
$('#showmore-' + typeToHide + .showless').hide();
$('#showmore-' + typeToHide + .showmore').show();
$('#showmore-' + typeToHide ).addClass('sd-dark28').removeClass('sd-dark28down');
}
NOTE: a) You could probably make these methods a bit slicker, but you get the idea!
NOTE: b) You'd need to rename '#showmore-town' to '#showmore-towns' (with an S) if you want to use the substitution suggested.
Then in your toggle you could reference these functions:
$('#showmore-towns').toggle(showStuff(towns),
hideStuff(towns));
$('#showmore-cities').toggle(showStuff(cities),
hideStuff(cities));
I mean...if it's always going to start with #showmore-...we can work it down
$('[id^=showmore-]').toggle(
function() {
var id = $(this).prop('id');
id = id.split('-')[1];
var upperID = id.charAt(0).toUpperCase() + id.slice(1);
$('.popular'+upperID+'Additional').show();
$('#showmore-'+id+' .showless').show();
$('#showmore-'+id+'.showmore').hide();
$('#showmore-'+id).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
},
function() {
var id = $(this).prop('id');
id = id.split('-')[1];
var upperID = id.charAt(0).toUpperCase() + id.slice(1);
$('.popular'+upperID+'Additional').hide();
$('#showmore-'+id+' .showless').hide();
$('#showmore-'+id+' .showmore').show();
$('#showmore-'+id).addClass('sd-dark28').removeClass('sd-dark28down');
});
you could do:
(function() {
$('#showmore-towns').toggle(
function() { showmorelessOn('#showmore-town'); },
function() { showmorelessOff('#showmore-town'); }
);
$('#showmore-cities').toggle(
function() { showmorelessOn('#showmore-town'); },
function() { showmorelessOff('#showmore-town'); }
);
var showmorelessOn = function(context) {
$('.popularCitiesAdditional').show();
$('.showless', context).show();
$('.showmore', context).hide();
$(context).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
};
var showmorelessOff = function(context) {
$('.popularCitiesAdditional').hide();
$('.showless', context).hide();
$('.showmore', context).show();
$(context).addClass('sd-dark28').removeClass('sd-dark28down');
};
})();
though I agree, could perhaps be better served on codereview.stackexchange.com
I would do this almost entirely in the CSS. Only use .toggleClass() and determine what is shown and what is hidden in the CSS.
(function() {
$('#showmore-towns').toggle(
function() { showmorelessOn.call($('#showmore-town')); },
function() { showmorelessOff.call($('#showmore-town')); }
);
$('#showmore-cities').toggle(
function() { showmorelessOn.call($('#showmore-town')); },
function() { showmorelessOff.call($('#showmore-town')); }
);
var showmorelessOn = function() {
$('.popularCitiesAdditional').show();
$('.showless', this).show();
$('.showmore', this).hide();
$(this).removeClass('sd-dark28').addClass('sd-dark28down');
return false;
};
var showmorelessOff = function() {
$('.popularCitiesAdditional').hide();
$('.showless', this).hide();
$('.showmore', this).show();
$(this).addClass('sd-dark28').removeClass('sd-dark28down');
};
})();
(function() {
$('#showmore-towns').toggle(
function() { showmoreless(); }
);
$('#showmore-cities').toggle(
function() { showmoreless(); }
);
var showmoreless = function() {
if(this.hasClass('sd-dark28'){
$('.popularCitiesAdditional').show();
$('.showless', this).show();
$('.showmore', this).hide();
$(this).removeClass('sd-dark28').addClass('sd-dark28down');
}
else
{
$('.popularCitiesAdditional').hide();
$('.showless', this).hide();
$('.showmore', this).show();
$(this).addClass('sd-dark28').removeClass('sd-dark28down');
}
}.bind($('#showmore-town'));
})();

Multiple replaceWiths in jQuery?

Why doesn't this work? What would be a plausible solution to get this effect?
$(document).ready(function() {
$('#myLink1').click(
function() {
$('#myLink1').replaceWith('<a id="myLink2" href="#panel2">#panel2</a>');
});
$('#myLink2').click(
function() {
$('#myLink2').replaceWith('<a id="myLink3" href="#panel3">#panel3</a>');
});
});
I'm new to loops and how I'm supposed to add strings and variables.
$(document).ready(function() {
var panelNum = 8;
for (i=1;i<=panelNum;i++){
$('#myLink'+i).click(function() {
$('#myLink'+i).replaceWith('<a id="myLink'+(i+1)+'" href="#panel'+(i+1)+'">#panel'+(i+1)+'</a>');
});
};
});
The problem is myLink2 doesn't exist until mylink is clicked. You have to add the mylink2 handler after it is created. Try the following:
function add_replace_with(i){
$('#myLink'+i).click(
function() {
do_replace_with(i)
return false;
});
}
function do_replace_with(i){
$('#myLink'+i).replaceWith('<a id="myLink'+(i+1)+'" href="#panel'+(i+1)+'">#panel'+(i+1)+'</a>');
$('#myLink'+(i+1)).click(
function() {
do_replace_with(i+1)
});
}
$(document).ready(function() {
add_replace_with(1);
});
I should note, that you might be better of hard-coding the links and just using .show() to toggle them.
Alternatively:
$(function() {
$('body')
.delegate('#myLink1', 'click', function() {
$(this).replaceWith('<a id="myLink2" href="#panel2">#panel2</a>');
})
.delegate('#myLink2', 'click', function() {
$(this).replaceWith('<a id="myLin32" href="#panel3">#panel2</a>');
})
;
});
To generalize this for a whole bunch of such link, with similar naming convention:
$(function() {
for (var link = 1; link < 8; ++link)
(function(link) {
$('body').delegate('#myLink' + link, 'click', function() {
var nxt = link + 1;
$(this).replaceWith('<a id="#myLink' + nxt + '" href="#panel' + nxt + '">panel ' + nxt + '</a>');
});
})(link);
});

Categories