Ok, so I'm making a login screen for an application with a button that says "Not You?" which, when clicked, brings up a text-box to update the username on the screen. The issue I'm having is: the username updates once, but when tried again doesn't work. What's wrong with my jQuery?
Here's my jQuery:
var main = function(){
$('.not').click(function(){
$('.login-wrap').fadeOut(300, function(){
$('.not-you').fadeIn(300);
});
});
$('.enter').click(function(){
$('.name').replaceWith($('.new-input').val());
$('.not-you').fadeOut(300, function(){
$('.login-wrap').fadeIn(300);
});
});
}
$(document).ready(main);
And HERE'S a link to the CodePen.
Thanks!
From the docs, The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call,so for first time it is working fine but when first time .replaceWith() is used it replaces whole '.new-input' with class 'name',that is why afterwards it is creates problems.
Instead of
$('.name').replaceWith($('.new-input').val());
Try
$('.name').html($('.new-input').val());
OR
$('.name').text($('.new-input').val());
see here.
When you are doing replaceWith(), you are actually removing the whole tag with class '.name'.
So in the next time the code is unable to find any object with class 'name'.
Use '.html()' to make it work.
You can change your replaceWith() line with the following:
$('.name').replaceWith("<span class='name'>"+$('.new-input').val()+"</span>");
replaceWith() actually replaces the whole DOM element that has the class of name.
.replaceWith() | jQuery API Documentation
Related
I am trying to check if a user clicked on a kind of a href in a specific class.
I am appending the class in jquery because I need to put a different link every time
$("#list-dir").append("<a href='' class='add-href'><il class='dir-items'> " + dir_items[i] + " <br> </il></a>")
$(".add-href").eq(i).attr("href", href_element);
and it works as it should I can see the class and the correct link in the HTML file. But when I try to check if the user clicks it nothing works for some reason like the class isn't there
This ^ was how the webpage looks after I modified it with JQuery.
I already tried putting this code:
$(document).ready(function(){
$(".add-href").on("click", function(e){
console.log("d")
});
});
as most of the answers suggest but it didn't work.
Thanks to CBore for giving me the answer. I had to use event delegation. after I did it worked perfectly fine. in addition like Aslan Kayardi said I could of also create another element like the data-href and enter the link in the value
Open this link: https://search.jd.com/Search?keyword=dfa%20dfgfg&enc=utf-8&wq=dfa%20dfgfg&pvid=219dc22c6de24899b71b5111f1cb81de, how to locate the button"搜索": 搜索
dr.findElement(By.cssSelector("button.button.cw-icon")) does not work.
You can use this with buttons,anchors or anything.This will console the first element having blank in its class name.
console.log($("a[class*='blank']").eq(0).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hello
Are you calling driver.findElement.By.cssSelector?
Your css selector is correct, as you can run in console as document.querySelector('button.button.cw-icon') so the problem should be on your Selenium implementation.
Try to query anything by css, like a button only or something.
My guess is: the DOM isn't ready yet or you're not calling the method properly.
If i am right, you are not clicking the element. Try:
dr.findElement(By.cssSelector("button.button.cw-icon")).click();
If that still doesn't work try using xpath:
driver.findElement(By.xpath("//button[contains(#class,'cw-icon')]/i")).click();
This should be easy but I can't find any topics about this, I think it's because I don't know how to phrase it correctly.
Problem:
When you hover over a link it gets cloned & appended to #container — however I want the link in #container to be the actual URL in its entirety, so if a link text says: "here is an article", I want the one that gets appended to #container to show: http:/www.myarticle.com/name-of-article.
I've tried to make my question very visually clear on CodePen, would someone check it out and advice me? :-)
http://codepen.io/StrengthandFreedom/pen/YqNrYO
The jQuery I use:
$('a').one('mouseover', function(){
$(this).clone().appendTo('#container');
});
Either JavaScript or jQuery solutions are fine, I use both.
You need to update the link text to the value of the href attribute.
$('a').one('mouseover', function(){
var href = $(this).attr('href');
$(this).clone().text(href).appendTo('#container');
});
http://codepen.io/anon/pen/eZgeNe
You may use this:
$('a').one('mouseover', function(){
$('#container').append($(this).attr('href'));
});
You need to catch the attribute of the link, which is done by using attr('attribute-handle')
I have 5 windowDiv on my page that have a button with id "#button". The button's purpose is to change the size of the windowDiv. The windowDiv has a large version (called windowDiv) and a small version (windowDivSmall).
The top container div of the page is called topContainerDiv.
The problem is that I can't get this to work for just one windowDiv, let alone all 5 of them. I know I need to use topContainer.replaceChild(windowDiv, windowDivSmall); but I just can't get it to work.
What I currently have is the following:
$("#button").click(function() {
$(topContainerDiv).replaceChild(this.windowDivSmall, this.windowDiv);
// The code above is broken and doesn't work. Help!
});
I suspect you to use 5 #button.
You cannot.
change in HTML id="button" for class="button" and update your jquery :
$(".button").click(function() {
// correct jquery functions to call here :)
});
replaceChild is a JavaScript function. You are calling this function on a jQuery object. You could try the jQuery replaceWith method`: http://api.jquery.com/replaceWith/
I have a script that is pulling in news from Yahoo on a certain subject. It renders the title of the news feed like this:
<div class="header-title">subject - Yahoo! News Search Results</div>
I would like to change this to read differently. Since this is inserted via JS I thought I could change this with jQuery.
I attempted this:
$('.header-title').text('Subject News');
that did not work, I then attempted this:
$('.header-title').empty();
$('.header-title').text('Subject News');
that also did not work.
Both of the above methods look as if they had no effect on the text.
I am not sure what to do to remove the old text and replace with my text.
Note: All of my code is inside jQuery's Document Ready IE:
$(function(){
//Code Here
});
Don't forget to put your code in DOM ready:
$(function() {
$(".header-title").text("Subject News");
});
Otherwise the code should work fine.
This solution assumes you have no access to the other script that creates the feed widget
WIthout knowing more about other script it sounds like it is asynchronous, and creates the title elements also. You could have a timed interval loop that checks for the element to exist and once it exists do the update:
function changeYahooTitle(){
var $yhooTitle=$('.header-title');
if($yhooTitle.length){
$yhooTitle.text('My New Title');
}else{
/* doesn't exist so check again in 1/10th second, will loop recursively until found*/
setTimeout(changeYahooTitle, 100);
}
}
Then on page load:
$(function(){
changeYahooTitle()
})
If you do have access to the other script it can be modified to accommodate your needs, or you can still use this solution
Try using html() instead of empty() and text()
$(document).ready(function(){
$(".header-title").html("Subject News");
});
What's probably happening:
First you're setting the text: $('.header-title').text('Subject News');
THEN ... after the data finishes the load of the Yahoo or whatever content your text gets replaced actually with the new fetched data
Change the text inside the load callback (after data is loaded) and it will work.
It doesn't work because you call the function before the element is created. If you put your function inside <script> tag after the <div> element it should work