We Keep Coding

Why isn't my jQuery updating the DOM?

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

Clicking a div changes another div's content

I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?

You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>

Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.

Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples

do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/

Change value of html element with external javascript

Below is the div that I want to alter
<div id="#page.Page" class="pageMessages" data-messages='#Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(#page.Messages))'></div>
I want to change the value of the message when a javascipt function is called from an external .js file. What is the correct way to do this?

Like So...
// This Performs the Change
$('#changeme').attr('data-messages', 'New Value');
// Show the Change
$('#changeme').html( $('#changeme').attr('data-messages') );
Here is a Working Fiddle
The one problem I see is the id='#page.Page' , this doesnt work.

I hope i get what you're trying to do, you can use jquery's change attribute for that
JQUERY
<script>
$(document).ready(function(){
$(".pageMessages").attr("data-messages","your-new-value-here");
});
</script>
DOC: http://api.jquery.com/attr/

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...

you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works

http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

Invoking jQuery function without an element

So, I use jQuery quite extensively and I am well aware of the "right" way to do the below, but there are times where I want to solve it in a more generic way. I'll explain.
So, I may have a link, like this: <a href='menu' class='popup'>Show menu</a>. Now, I have a jQuery function that fires on click for all a.popup that takes the href-attribute and shows the <div id='menu'></div> item (in this case). It also handles URL's if it can't find a DOM item with that ID.
No problem here. But, there are times when I don't have the same control over the coe where I can create a selectable target that way. Either because the code isn't created by me or because it is created through a chain of function that would all need a huge ovrhaul which I won't do.
So, from time to time, I would like to have this code:
Show menu
This would be in a case where I can only submit the label and the HREF for a link. No class, no nothing.
Problem here is that the function popup() has no idea about what element invoked it, and in most cases that's not a problem for me, since I only need to know where the mouse cursor was upon invokation.
But in some cases, I use someone elses jQuery functions, like qTip or something else. so I still want to fire off qTip(); when clicking a link that runs this JS function, but what do I attach it to to make it show? I can't just runt $().qTip(); because that implies $(this) and "this" is undefined inside the function.
So how do I do it? Any ideas?

Is there anyway you change the javascript method to javascript:popup('menu', this);? I've used this method successfully many times.

Instead of referring to "this" try referring to $('a:focus') to refer to the link that was clicked.
Here's a quick and, as #Crescent Fresh would add, dirty (☺) sample:
<body>
<p>Show popup()</p>
<div id="menu" style="display:none">Today's menu</div>
<script type="text/javascript">
function popup(elm) {
$('#' + elm).show();
alert( $('a:focus').text() )
}
</script>
</body>
I tried just ":focus" but IE7 returned too much content. I tested this in FF 3.6.3, IE7, Chrome 4.1.249.1064 (all on Windows) and it seems OK, but I see now (when I was just about to hit "Post Your Answer") this relies on the browser's native support for querySelectorAll - see this jQuery Forum post ":focus selector filter?" and the jQuery.expr entry in the jQuery Source Viewer (where it appears Paul's idea was not implemented).

How about
Show menu
Once you get the event object you can virtually do anything to it.