Login or Sign Up to become a member!
LessThanDot Sit Logo

LessThanDot

Web Developer

Less Than Dot is a community of passionate IT professionals and enthusiasts dedicated to sharing technical knowledge, experience, and assistance. Inside you will find reference materials, interesting technical discussions, and expert tips and commentary. Once you register for an account you will have immediate access to the forums and all past articles and commentaries.

LTD Social Sitings

Lessthandot twitter Lessthandot Linkedin Lessthandot friendfeed Lessthandot facebook Lessthandot rss

Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.

Your profile

    Search

    XML Feeds

    Google Ads

    « Jquery a tooltip and the need for some ajaxphp and making a summary and closing tags »
    comments

    This is a post for beginners because that is what I am.

    Today I was adding some Ajax to our site. Seeing that this is my first day of Ajax and that I only have very little experience with jquery, I thought it would be hard. So I started off with little things.

    First, I wanted to add a summary to our authorlist page. But I'll talk about that in another article.

    I wanted to provide users a way to access some of phpBB's built-in functionality without the need for a full postback, so that the user is not taken away from the page. I chose something simple and found out how you can do this with a bit of ajax and jquery.

    This thing was there in the form of a link and I don't want to change any of the html since I still want that the way it is for people who use no javascript.

    It is very easy.

    1. $(document).ready(function()
    2. {
    3.     $("#id").click(function()
    4.     {
    5.         var str = $("#id").text();
    6.         $.ajax
    7.         ({
    8.         type: "GET",
    9.         url: $("#id")[0].href,
    10.         success: function(msg)
    11.             {  
    12.                 $("#id").text(str == 'old' ? 'new' : 'old');
    13.             }
    14.         })
    15.         return false;
    16.     });
    17. });

    First thing I found out was that I needed to return false to override the normal behaviour of a link. Without this, the normal postback will just take place and your script is pretty useless.

    Next, I wanted to do the postback in an asynchronous way. For this I can use the jquery ajax method with type GET I just use the link that is there in the href ($("#id")[0].href) which is pretty cool since I could do this for an entire class of links. then I just change the text of the link if it is old then it becomes new else it becomes old.

    Pretty simple I think. Although it took me some time to find out that if you have a syntax error somewhere in the jquery script, then it just does nothing. And if you do $("#id").text instead of $("#id").text() you will get some bizarre code that shows a function.

    In the line success: function(msg) the msg parameter will contain the text that you would normally see on a normal postback.

    Thanks to SQLDenis, AlexCuse and Remou for proofreading this article.

    About the Author

    User bio imageChristiaan is a forensic technician who programs on the side, although my function description says that I do IT-things for 90% of the time . I'm an avid VB.NET fan and I use lots of the ALT.Net techniques, like unit-testing, nhibernate, logging, IoC, ...
    Social SitingsTwitterLinkedInHomePageLTD RSS Feed
    ajax, jquery
    Instapaper

    No feedback yet

    Leave a comment


    Your email address will not be revealed on this site.

    Your URL will be displayed.
    (Line breaks become <br />)
    (Name, email & website)
    (Allow users to contact you through a message form (your email will not be revealed.)