I create an array called NAME. For some reason, the code works for the alert('test1') but the code stops working for alert('test2')
$(document).on('submit','form',function()
{
$('input',this).each(function()
{
NAME = $(this).attr('name').split('-');
for(COUNT=0;COUNT<NAME.length;COUNT++)
{
TYPE = NAME[COUNT];
if(TYPE == 'SOMETHING')
{
DO STUFF
}
}
alert("test1");
});
alert("test2");
});
I narrowed it down to the following. After deleting this, it alert('test2') is called.
NAME = $(this).attr('name').split('-');
Whats wrong here?
Thanks to Frederic,
if ($(this).attr('name')) {
// attribute exists
} else {
// attribute does not exist
}
Related
I am trying to get the file input preview working.
I have a jquery script which works fine when I call the function normally.
$('#images').on("change", previewImages);
This works.
But when I put the call to the same function differently like following
$('#images').on("change", function(){
previewImages();
});
This doesn't work.
I need to write an if else statement to call a different function on else.
Valid question
Reason: this happens because of this which refers to file element when you are using first approach but in case of second approach this is referring to window element in which it is called. So pass this to function and your question is solved.
$('#images').on("change", function(e) {
/* issue is with this */
previewImages(e, this);
});
var count = 0;
function previewImages(evt, cur) {
var $fileUpload = $("input#images[type='file']");
count = count + parseInt($fileUpload.get(0).files.length);
if (parseInt($fileUpload.get(0).files.length) > 7 || count > 6) {
alert("You can only upload a maximum of 6 files");
count = count - parseInt($fileUpload.get(0).files.length);
evt.preventDefault();
evt.stopPropagation();
return false;
}
$("#taskbar").css("height", "auto");
var $preview = $('#preview').empty();
if (cur.files) $.each(cur.files, readAndPreview);
function readAndPreview(i, file) {
// if (!/\.(jpe?g|png|gif|mp4)$/i.test(file.name)){
// return alert(file.name +" is not an image");
// }
var reader = new FileReader();
$('#preview img').addClass('img-responsive');
$(reader).on("load", function() {
$preview.append($("<img/>", {
src: this.result,
height: 100
}));
});
reader.readAsDataURL(file);
}
}
Create a prePreviewImages function, and use that in your first approach. Inside that function, use the if-statement and call previewImages() or your other function.
The following should do..
$('#images').change(function(e) {
if(e == "some condition"){ // if else goes here
previewImages();
}else {
SomeOtherFun();
}
});
Both ways seem to work for me on the JSFiddle. Are you sure it is not a
browser compatibility issue?
If not are you getting errors logged in the console under developer tools?
The input named alternativa-*** will have the *** changed in the PHP that comes before. I'm not using a form on PHP only a onClick statement calling the respondeQuestao function. But this code seems to not work. Someone have any suggestion.
$(document).ready(function() {
function respondeQuestao(qid,resposta) {
var alternativa = document.getElementsByName('input[name = "aternativa-"' + qid ']:checked').value;
document.getElementById("demo").innerHTML = 5 + 6;
if(alternativa==resposta) {
$("#botao-questao"+qid).hide();
};
if(alternativa!=resposta) {
};
};
})
Defining a function within the jQuery Ready statement limits the accessibility - define it outside of the jQuery Ready statement but call it when you need it.
function respondeQuestao(qid, resposta) {
var alternativa = $("INPUT[name^='alternativa-']:checked").val();
$("#demo").html(5+6);
if (alternativa == resposta) {
$("#botao-questro" + qid).hide()
} else {
//
}
}
Call the function inside jQuery:
$(function() {
respondeQuestao("id", 11);
});
I hope this helps.
I'm stumped with this one and would really appreciate someone's help.
I'm customizing highslide for integration with wordpress. Via the following code within the highslide.config.js file I'm adding a class name to certain elements and passing different attributes through an onClick call depending on certain conditions.
Everything works until I add the following code:
if(hsGroupByWpGallery){
slideshowGroup: this.parentNode.parentNode.parentNode.id
};
When the above code is present, not only does that one statement not execute, but the whole thing stops working. Even if the if statement is something like if(1=1){}; it still breaks.
If I have instead simply slideshowGroup: this.parentNode.parentNode.parentNode.id or nothing (the two options I'm looking for), both do what I would expect. I just need an if statement to switch between them.
Here's the relevant code:
jQuery(document).ready(function() {
var hsCustomGalleryGroupClass = 'fbbHighslide_GalleryGroup';
var hsCustomGalleryGroupChecker = 0;
var hsGroupByWpGallery = true;
jQuery('.' + hsCustomGalleryGroupClass).each(function(){
hsCustomGalleryGroupChecker++;
return false;
});
if (hsCustomGalleryGroupChecker > 0){
jQuery('.' + hsCustomGalleryGroupClass).each(function(i, $item) {
var grpID = $item.id;
jQuery('#' + grpID + ' .gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
return hs.expand(this, {
slideshowGroup: grpID
});
};
});
});
} else {
jQuery('.gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
return hs.expand(this, {
// This is the problem if statement
if(hsGroupByWpGallery){
slideshowGroup: this.parentNode.parentNode.parentNode.id
};
});
};
});
};
});
Thanks in advance.
The problem is you are trying to assign a conditional property.. you can't have a if condition inside a object definition like that
jQuery('.gallery-item a').addClass('highslide').each(function () {
this.onclick = function () {
var obj = {};
//assign the property only if the condition is tru
if (hsGroupByWpGallery) {
obj.slideshowGroup = this.parentNode.parentNode.parentNode.id;
}
return hs.expand(this, obj);
};
});
Another way to do the same is
jQuery('.gallery-item a').addClass('highslide').each(function () {
this.onclick = function () {
//if the flag is true sent an object with the property else an empty object
return hs.expand(this, hsGroupByWpGallery ? {
slideshowGroup: this.parentNode.parentNode.parentNode.id
} : {});
};
});
I think you might want this, based on the other code:
jQuery('.gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
if(hsGroupByWpGallery){
return hs.expand(this, {
slideshowGroup: this.parentNode.parentNode.parentNode.id
});
}
};
});
I am trying to show separate messages if a div exists after a certain div or does not exist based the end of an ajax function
Here is the code I came up with:
.ajaxComplete(function() {
// Pilots page code.
if ($('body').hasClass('page-pilots')) {
$.fn.isAfter = function(sel) {
return this.prevAll(sel).length !== 0;
}
$('#quicktabs-tabpage-107_display-0 .view-content').each(function() {
if ($(this).isAfter("#quicktabs-tabpage-107_display-0 .view-filters")) {
console.log(".view-content is after, hide message");
$('.pilots-result-message').hide();
}
if (!$(this).isAfter("#quicktabs-tabpage-107_display-0 .view-filters")) {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
});
}
});
The isafter is working, but I can't figure out how to implement a function which is the opposite (would be nice if there was a isNotAfter jQuery function).
I have also tried instead of the second if statement:
else {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
There is no method called isAfter(), you can check whether the next element of #quicktabs-tabpage-107_display-0 .view-filters is the current(this) element like
if ($('body').hasClass('page-pilots')) {
$.fn.isAfter = function (sel) {
return this.prevAll(sel).length !== 0;
}
$('#quicktabs-tabpage-107_display-0 .view-content').each(function () {
if ($("#quicktabs-tabpage-107_display-0 .view-filters").next().is(this)) {
console.log(".view-content is after, hide message");
$('.pilots-result-message').hide();
} else {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
});
}
I have the following code :
var _compteur = '.$compteur.';
var _init = 0;
$("#scrolldown").click(
if (_init>0) {
$("#video").animate({marginTop: "+=95px"}, 200);
_init-=1;
_compteur+=1;
}
else {}
);
$("#scrollup").click(
if (_compteur>3) {
$("#video").animate({marginTop: "-=95px"}, 200);
_init+=1;
_compteur-=1;
}
else {}
);
$compteur is a php variable wich I pass to my JS, firebug return the error SyntaxError:syntax error (with no other detail) for my if statement : if (_init>0) {
I don't understand where's the error, maybe it's confusing with the Jquery, but I can't get this to work.
thx for the help :)
You should use:
$("#scrolldown").click(function() {
if (_init>0) {
$("#video").animate({marginTop: "+=95px"}, 200);
_init-=1;
_compteur+=1;
}
else {}
});
and
$("#scrollup").click(function() {
if (_compteur>3) {
$("#video").animate({marginTop: "-=95px"}, 200);
_init-=1;
_compteur+=1;
}
else {}
});
in fact this is the correct way to attach the event handlers.
You don't attach an event handler like this, you are missing the function keyword
Try
$("#scrolldown").click(function() {
$("#video").animate({marginTop: "+=95px"}, 200);
_init-=1;
_compteur+=1;
});
Also, check the examples here: http://api.jquery.com/click/