We Keep Coding

What is wrong with my js grammar or structure?

If I just have this js everything fires and works:
$('.hidden-div').hide();
$('#id_bool').change(function() {
$('.hidden-div').toggle(this.true);
});
but if I add this function directly underneath it everything stops working:
$('.form').on('submit', function(){
if $('#id_bool'){
$('.hidden-div').show();
} else {
$('.hidden-div').hide();
}
});
What is going wrong in the second part?

You forget to add parentheses in your if statement:
$('.form').on('submit', function(){
if ($('#id_bool')){
$('.hidden-div').show();
} else {
$('.hidden-div').hide();
}
});

In JQuery a selector will always return a JQuery array, you need to specify a property to check.
This:
if ($('#id_bool')){
should be:
if ($('#id_bool:checked').length){
Edit:
if your id_bool has a value, that can be either true or false you can, as #Bargi mentions, use this:
if ($('#id_bool').val()){

jquery variable using input field Name

I have a code like this:
var formFocus = formFocus || {
spanElement: ".focusOnLoad form input[name="FirstName"]";
init: function () {
$(document).ready(function() {
//come other computation
$(formFocus.spanElement).focus();
});
},
};
I am running into issues with this line: spanElement: ".focusOnLoad form input[name="FirstName"]";
I get an error at name="FirstName"
I tried escaping " with spanElement: ".focusOnLoad form input[name=\"FirstName\"]";Then I get Unexpected token ; error.
I can get the code working if I just use .focusOnLoad form input[name="FirstName"] as selector. But I need to use a variable since ist a shared code and some others without the knowledge of this part has to use this variable.
Is there a way to fix this?

var formFocus = formFocus || {
spanElement: ".focusOnLoad form input[name='FirstName']",
init: function () {
$(document).ready(function() {
//come other computation
$(formFocus.spanElement).focus();
}); }, };
You have here, you wrote
form input[name="FirstName"]";
Instead of:
form input[name='FirstName']",
The difference is: you terminated the line with semicolon instead of a comma, and also, you used double quote inside another double quote
Hope my answer helps 😉

Why is my javascript function finding my checkbox to be false

My code looks something like this
HTML
<div><input type="checkbox" name="showInactiveBox" value="showInactiveBox" id="showInactiveBox">Show inactive project numbers</div>
Javascript
$("#showInactiveBox").live("click", function () {
if ($(this).is(":checked")) { //checkbox is checked
$.ajax({
type: "POST",
url: "#Url.Action("UpdateInactiveBox", "Project")",
data: {
showInactive: true
}
})
.done(function (data) {
Debug.writeln("Check box is checked?: " + $("#showInactiveBox").is(":checked"));
$("#project-numbers-grid").data("kendoGrid").dataSource.read();
});
I have an else that looks similar to above, just sets the checkbox to false basically. My debug line above in the .done of the Ajax function returns the correct value whether it be checked or not. However I then call the .read() on my grid which relates to more javascript below:
read: {
url: "#Html.Raw(Url.Action("GetActiveProjectNumbers", "Project"))",
type: "POST",
cache: false,
dataType: "json",
data: {
q: function () {
var model = {
projectid: "#Model.Id",
};
return JSON.stringify(model);
},
showinactive: $("#showInactiveBox").is(":checked")
}
},
When I put another Debug.writeline in the server, it is receiving the correct value for "q" but "showinactive" is always read in as false. Is there something with javascript that I don't quite understand where going from function to function will read a different value for ($"checkboxid").is(":checked")?
Thanks

Are you sure .is() works with the jQuery version you are running? You could also try .prop('checked'). I would try running this in the Chrome developer tools on the page:
$("#showInactiveBox").is(":checked")
and
$("#showInactiveBox").prop("checked")
If those return the value you are looking for, then there is something else going on. Try running those in console.log at the point at which you are calling those functions to see what the active output is:
console.log('This is my checkbox value', $("#showInactiveBox").is(":checked"));

In addition to Lawrence Johnson's (.prop) answer I'd take a look at some of the other code you are using.
For instance, when dealing with checkboxes it's always better to use the .change() method rather than click.
Also, the .live method is deprecated now and should be using .on().
When dealing with checkboxes you can easily use "vanilla javascript" to test if the box is checked or not. jQuery is not always the "less code/best solution".
See the below code for all the amendments mentioned above:
<input type="checkbox" name="showInactiveBox" value="showInactiveBox" id="showInactiveBox">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#showInactiveBox').on('change',function(){ //using .on and change rather than click
if ( this.checked ) {//test if checked or not
console.log('checked');
}
})
});
</script>

Change
showinactive: $("#showInactiveBox").is(":checked")
to
showinactive: function() {
return $("#showInactiveBox").is(":checked");
}
and call it with
showinactive()
Currently, you are setting showinactive to the value of the property, which I'm assuming starts as false. Values in javascript don't update with the DOM like that--you need to explicitly check each time.

JQuery AJAX with dialog call

There are a couple of points I was hoping for assistance on. I have the following code, by which I make a ajax call on page load, and either retrieve data successfully or handle any resulting error.
I am running JQuery 2.0.0, with JQuery UI 1.10.2 (PHPStorm seems to have trouble recognising later versions).
Relevant HTML:
<script type="text/javascript" src="inc/JQuery-2.0.0.js"></script>
<script type="text/javascript" src="inc/JQuery-UI-1.10.2.js"></script>
<script type="text/javascript" src="inc/core.js"></script>
...
<div id="feedback-dialog">
<div id="dialog-inner"><!-- dynamic content --></div>
</div>
</body>
Javascript:
var engine = 'engine.php',
feedbackWrapper = $('#feedback-dialog'),
feedbackInner = $('#dialog-inner');
function ftShowErrorMessage(e)
{
var error = e.toString(),
errorWrapper = $('<p id="error-message"/>');
$(errorWrapper).text(error);
$(feedbackInner).empty();
$(feedbackInner).append(errorWrapper);
$(feedbackWrapper).dialog({
title: 'An Error Occurred',
dialogClass: 'feedback-error',
buttons: [
{
'OK' : function() {
//do stuff
$(this).dialog('close');
}
}
]
});
}
$(document).ready(function()
{
(function(){
var args = {};
args.Request = 'get country ids with county options';
$.ajax({
type: 'POST',
url: engine,
data: args
})
.done(function(data)
{
try
{
var obj = JSON.parse(data);
if(!obj.hasOwnProperty('error'))
{
//continue
}
else
{
ftShowErrorMessage(obj.error);
}
}
catch(e)
{
ftShowErrorMessage(e)
}
})
.error(function( xhr, ajaxOptions, thrownError )
{
ftShowErrorMessage(thrownError)
});
})();
});
My aim here is to catch when the AJAX call cannot make a successful call, or returns a non-parse-able string, or returns an error flag within a successful call (signalling an error from the PHP script).
My first problem is that the dialog call just won't fire - no error or warning given. This is the case even when I tie it to a simple click event. If anyone can point out where this is failing, I'd be grateful (the wrapping function is being called, and I can pass and echo content to and from it - it just fails at the dialog call).
Secondly, can someone clarify for me the difference between the ajax success, done, and complete functions, and between error and fail (fail does not seem to be recognised by the IDE, although it appears in the docs, but that's probably a separate problem).

I'm not sure why your dialog isn't displaying, maybe this will work:
$(feedbackWrapper).dialog({
title: 'An Error Occurred',
dialogClass: 'feedback-error',
buttons: [
{
'OK' : function() {
//do stuff
$(this).dialog('close');
}
}
]
}).dialog("open");
I'm not sure why this would be needed, since autoOpen: true is the default. But if you've already closed the dialog from a previous error, I think you need to open it explicitly the next time.

Simple Javascript Calling function not working/don't know how to get it to work

I'm trying to call a function and not the alert and I thought it was as easy as just doing something like this: FunctionsName(); and delete the alert(''); but it's not working for me :(
Can someone please look at the code I have below and tell me what is wrong ?
Thank you so much!!
<script type="text/javascript">
var comper;
function checkComper() {
var onResponse = function(comperNow) {
if (comper === undefined) {
comper = comperNow;
return;
}
if (comper !== comperNow) {
// show a message to the visitor
alert("New Info Added"); // <--*** I WANT TO TAKE THIS OUT AND CALL $("#append").click(function(e)
comper = comperNow;
}
};
$.get('getlastupdate.php', onResponse);
}
var tid = setInterval(checkComper, 2000);
$(function() {
var $table = $("table.tablesorter");
$("#append").click(function(e) {
e.preventDefault();
$.get('updatetable.php', function(data)
{
$table
.find('tbody')
.html('')
.append(data);
$table.trigger("update", [true]);
});
});
/*........ and so on.... */
</script>

What about changin that :
alert("New Info Added");
to that :
$('#append').trigger('click');
It will simulate a click and trigger the function.

One thing important to distinguish:
alert("New Info Added") is a function. Actually, alert() is a function, being passed the parameter "New Info Added".
$('#append').click(function(e) { is not a function, at least, not in the same way. $('#append') is a jQuery selector function, which selects all elements with an id of "append". $('#append').click() is a function that sets a click event on all elements returned in the selector.
What the whole syntax of $('#append').click(function(e) { means is on its own a syntax error. What you're doing is telling the elements found in the selector what their click function should be. But the function(e) { says that it's the start of the code of the function. That line of code isn't complete until the ending }) - the } closing the function declaration and the ) closing the call to click.
So, you can't simply replace alert("New Info Added"), which is a complete function call, with $('#append').click(function(e) {, because it's a syntax error - you haven't completed the function(e) declaration, nor the click function call. You can trigger the click function, as Karl's answer told you. Or, you can use the shortcut:
$('#append').click()
Note that this is a full proper sentence, and can therefore replace the alert.