Noobie Jquery Question - Why doesn't this simple script work? - javascript

I'm learning JQuery and I wrote a simple AJAX external script for my homepage that tries to load some static markup from a seperate html file and insert it into my homepage when i hover over a link...
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('<div id="contact_container">').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});
at this point, i'm simply trying to get the 'test2' alert box to show, which is why i have the code below that commented out. currently, the 'test1' alert box is the only the one that shows, meaning the 'test2' alert line never gets hit. your thoughts?
here's the snippet of code from my contact.htm file...
<div id="contact_container">
<div id="contact">
<p>
<strong>NAME</strong>: My Name<br/>
<strong>EMAIL</strong>: My Email<br/>
<strong>SKYPE</strong>: My Skype Handle<br/>
<strong>ADDRESS</strong>: My Address<br/>
</p>
</div><!--end contact-->
</div><!--end contact_container-->
thanks so much in advance for your help!

You were calling $.load using incorrect selector syntax, a selector is not an HTML string, it must conform to the syntax rules set by the jQuery Selectors manual:
$('a#contact_link').hover(function()
{
alert('test1');
$('div#contact_container').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});

The selector is probably the cause.
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('#contact_container').load('contact.htm', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});

I believe your #contact_container selector is not quite kosher. Check out the selector doco (http://docs.jquery.com/Selectors) at the JQuery site. I think something like this might be a little better:
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('#contact_container').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});

Related

why can't my content appear on click like this?

I've wrote a javascript to show a hidden content but it just won't show up when i click it, can anyone help me with this?
Here's my script:
<script src="style/jquery/jquery.js"></script>
<script>
$(document).ready(
function(){
$("#yes").click(
function(){
$("div#did").show();
}
)
}
function(){
$("#no").click(
function(){
$("div#did_not").show();
}
)
}
)
</script>
My css file to hide it:
#did{
display: none;
}
#did_not{
display: none;
}
And my HTML:
<button id="yes">Yes</button>
<button id="no">No</button>
<div id="did">
<p>
Yes
<p/>
</div>
<div id="did_not">
<p>
No
</p>
</div>
Help me here!
While the reason it didn't work has been answered (syntax errors), I'd suggest simplifying your code to:
$('button').on('click', '#yes, #no', function(){
$('#did' + (this.id === 'yes' ? '' : '_not')).show();
});
JS Fiddle demo.
Assuming only one response (given the Boolean nature of the answers 'yes'/'no') should be visible:
$('button').on('click', function(){
var response = $.trim($(this).text());
$('div.response').hide().filter(function(){
return $.trim($(this).text()) === response;
}).show();
});
JS Fiddle demo.
References:
$.trim().
filter().
hide().
on().
show().
text().
I think your code has some syntax error, try this:
$(document).ready(function(){
$("#yes").click(function(){
$("div#did").show();
})
$("#no").click(function(){
$("div#did_not").show();
})
});
Check JSFiddle Demo
show is a function not a property. So you have to add () to make it work.
$("div#did_not").show();
Because you are defining thing as function and you are not calling that
$(document).ready(
function(){
$("#yes").click(function(){
$("div#did").show();
})
}(), //here you have to call the function to make it work by adding parentheses
function(){
$("#no").click(function(){
$("div#did_not").show();
})
}()
)
DEMO
I've found out the true problem:
I've forgotten that ../ before that style/jquery/jquery.js

Select all Forms in a div and prevent the default action

