Javascript with AJAX and maybe an anchor tag to control URL?

[treeleaf20]

All,

I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well??

 

An example is facebook:

http://www.facebook.com/photo.php?pi...015&id=9316995

 

When I click on an image, it goes to:

http://www.facebook.com/photo.php?pi...017&id=9316995

 

Then when you click refresh in your browser, it goes to this:

http://www.facebook.com/photo.php?pi...017&id=9316995

 

So if I have this code:

echo "<div style=\"position:relative;\"><img src=\"uploaded_files/$resultsetstory[image_id]\" onclick=\"javascript:getpic(this.myform2);\"></div>";  

Would I need to put an anchor tag link around this?

[Adam]

Believe they alter after the hash don't they? Don't have FB accessible at the moment so can't check for sure.

[treeleaf20]

Yes, that original link doesn't stay the same but after the hash is what gets changed. That's why I was thinking surrounding it with an anchor tag or something like that.

[Adam]

You can use JS' location.hash or window.location.hash to modify that part of the URL.

 

Edit: Just to add, the surrounding anchor really should be reserved for non-JS functionality.

[treeleaf20]

So if I have the following code:

var http_request = false;
   function makePOSTRequest(url, parameters, str) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }

      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;
  			resizeAll();
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function getpic(obj) {
  var poststr = "picture=" + encodeURI( document.getElementById("picture").value );
      makePOSTRequest('getnextpic.php', poststr);
   }

 

Would I put the location.hash in here?? How would this work?

[Adam]

The 'responseText' returned from the AJAX request I assume contains the HTML image tag? What would an example look like? You'd need to modify the URL within your "alertContents()" function, after you've set the "result" var.

 

I'm also assuming you want to append the ID of the image after the hash? In which case it may be worth re-thinking what the AJAX request returns. With the data you have now, if the image ID is even contained, you'd have to parse it out. If you return say an array (image_id, image_src, etc.) makes it easier to work with. You could then generate the HTML from that data and also modify the URL with the image ID. At the moment you're mixing the logic and presentation in a bad way.

[treeleaf20]

Yes, you are right. Baiscally the form that gets submitted passes the next picture_id. I get that through some other calculations. Then it picks that picture id from the query and returns that image.

[treeleaf20]

So I did some research and found this little bit of code:

function realUrl() {

    if (window.location.hash.match(/\.php/)) {

        return 'http://'+window.location.host+window.location.hash.split('#')[1];

    } else if (window.location.href.indexOf('#') != -1) {

        return window.location.hash.split('#')[0];

    } else {

      return window.location.href;

    }

}

 

However, I'm not sure how to make this work with the code I currently have. Any suggestions?

 

Thanks for the continued help.

[treeleaf20]

Actually,

I'd use:

	function redirectHash()
{
	var hash = location.hash;
	if (hash){
		hash = hash.replace('#', '');
		location.href = hash;
	}
}

    </script> 

 

But I'd have to parse out the picture_id. If it's contained in an <img> tag and will always have an id of "showpictureid" how can I find this id?

 

Thanks.

[treeleaf20]

I tried this:

var imgs = document.getElementsByTagName("img");
for ( var d = 0; d < imgs.length; ++d )
    {				
     var img = imgs[d];
     if ( img.className == "showpictureid" )
        {
      imgid = imgs[d].getAttribute("id");
      //alert("The image id is" + imgid);
}
}

 

But it doesn't work. The PHP code is:

echo "<div style=\"position:relative;\"><img src=\"uploaded_files/$resultsetstory[image_id]\" class=\"showpictureid\" id=\"$resultsetstory[image_id]\" onclick=\"javascript:getpic(this.myform2);\"></div>";