What is wrong with my js grammar or structure? - javascript

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()){

Related

differences between css({'font-size':'value'}) and css('font-sze') == value in jQuery css method

What is difference between
$('some element').css({'font-size':'15'})
and
$('some element').css('font-size') == '15px'
Please look at this code:
$('#wrapper').on('click', '#p6', function() {
if ( $('a.sub').css({'font-size':'15'}) ) {
$('a.sub').not('a.subEnroll').removeAttr('style').fadeOut(10);
}
else {
$('a.sub').fadeOut(10);
}
});
I wrote this IF clause and the condition, but it don't work.
What's wrong in this code?
If you're trying to test whether the font size is 15, it should be:
if ($('a.sub').css('font-size') == '15px') {
...
} else {
...
}
thanks to Barmar; I get that
for comparing current css value with the which one we want, we had to use
$('some element').css('some attr') == value
because the situation that I wrote in the question, is for set an attribute and alway will be true, so we can't use this in if clause as a condition...

disable function using jQuery

I'd like to disable a javascript function (dialogs()) using jQuery.
What I thought to do was:
Wrap the function in a span: "<span class = 'auto'>" + dialogs(i,0); + "</span>"
If the checkbox is checked, do: (this if statement is in $(document).ready(function(){)
if ($("#autodialog").is(":checked")) {
$(".auto").remove(); }
But this doesn't seem to be working.
Any thoughts?
Make your dialogs methods to handle a extra parameter isEnabled, a boolean dataType.
function dialogs(i,0,isEnabled) {
if(isEnabled) {
//Todos
}
}
then make it to look like this
if ($("#autodialog").is(":checked")) {
dialogs('i',0,false); //I'm not sure about the values of parameter i
}
So there is no need of using span tag as a wrapper.
Hope you understand.
A little more context would be helpful (do you have a jsfiddle we can see?)
I think you may be confusing the Javascript function and the value returned from the function. Are you trying to remove a string of HTML generated by the dialogs() function, or are you trying to remove the actual dialogs function itself?
If you want to disable the dialogs function:
<script>
function getDialogs(a,b) {
// ...
}
var dialogs = getDialogs; // Make dialogs refer to getDialogs
</script>
Elsewhere you'll have something like:
<script>
if ( $("#autodialog").is(":checked") ) {
dialogs = function __noop__() {};
} else {
dialogs = getDialogs;
}
</script>
you will have to add a click handler to the checkbox
$("#autodialog").click(function(){
if ($(this).is(":checked")) {
dialogs(i,no,false); }
else
dialogs(i,no,true);
});
function dialogs(i,no,flag){
if(!flag)
{event.preventDefault();return flag;}
else{
......//your working code}
}

jQuery: Call a function twice

I'm trying to run a function twice. Once when the page loads, and then again on click. Not sure what I'm doing wrong. Here is my code:
$('div').each(function truncate() {
$(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});
$('.truncate').click(function() {
if ($(this).parent().hasClass('closed')) {
$(this).parent().removeClass('closed').addClass('open').children().show();
}
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed');
$('div').truncate();
$(this).show();
}
});
The problem is on line 13 where I call the truncate(); function a second time. Any idea why it's not working?
Edit jsFiddle here: http://jsfiddle.net/g6PLu/
That's a named function literal.
The name is only visible within the scope of the function.
Therefore, truncate doesn't exist outside of the handler.
Instead, create a normal function and pass it to each():
function truncate() { ...}
$('div').each(truncate);
What's the error message do you get?
You should create function and then call it as per requirement
Define the function
function truncate(){
$('div').each(function(){
});
}
Then call the function
truncate();
Another approach is to establish, then trigger, a custom event :
$('div').on('truncate', function() {
$(this).......;
}).trigger('truncate');
Then, wherever else you need the same action, trigger the event again.
To truncate all divs :
$('div').trigger('truncate');
Similarly you can truncate just one particular div :
$('div#myDiv').trigger('truncate');
The only prerequisite is that the custom event handler has been attached, so ...
$('p').trigger('truncate');
would do nothing because a truncate handler has not been established for p elements.
I know there's already an accepted answer, but I think the best solution would be a plugin http://jsfiddle.net/g6PLu/13/ It seems to be in the spirit of what the OP wants (to be able to call $('div').truncate). And makes for much cleaner code
(function($) {
$.fn.truncate = function() {
this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
};
$.fn.untruncate = function() {
this.removeClass('closed').children().show();
};
})(jQuery);
$('div').truncate();
$('.truncate').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('closed')) {
$parent.untruncate();
} else {
$parent.truncate();
}
});

jquery simple modal help on window load

I'm trying to something like this if in the html there is a div called "#super" load it in the simple modal if not do nothing. I managed to do this with the my skill :D which is none: to load the modal if the #super exists, but it still loads doesn't matter if it exitst or not. PLease help I'm absolute noob on jquery.
if( $('super') ){ $("#super").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
}});
I'm using this jquery plugin link text
If #super does not exist, nothing will happen. So, the following should fit your needs:
$("#super").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
});
I'm not quite sure what it is that you want to do, in the if/else conditions, but to test for the existence of something:
if ($('#super').length) {
// it exists, do stuff
}
else {
// it doesn't exist, do other stuff. Or nothing
}
I'm sorry I can't be more specific, but I've not worked with the dialog/modal plugin.
The problem is this check
if( $('#super') )
will always return true, since the jQuery function always return a jQuery object which is not a false value.
Instead try this
if( $('#super').length > 0 )

Javascript: addClassName if input is checked and removeClassName if it was un-checked

I'm trying to select all the li tags of the document and check if it hasClassName('yes') so if it has, it will remove it. But I'm having a TypeError: Object [object HTMLLIElement], has no method 'hasClassName' error.
This is the DOM method:
document.observe("dom:loaded", function() {
$(document.body).select('input').each(function(element) {
element.observe('click', function() {
init();
});
init();
});
});
The previous code will take the init function and check the if there are checked inputs and add them the 'yes' class name, but if I un-check those inputs, the class remains.
This is the function that I'm trying to do dynamic (add and remove class 'yes');
function init() {
$(document.body).select('input').each(function(element) {
if (element.checked) {
element.up('li').addClassName('yes');
}
if ($(document.body).select('li').hasClassName('yes')) {
element.removeClassName('yes');
}
})
}
Can you help me solving the last part of this function, so the removeclassname method will work? Thank you.
$(document.body).select('li') returns a collection, not an element, right? I would assume you want:
if (element.hasClassName('yes')) {
element.removeClassName('yes');
}
However, it seems that your logic is flawed -- you are first adding the class if the input is checked, then you are immediately removing it. Are you missing an else? Maybe something more like:
function init() {
$(document.body).select('input').each(function(element) {
if (element.checked) {
element.up('li').addClassName('yes');
}
else {
element.up('li').removeClassName('yes');
}
})
}
Wait a sec - that "select" is going to return an array of elements. The "hasClassName" function is a function on Element directly, not on Array or Enumerable. You're missing an "each()" layer.
$$('li').each(function(li) {
if (li.hasClassName('yes')) li.removeClassName('yes');
});

Categories