I want to Display part of my website in a layover. If the user has no javascript, the layover is displayed as a normal website.
I'm getting the Website with getController and my problem occures in handleLinksAndForm.
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
This works as intended. Whenever a click on a Anchor element in Popover div happens, the default action is prevented and the new website is loaded in the popover.
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
However, this part does not work. Neither the foreach part nor the .submit().
So my Question is: Whats my mistake? If I use $("form").each(function() {... all forms are recognized, but if I add the extra selector #Popup none is recognized.
Complete Code:
function getController(ctrl,element)
{
$.get('/service/controller/' + ctrl, function(data){
handleLinksAndForm(data,element)
})
}
function getPostController(ctrl,args,element)
{
$.post('/service/controller/' + ctrl,args, function(data) {
handleLinksAndForm(data,element)
});
}
function handleLinksAndForm(data,element)
{
element.html(data);
element.prepend("<div id=\"popupClose\">x</a>");
centerPopup();
$("#popupClose").click(function(){
disablePopup();
});
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
}
You didn't provided any html code. So hard to say if isn't here more problems for example if is really element form a child of #popup.
But first try to use:
return false;
instead:
e.preventDefault();
Also you can use:
$("#Popup form") instead $("#Popup > form") it is safer way.
I just tested with the code below and I was able to locate the child element.
$("form", "#Popup").submit(function(e) {
alert("form");
...
});
N.B. This syntax also calls .find() but is slightly easier on the eyes.
Found my mistake:
I got:
<table>
<form>
<tr><td>...</td></tr>
</form>
</table>
The right way is:
<form>
<table>
...
</table>
</form>

HTML content is not getting on Jquery click function

In my code I have the following:
$(document).ready(function(){
$("input#Addmore").click(function(){
$('div#add_div').append("<a class='remove' href='#'>X</a>");
});
});
This code on click of add more button and I want to remove parent div of above added code on click of "X" by jquery. for that purpose i am using this code
$("a.remove").click(function(){
$(this).closest("div").remove();
});
But the code is not working because jQuery did not getting append anchor code. Can any one tell me the solution?
You need to delegate the event to the nearest static element. Try this:
$('#add_div').on('click', 'a.remove', function() {
$(this).closest("div").remove();
});
Or if you are using an older version of jQuery (less than 1.7) use delegate() like this:
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});
Try this
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});
Or you can try this:
$("input#Addmore").click(function(){
$("div#add_div").append("<a class='remove' href='javascipt:;' onclick='remove(this);return false' href='#'>X<br/></a>");
});
and here is remove function:
window.remove = function(obj)
{
$(obj).closest('div').remove();
}
see here : http://jsfiddle.net/Hvx2u/3/

jQuery: hijack a link and find its parent

I know how to hijack a link in jQuery, and I know how to find an element's parent, but I can't seem to combine the two. I have multiple divs, each of which contains a link. I want to hijack the link and update the parent div's content.
<div class="container-1">
Add content
</div>
<div class="container-2">
Add content
</div>
Here's what I have with jQuery:
$(function() {
$(".pager A").live("click",
function() {
$.get($(this).attr("href"),
function(response) {
$(this).parent().attr("id").replaceWith(response); // This is wrong
});
return false;
});
});
The line with the "This is wrong" comment doesn't have what I want for $(this). It appears to contain the result from the previous expression, not the element I selected (".pager A").
How can I do this?
Bonus question: Visual Studio complains that ".get is a reserved word and should not be used as an identifier". What exactly is the problem?
EDIT: Sorry, I meant <div id="container-1">, not <div class="container-1">. Ditto for the 2nd div.
Try saving the reference to the current execution context where it points to the anchor to refer to later in the callback:
$(function() {
$(".pager A").live("click",
function() {
var el = this;
$.get($(el).attr("href"),
function(response) {
$(el).parent().html( response ); // is this what you want? .attr('id') would return a string and you can't call jQuery methods on a string.
});
return false;
});
});
First of all:
$(function() {
$(".pager A").live("click",
function() {
var $link = $(this);
$.get($(this).attr("href"),
function(response) {
$link.parent().attr("id").replaceWith(response); // This is wrong
});
return false;
});
});
You shouldn't use $(this) in callback function.
And the second - your link's parent element doesn't have id attribute. If you want to replace it's content use something like html() or text()

Live query plugin doesn't work with the visible attribute selector

I have the following running in the jquery ready function
$('[id$=txtCustomer]:visible').livequery(
function() { alert('Hello') },
function() { alert('World') }
);
I get an alert for the first time saying 'Hello' but the functions are not called onwards when i toggle this visibility of the textbox.
Please help.
The livequery "match/nomatch" events don't work with jQuery pseudoselectors like ":visible". They do work for class selectors.
An easy fix would be to also add a class when you show the item, and remove a class when you hide the item.
For example:
(html)
<input type="button" value="toggle"/>
<div id="item"
style="width:100px;height:100px;background-color:#ff0"
class="Visible">
</div>
(script)
$(function() {
$("#item.Visible").livequery(
function() {
alert("match");
},
function() {
alert("nomatch");
}
);
$("input").click(function() {
if ($("#item").is(":visible"))
$("#item").hide().removeClass("Visible");
else
$("#item").show().addClass("Visible");
});
});
A demonstration of this can be found here: http://jsbin.com/uremo

Categories