We Keep Coding

Jquery .show does not change display property

I am generating script that is supposed to select values after page got reloaded with F5 or browser back button.
JQuery is loaded, and element is on the page, screenshot below shows me running in console $('.isEstateOver325K').show() and element remaining display:none.
I must be missing something obvious here.
script that is supposed to change visibility is fired by another that triggers change and click on element it would be weird if this would be the reason since it works ok for some different elements - still worth mentioning.
(function() {
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").show();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").hide();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
I am sure someone has experienced something similar, why doesn't it change to display:block?

Try with :
$('').attr('style','display:block;')

Try to use toggle(). Toggle will toggle display:none to display:block and Vice-Versa.
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").toggle();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").toggle();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});

even this can also work
/*---for multiple css property-----*/
$('').css({
'display':'block'
});
/*---for single css property-----*/
$('').css('display','block');

So for your first question, to sum up . If you call
$('').show();
You're telling jQuery to select "nothing" and to show this "nothing".
If you want to select "all". Than you have to use the all-selector(http://api.jquery.com/all-selector/):
$('*').show();
A really basic example is here: http://jsbin.com/cixoxatufu/2/edit?html,js,console,output
And for the rest, I really appreciate a JSBin or something as this is just hinting to something and not really providing a solution.

simple jQuery function not working in some browsers

I'm building a site where a user has to agree to terms and conditions. The checkbox is enabled after scrolling to the end of the box. Here is the code:
<script type="text/javascript">
$(function() {
$('#rules_box').scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height() - 15 ) {
$('#iagree').removeAttr('disabled');
}
});
});
</script>
This works in most browsers. However some refuse to work. Even if I just have
$('#iagree').removeAttr('disabled');
by itself without scroll conditions. This page is running many other javascripts that are working.
Some said it didn't work on their Mobile, and one said it didn't work on Firefox although it worked on my Firefox.
Is jQuery too finicky to work? Does this mean I have to do it another way?
EDIT:
you're quick to mark as a dupe, but this question hasn't been answered yet.
Problem persists in same select browsers, see updated code
$(function() {
$('#rules_box').scroll(function () {
alert('something');
$('#iagree').prop("disabled", false);
});
});
Does not fire alert or change checkbox state

For checkbox elements, you should use .removeProp() instead of .removeAttr()
$('#iagree').removeProp('disabled');
Also see: https://api.jquery.com/removeAttr/ and https://api.jquery.com/attr/

Please use
$('#iagree').prop("disabled", false);

Use .prop('disabled',false) instead of removeAttr('disabled').
related question

jquery fade out and redirect not working in IE

I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE

You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()

I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow

I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..

script always working in chrome / firefox works only once in IE

In a partial view I have these lines of scripts:
<script type="text/javascript">
$(document).ready(function() {
$('#randomCard').click(function () {
alert("button clicked!");
$.get("#Url.Action("GetRandomCard")", {}, function (data) {
$('#rightSide').html(data);
});
});
})
</script>
This calls a Get method in my controller which returns a random card from a database. In chrome, this methods is 100% working. Firefox fires the event 100% of the time too. But in IE the action is fired only once while the alert always pops.
Can somebody help me figure out why?
EDIT
Following everyone's advice, I have debugged my session which made me realize that the html data was being added, not replaced. I have created an upper div #rightSide which gets updated with the data, thus resolving this small problem.
However, the problem of IE calling the partial view controller method is still active and I appreciate everyone's help to resolve this issue.

Fire up a debugger in IE. Run and see what fails.
Catch if there is an error from $.get(…).
( I bet on the randomCard-control being a anchor link and there being i subtle bug that makes the anchor get the page again. )
Don't forget to post your findings.

even if it is not an
$(document).ready(function() {
$('#randomCard').click(function (e) {
e.preventDefault();
alert("button clicked!");
//etc

Avoid popping blocking when calling window.open from .change()

I have a select menu, for which I have the following code:
$('#sister-site-menu').change(function(){
if ($(this).val()) {
window.open($(this).val(), '_blank');
}
});
This however causes the popup blocker to be invoked in Chrome. I'm sure I've seen sites do this before, any ideas?
Thanks!

You can safely remove the 'blank'-part. Try this:
$('#sister-site-menu').on('change',function(){
if ($(this).val()) {
window.open($(this).val());
}
});
If that does not work, I see no other way around this.