Solved

Stop link from working - return false?

Posted on 2008-10-27
7
4,443 Views
Last Modified: 2013-11-11
Hi,

I want jQuery to load the right file into the right div by AJAX, and so I need to disable the a tags from doing what they usually do.  I thought that returning false, as I have done in the code snippet, would do this, but it didn't.

Can anyone help?

.yes is an 'a' tag wrapped around an img, it is inside a div with an id of #box_1.  Have I got the selector syntax right?

Thanks
<script type="text/javascript" src="jquery-1.2.6.js">

</script>

<script type="text/javascript">
 

$(document).ready(function(){

	$('#box_1.yes').click(function(){

		var next = this.attr('href');

		$('#box_2').load(next);

		return false;

	});

});
 

</script>

Open in new window

0
Comment
Question by:deafpanda
  • 4
  • 2
7 Comments
 

Author Comment

by:deafpanda
ID: 22812302
To clarify, the code above makes no difference to the page - ie when .yes is clicked, the browser is taken to the new page, rather than the file being AJAXed in.
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22812357
if you dont have... dont use href - put it in other attribute and it will work. As far as i know href attribute is always fired if it contains something :)
0
 
LVL 1

Expert Comment

by:jwfranklin
ID: 22812409
Inside the event handler type event.preventDefault(); that will do the same as return false
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Expert Comment

by:jwfranklin
ID: 22812421

<script type="text/javascript" src="jquery-1.2.6.js">

</script>

<script type="text/javascript">

 

$(document).ready(function(){

        $('#box_1.yes').click(function(event){

                event.preventDefault();

                var next = this.attr('href');

                $('#box_2').load(next);

        });

});

 

</script>

Open in new window

0
 
LVL 1

Accepted Solution

by:
jwfranklin earned 500 total points
ID: 22812670
Plus also your selector is wrong, it should be:

$('#box_1 a.yes').click(function(event){
0
 

Author Comment

by:deafpanda
ID: 22812779
Thanks for the responses,

I've altered the code so that it now reads exactly like the snippet attached in jwfranklin's comment.  The same thing happens - when .yes is clicked I am taken to the page relating to the href attribute of .yes.

Just in case there's a problem with my HTML, I've attached that.
<div id="box_1">

<div class="rounded_box">

<div class="box_top">

<div class="top_right">

</div>

</div>

<div class="box_content">

<p>Do you know what type of project would be suitable for your site?</p>

<div class="choices"><a class="yes" href="one_yes.html"><img src="yes.png" alt="Yes" /></a><a class="no" href="one_no.html"><img src="no.png" alt="no" /></a></div>

</div>

<div class="box_bottom">

<div class="bottom_right">

</div>

</div>

</div>
 

</div>

<div id="box_2">

Open in new window

0
 
LVL 1

Expert Comment

by:jwfranklin
ID: 22812839
For your HTML your selector will be

$('.choices a.yes').click(function(event) { ... });
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now