I used Jquery to select two elements and hide them with their attributes by the following:
$('input[name=login]').hide();
$('span[class=forgot]').hide();
Both lines properly selects the desired elements and hide them well in FF and IE. However in chrome, the selector is not picking up the object. Anything I should do differently?
You should use:
$('input[name="login"]').hide();
$('span[class="forgot"]').hide();
(note the additional quotes)
It may be that you're missing quotes:
$('input[name="login"]').hide();
Also, for classes, you might as well use the native selector:
$('span.forgot').hide();
For the span selector, you can use:
$('span.forgot').hide();
As for the input, you can use:
$('input[name="login"]').hide();
look for console errors in developer tool.
you can try with
jQuery('input[name=login]').hide();
jquery('span[class=forgot]').hide();
You should try:
$(document).ready(function(){
$("input[name='login']").hide();
$('span.forgot').hide();
});
Thanks guys, turns out there is some issue with me referencing the Jquery library.
I do not know what is the reason, but referencing the library does not seem to be working.
After I copy pasted the entire Jquery Js file into the code. Everything works.
Again Thanks all for your help.
Related
The platform that I'm currently using does not allow me to change much of the HTML that's been designed, so to get around this, I need to use JQuery to find and replace a div with another div (or perhaps in simpler terms (incase I'm getting something wrong here), find text in the HTML and replace it with other text).
So, the original is:
<div class="title-desc-wrapper has-main-image" data-content-field="main-image">
I need it to be replaced with:
<div class="title-desc-wrapper no-main-image" data-content-field="main-image">
If anyone has any insight into how to do this, or could show me how, I would greatly appreciate it.
Just add the class has-main-image and remove the class no-main-image:
$('.title-desc-wrapper.has-main-image').removeClass('has-main-image').addClass('no-main-image');
..or you could use .toggleClass() to essentially replace the class:
$('.title-desc-wrapper.has-main-image').toggleClass('has-main-image no-main-image');
You can use the jQuery .toggleClass()
$(".has-main-image").toggleClass("has-main-image no-main-image");
Or simply you can remove the "has-main-image" and add the "no-main-image" class
$(".title-desc-wrapper.has-main-image").removeClass("has-main-image").addClass("no-main-image");
Or if you need animation, you can use jQuery UI .switchClass()
$(".title-desc-wrapper.has-main-image").switchClass("has-main-image","no-main-image", duration, easing , complete )
I hope that helps, good luck
the
$(document).html()
return empty rather than the whole html string.How to get it?
You can easily do it with Javascript outerHTML propery, no jquery code required.
Simply use : document.documentElement.outerHTML
This will give you entire HTML along with HTML tag and its associated attributes.
If you want it using jQuery use:-
$('html')[0].outerHTML
Its fairly easy, just use
$('html').html()
i didnt test this one..why not try
$('html').html();
Try with the
$(document).text()
Demo : Open chrome's inspect element( Developer's Tools) and type the following..You'll see the result :)
I still have some problem. In my HTML code I set one DIV to be hidden.
<div id="personalProfileWrap" style="visibility: hidden">
I changed several times my method in java script and it can be removed this attributed. These are the functions I have tried:
var div = document.getElementById("personalProfileWrap");
div.setAttribute("style", "");
//$("#personalProfileWrap").removeAttr("style");
I also tested with Dom getElement and still does not work. Don't know where the problem is.
Please for advise.
It's a simple document.getElementById("personalProfileWrap").removeAttribute("style");
You don't even need jQuery for it. If you only want to remove one or two items, you'll have to do a .getAttribute("style") first, and parse through the set styles (semicolon delimiter), remove the one you want, and then do a .setAttribute("style", newStyleString).
The following works for me with jQuery:
$("#personalProfileWrap").css("visibility", "inherit");
Here my (short) jsFiddle demo
I am trying to add a table row to a table using .after() but it's not working in any IE, I keep getting this error "Object required" and the error seems to be coming from line 5151 in my jQuery library.
Here is my code:
$('#view').live('click',function(){
var parent = $(this).parent();
parent.after("<tr><td>Test</td></tr>");
});
Any ideas?
A likely reason is that the HTML code isn't valid without a table tag.
Create the elements as separate elements instead:
parent.after($('<tr/>').append($('<td/>').text('Test')));
I would definitely validate your HTML first; this kind of thing often fails beacuse IE is less "generous" when things aren't valid.
Do you know what parent is? is it definitely a tr?
Works fine for me in IE, FF and Chrome: demo.
I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.
The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.
I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.
More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.
I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.
What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!
Use "#" to select by id, use "." to select by class...