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.

Trim textboxes and texareas on submit prevent form to submit

I am trimming all textboxes and textareas on submit. It does not work for all view pages.
I have taken simple html inputs + kendo DropDownList + kendo AutoComplete in my form.
Below is my submit method which doesn't work, when there are Kendo UI control on my form.
$('input[type="submit"]').click(function () {
$('input[type=text], textarea').each(function () {
if($(this).val()!=''){
$(this).val($.trim($(this).val())); //Exception in chrome: paused on exception typeerror. Msg: undefined in not function.
}
});
});
I don't know what's wrong. I found this issue specific to chrome browser.

It it just the kendo controls? Their DropDownList for instance renders this (from the demo)
<input id="color" value="1" data-role="dropdownlist" style="display: none;">
Note there is no type=text attribute so your selector is probably not including this.

It seems there is no problem in your normal HTML and Js code. Check other piece of codes in your project, Weather its blocking your code.
Probably check the Kendo UI Syntax / Format / Attributes for Html
controls. It might be a problem.
Take a look at my fiddle workout. I have Tested its working fine.
There is no exception Like -- //Exception in chrome: paused on exception typeerror

I don't know what's wrong. So I updated the function as below:
$('input[type="submit"]').click(function () {
$('#textbox1,#textbox2,#textarea1').each(function () {
if($(this).val()!=''){
$(this).val($.trim($(this).val()));
}
});
});
I wrote ids of all textboxes and textarea which I need to trim inside each. And it works fine. But still I have question why generalize function didn't work.

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

Use JQuery or onbeforeunload for IE and FF

I'm working in a Flex4 application, using javascript, in the "index.template.html" document. I'm having an issue being able to use onbeforeunload with Firefox. The application works perfectly in IE, but the exact same one doesn't sit well with FF. (See below)
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var flex=document.$(application)||window.$(application);
flex.unloadMethod(); //custom method to log out the user
}
function after(evt)
{
}
</script>
From what I've found, FF doesn't seem to register onbeforeunload events, so I found that the popular thing to use instead is binding with JQuery. So, I deleted the above code and replaced it with the below code, but it doesn't display a pop-up when the user tries leaving the page in both IE and FF. Anyone that seems to be using JQuery for this seems to be doing the exact same thing, so I don't know what's going on.
<script type="text/javascript">
$(window).bind("beforeunload",function(event){
return "This should create a pop-up";
});
</script>
Eventually it would be nice to call the "flex.unloadMethod" like in the first bit of code, but for the time being I'm just trying to get a pop-up to work so I know I'm on the right track. Any insight would be greatly appreciated.

Try:
<script>
$(window).on('beforeunload', function(){
return "This should create a pop-up";
});
</script>
Example: http://jsfiddle.net/AeztA/3/

Would like to add that i figured out that you can't use an empty string in firefox.
It has to be at least 1 blank for example as return.
var text = 'Exit Message';
$(window).on('beforeunload', function(){
return " " + text;
});

How to get button to invoke form

Another newbie here. I took this code from old site page and want to use it on a page in a new WP site.
I put the appropriate HEAD info in the HEADER section on WP, and the following script on the page, but I can't seem to get the button to invoke the form itself.
Would greatly appreciate help.
<center><form><input type="button" id="feedback-button" class="button" value="Open Support Ticket" /></form></center>
<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
// ==== custom trigger function ====
triggerFunction : function( showCollectorDialog ) {
$('#feedback-button').on( 'click', function(e) {
e.preventDefault();
showCollectorDialog();
});
}
});
</script>

If you mean you want the button to submit the form, there is absolutely no need to use JavaScript for that; that's the browser's default behavior. However, you'll need to make sure that all your inputs including the submit button are in the same form element. You'll also need to make sure that that form element has an action attribute and a method attribute.

Seems to me that the custom trigger event is calling to showCollectorDialog()
Do you also have the code for showCollectorDialog?
You might want to try adding an alert message to see if the function is getting invoked.
<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
// ==== custom trigger function ====
triggerFunction : function( showCollectorDialog ) {
$('#feedback-button').on( 'click', function(e) {
alert("Yes, the button is getting executed!");
e.preventDefault();
showCollectorDialog();
alert("No, looks like I passed the showCollectorDialog and is not working");
});
}
});
</script>
Other options include having some code in the button that is an onClick event like...
<center><form><input type="button" id="feedback-button" onClick="functionName()" class="button" value="Open Support Ticket" /></form></center>
The onClick can be used to fireoff some sort of function depending on the action you need. I can't tell exactly what the code is doing, but perhaps is opening a pop-up window for a support ticket?
Really we need some more details, but see if the above helps you at least trouble shoot down what is happening to get started.