SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    363
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Reaching the parts Ajax doesn't reach

    I have an Ajax related problem for which I'm looking for guidance rather than a specific solution.

    The site I'm working on lists holiday accommodation (from a searchable database). The user can then 'short-list' several properties for further action (as yet unspecified). This is similar to having a list of products and adding them to a cart. Ajax is working fine to the point of adding the items to the Short-list, but because the page is no longer refreshing certain PHP variables aren't getting changed, so:
    (a) The 'Add to Shortlist' button isn't changing to 'Remove' and
    (b) The 'div' showing the Short-list controls isn't appearing

    A non-Ajax version can be seen at:
    http://www.holidaymullandiona.com/index.php?ac[1]=HO&ac[2]=GH&ac[3]=BB&loc[1]=NW&loc[4]=SW&accn=Search

    This will show what should happen when an item is added to the Short-list, but the page refreshes and returns to the top. With Ajax nothing moves (which is the intention), although the addition to the Short-list does happen in the background, and everything displays as it should when the screen is (manually) refreshed.

    I'm not sure how best to get the changes (a) & (b) above to happen with Ajax without losing the non-Ajax capability provided by the PHP.
    I have wondered about setting the button image with CSS and then changing the class using Ajax, but haven't tried it yet. It must happen only on the clicked button, of course.

    Can someone point me in the right direction, please ? (Or tell me I'm wasting my time, and Ajax isn't appropriate here).
    Tim Dawson
    Isle of Mull, Scotland

  2. #2
    SitePoint Enthusiast NathanaelB's Avatar
    Join Date
    Dec 2006
    Location
    Canberra, Australia
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Bit hard to help without actually seeing the real system that uses AJAX to postback the cart selection, but the simplest option would be to use JS sync'ed with the AJAX to control the img (either DOM or CSS) ... but it's not the most reliable as it is disconnected from what's happening on the server.

    Best to keep it all together and have valid triggers, so once the server has processed the AJAX postback the server actually manipulates the DOM/CSS to reflect the data changes either as instructions to be parsed client-side with JSON ... or send back an actual function which is simply executed on the client; I think that may also be done with JSON - not sure.
    Nathanael Boehm
    Web user interaction and UX designer, social media consultant
    Links: bio, linkedin, twitter, flickr

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    363
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I'm relatively new to Ajax (I let it frighten me for too long).

    My current arrangement is very simple. Leaving aside the other Ajax functions, the SEND function is:-

    Code:
    function sendData(data) {
    	var request = getHTTPObject();
    	if (request) {
    		request.onreadystatechange = function() {
    			parseResponse(request);
    		};
    		request.open("POST", "/index.php?ajax", true );
    		request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		request.send(data);
    		return true;
    	} else {
    		return false;
    	}
    }
    And in the receiving script (index.php) I have this excerpt:

    Code:
    //	ADD ITEM TO SHORTLIST
    if (isset($_POST['action']) && $_POST['action'] == 'Add to shortlist') {
    	$_SESSION['shortlist'][] = $_POST['sl_id'];
    
    	if (!isset($_GET['ajax'])) {
    		header("Location: /?$get");
    	} else {
    		unset ($_GET['ajax']);
    		exit();
    	}
    }
    Very simple, it just adds the ID of the selected item to the Session variable. Then tests whether the request came from Ajax; if not it refreshes the page, otherwise does nothing (except unset $_GET['ajax'], which I put in as a precaution)

    The PHP code which currently sets the 'Add to Shortlist' button is:

    Code:
    <div class="adder">
       <form class="viper" action="" method="post">
         <input type="text" name="sl_id" value="<?php echo ($accn['accn_id']) ?>" />
         <?php if (!in_array($accn['accn_id'], $_SESSION['shortlist'])) : ?>
    	<input class="submit" type="submit" name="action" value="Add to shortlist" />
         <?php else : ?>
    	<input class="submit" type="submit" name="action" value="Remove" />
         <?php endif; ?>
       </form>
    </div>
    This is looking in the Session variable to see if the ID is in the Shortlist array already. If NO, it sets the button to 'Add to Shortlist', otherwise (i.e. if YES) it sets the button to 'Remove' (and changes the value of the 'action', which is vital).
    (The 'text' input displays the item ID, and will eventualy be 'hidden'). The Ajax 'onsubmit' action is appended to the 'submit' button. So far only to the 'Add...' button, of course.

    This is the part that it's really inportant to change with Ajax, so that the 'Remove' button is shown, with appropriate 'onsubmit' action.

    That's a long explanation, but I hope it's understandable.
    Tim Dawson
    Isle of Mull, Scotland


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •