How to click a pop up using code - javascript

I've just gotten into code and made this
setInterval(function() {
if ($('Text').is(":visible") === true) {
document.getElementById('text').getElementsByClassName('Yes').Click();
} }, 5000);
I don't think it works and probably has a lot of problems with it and I don't know how to fix it.

What are you going to achieve?
document.getElementById('text').getElementsByClassName('Yes').Click();
won't works, because
document.getElementById returns just one element, you can access to its
children using children property (or childNodes).
getElementsByClassName returns common array of elements. If you read some JS tutorial you should know how to access it.
HTMLElement have no Click() method, but click()
Also you shouldn't mix pure JS with jQuery.

Related

Why specify [0] when using new FormData()?

I've just spent a good few minutes debugging why new FormData($("#ImageEditorForm")); isn't working. After turning to Stack Overflow, I found a suggestion in another thread to use new FormData($("#ImageEditorForm")[0]); instead.
I made the change, not expecting anything to happen. Instead, the code now works perfectly and as expected. Previously, nothing was being submitted to the server. Now, form data and files appear as expected.
My question is why is the "[0]" required? There is only one element with that ID in the DOM. Selecting by ID should surely return only one element? What is going on here?
$("#ImageEditorForm") returns a jQuery object and FormData requires a DOM Node.
You can use document.getElementById(id); which returns a DOM Node.
FormData(document.getElementById("ImageEditorForm"));
Or use document.querySelector(selector); which takes a css selector and returns the node if found and null otherwise.
When selecting with jQuery, the returned object is a jQuery object, and to get the actual DOM-node this represents, you use [0] on the jQuery object.
If you had used a selector which returned a couple of results, it would be easier to understand why you would need to index into the object to get to the actual DOM-node, but this is standard jQuery.
And as andlrc said, you need to pass an actual DOM-node to the FormData function.

Javascript : How why i get the .className 'underfined' but .html() work

I know this question was posted many times but I can't understand my problem :
When I do :
alert($('#CalendarType').className);
I keep getting undefined in the alert, at start by searching on the web I thought it was because my div wasn't already load but I tried something else :
alert($('#CalendarType').html());
And this work.... I can't understand . If someone can explain me what I did wrong
$(someSelector) returns a jQuery object, not a DOM object.
className is a property of a DOM object, not of a jQuery object.
You can either extract the DOM object from the jQuery object:
alert($('#CalendarType')[0].className);
Or use the jQuery attr method:
alert($('#CalendarType').attr('class'));
You can use .attr() function instead. I am sure this will work:
alert($('#CalendarType').attr("class"));

Strange ie behaviour with jquery inArray

