• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
pintee

Loading PHP file into DIV via AJAX

4 posts in this topic

Hi everyone,

This is another n00b question but here goes...

Say I have an index.php that loads a page.php into one of its divs. So:

$('#result').load('page.php');

page.php in turn has its own links and I want it so that when you click on one of these links it loads the respective page into the SAME #result div. Similarly that loaded page might have its own links and I want to continue loading content into the same div. How might I achieve this chain effect of pages?

Thank you for your time.

0

Share this post


Link to post
Share on other sites
$('#result a').on('click', function() {
    $('#result').load($(this).attr('href'));
    return false;
});

 

Something like that? That will load the page the anchor links to. This affects all anchors in the div though, you might want to change the selector to only affect a specific class.

0

Share this post


Link to post
Share on other sites
Without having tested the code, Navall's solution looks otherwise good to me, but has a piece missing - you will have to re-setup the click handlers within a callback passed to load, because as the content of #result gets replaced, the new content will have no handlers set for any elements. This gets easily messy, because essentially you have to setup the click handler doing a load() within the callback of the said load().
 
However, there's an easier way: jQuery's on() allows you to attach the handler to the container element* with an additional selector that limits the handler to specific elements within the container:
 
// "#result a" has just been split into "#result" and "a"
$('#result').on('click', 'a', function() {
    $('#result').load($(this).attr('href'));
    return false;
});

 

* I'm assuming the element #result doesn't get replaced by DOM manipulation or load() or other change, as the idea is to attach the handler to a static element. It's good idea always to attach the handler to the innermost unchanging element, for example to #result in this case.

Edited by Ubik
1

Share this post


Link to post
Share on other sites

Thanks for the replies!

 

Ubik: What do you mean by "#result a" has just been split into "#result" and "a"?

 

Also why is it .load($this) and not .load(page.php)??

0

Share this post


Link to post
Share on other sites

The JavaScript comment was there to draw attention to how the selectors have changed between the examples.

 

In the original example there was $('#result a'), which would return the links within the #result element. The modified example was split into $('#result') which returns just the container element. The on() after it, used to bind the click handler, results with the handler being actually bound to the #result element. That is why the handler would survive even if the contents of the container were replaced by load(). The second parameter to on() is just 'a', and acts as a second search filter that is executed against (or actually within) the results of the "regular" jQuery query earlier on the line that was used to find #result. It is the thing that makes sure the click handler you are binding to #result is actually only executed when a link in #result is being clicked.

 

Regarding the second question, maybe I should break the code down a bit. It could have been done like this:

 

 

$('#result').on('click', 'a', function() {
    var url = $(this).attr('href');
    $('#result').load(url);
    return false;
}); 

 

The click handler has a special variable named this defined within it, and it refers to the element that was clicked. However, you can't use jQuery functions against it directly, you need to use the $(this) form. With that, the attr('href') is called, to get the URL the clicked link is pointing at. That URL is then given to load(). If "page.php" was used, any link within the loaded content would ever only point to page.php. Your original post suggests that the links could point to other pages as well. Even if they didn't, hardcoding the URL is not recommendable, when you can just make the link have a proper URL in its href and use it.

 

Edit: Addition to the first part. There is a parallel with the "two-part" selection with jQuery's function find(). Doing $('#result a') is functionally equivalent to $('#result').find('a'). They both return the links within #result. However, with on() there is an important difference: the selector given to it is not executed immediately. Only when the #result receives a click (remember, the handler is actually bound to it) it runs the second selector to see if the click hit a matching element within the container. In this case, a link.

Edited by Ubik
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0