Hello this seems to be working on IE8 :
var clsName = link.parents("div.fixed_column").attr("class").split(" ");
if($.inArray("column_one", clsName)
While this one reports error (Object expected errror in jquery).
var clsName = link.parents("div.fixed_column").attr("class");
What is the right way to do this? I thought purpose of inArray was that jquery will handle cross browser issues.
Unfortunately, this is indirectly answering your question, but... You seem to be looking to detect if an element has a class, and since you're already using jQuery, just use the hasClass method - http://api.jquery.com/hasClass/
For your specific code, try:
if (link.parents("div.fixed_column").hasClass("column_one")) {
// It has the "column_one" class
}
The more immediate answer to your question is that link.parents("div.fixed_column").attr("class") returns a single string. When the jQuery selector (div.fixed_column) returns multiple elements, which is very possible when using classes, using jQuery methods that get information (like .attr, using one parameter...to "get" the value) return the first matched element's value only.
So say the selector matches 3 elements:
["<div id='div30' class='fixed_column div30_class'></div>",
"<div id='div2' class='fixed_column div2_class'></div>",
"<div id='div17' class='fixed_column div17_class'></div>"]
Then the value returned from .attr("class") will be: fixed_column div30_class because it's the first matched element.
I'm not sure, but I think you're expecting jQuery to return an array of all the matched elements' values, which it just doesn't. So that doesn't mean jQuery isn't handling cross-browser issues, it just means you need to look up what the method does/returns.
I could've sworn that jQuery 2.0 has options for doing what you want - directly from calling the getters (or something similar), but I can't find it anymore :( Maybe I'm remembering incorrectly. Anyways, you could easily use $.each and/or $.map to look at every matched element, but it depends on what you were really trying to do with it.
You can't read the attributes of multiple elements into an array with .attr("class"). But why don't you just target the desired class in the selector like this?
var cols = link.parents("div.fixed_column.column_one");
Then change your conditional to check for an empty set:
if(cols.length) { ...

Doesn't jQuery('#id') do the same thing as document.getElementById('#id') in javascript? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
document.getElementById vs jQuery
I have a function that will take all the spans with a certain class ("jobStatus") and remove an additional class from it ("orange"). I call the function from a SELECT onchange (onchange="chgJobstatus(this);"). It's working great.
However, I'm trying to get it to run on page load, based upon the selected value (this is server-side dynamically generated.)
This will work:
$(document).ready(function(){
chgJobstatus(document.getElementById("chgStatus"));
});
This will NOT work:
$(document).ready(function(){
chgJobstatus(jQuery('#chgStatus'));
});
Doesn't jQuery('#id') do the same thing as document.getElementById('#id') ??
Regarding selecting the element, yes, but jQuery selectors return jQuery objects and getElementById returns a DOM Element object, you can get the DOM Element using [index] or get(index) method:
chgJobstatus(jQuery('#chgStatus')[0]);
This will surely work. jQuery(selector) always return a jQuery object (jQuery(selector) instanceof jQuery is true ) . but you can get native dom element using .get or simply using array like syntax as below.
$(document).ready(function(){
chgJobstatus(jQuery('#chgStatus')[0]);
});
jQuery('#id') - returns a jQuery Object
document.getElementById('#id') - returns a HTML DOM Object
jQuery('#id').get(0); OR jQuery('#id')[0]; - returns a HTML DOM Object
By using jquery it will allows you to access jquery functions. if you read below links you will get an good idea.
document.getElementById vs jQuery
jQuery $() vs. document.getElementByID — differences
getelementbyid-vs-jquery-id
jquery-sharp-vs-getelementbyid
getelementbyid-vs-jquery-id
On more important thing you should know is that jQuery returns a reference to a jQuery object, not the object itself.
No, jQuery('#id') returns a jquery object, with additional functions and properties attached to it.
I'm not entirely sure what you're trying to do, but something like this could substitute all the javascript you've described.
$("#chgStatus")
.bind("change", function() {
$(".jobStatus").removeClass("orange");
}).trigger("change");

Using jQuery in a JavaScript function

function divlightbox(val)
{
if(val)
{
val=val.replace( /^\s+/g, "" );
var count_js=0;
var big_string='';
document.getElementById("video_lightbox").innerHTML="";
document.getElementById("divlightbox").style.display = "block";
$("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});
I found out that the error is in the above. My question is can't I use jQuery and traditional JavaScript at same time? I have done coding like this numerous times and never ran into a problem like this. I used to use jQuery methods like .hide() and .css() inside JavaScript functions but this time it doesn't work.
Thanks in advance.
While the other answers fix the specific problems, I don't think the OP's question (in bold) is really answered here, as depending on the specific context, $ may possibly not be defined as a jQuery object yet (having had this problem myself a few times now.)
In which case you would need to do something like:
function divlightbox(val) {
// ...
// just use jQuery instead of $ one time
jQuery("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});
}
OR
function divlightbox(val) {
// define the $ as jQuery for multiple uses
jQuery(function($) {
// ...
$("#video_lightbox").css("height":"430px");
$("#video_lightbox").css("top":"10%");
$("#video_lightbox").css("width":"480px");
});
}
jQuery is JavaScript so YES. Instead .innerHTML="" just use .empty(). Instead .getElementById() use $('#..') and so on.
to do things like hide(); and css() you need jquery objects. you can't do them to dom elements.
so you could do $('#video_lightbox').html("");
or
$('#video_lightbox').empty();
You must provide error in javascript console.
1) Do you pass a val argument to divlightbox function()? When do you call it?
2) why do you use the same identifier divlightbox both for a function and for a div id? Change name to the function please, maybe the problem could be here.
3) Always check if video_lightbox and divlightbox exist before accessing them.

Categories