通过锚ID进行AJAX呼叫

I'm building a Codeigniter app that utilizes AJAX with jQuery. In one of my views, I have:

views/users/index.php

<?php echo anchor('users/edit', 'Edit Profile', array(
    'class' => 'user-link', 
    'id' => 'edit'
));?>

<?php echo anchor('users/private_messages', 'Private Messages', array(
    'class' => 'user-link', 
    'id' => 'private_messages'
));?>

<div id="ajax-loader"><img src="<?php echo base_url();?>img/loading.gif"/></div>
<div id="result"></div>

<script type="text/javascript">
$(function(){
    $('.user-link').click(function(event) {
        event.preventDefault();
        $.ajax({
            url: $(this).attr('href'),
            type: 'POST',
            async: true,
            beforeSend: function(){
                $('#result').hide();
                $('#ajax-loader').show();
            },
            error: function(xhr, status, thrown){
                alert(xhr + ',' + status+ ',' + thrown);
            },
            complete: function(){
                $('#ajax-loader').hide();
            },
            success: function(data) {
                $('#result').empty().append(data);
                $('#result').fadeIn('slow');
            }
        });
    });
});
</script>

This works fine, it grabs the href value of each anchor and loads a method on click. Now what I'd like to do is have the ability to load a method with AJAX by visiting the the id of an anchor, for example if I visit

http://appdomain.com/users/index#edit

I want to grab the href value of that anchor and call it with AJAX. The reasoning behind this is that I have a few redirects set up within the Edit controller that point to users/index and I need to load the method again with AJAX after refresh, so I was thinking something like:

redirect(users/index#edit)

Is this practical? I need a method of initiating an AJAX call to a specific method on page load. Any suggestions would be much appreciated.

EDIT :

Grabbing the hash value with Javascript then checking it seems to work:

var hash = window.location.hash;
var id = hash.substring(0);
if(id == '#edit' || id == '#private-messages'){
    $.ajax({
        url: $(id).attr('href'),
        type: 'POST',
        async: true,
        beforeSend: function(){
            $('#result').hide();
            $('#ajax-loader').show();
        },
        error: function(xhr, status, thrown){
            alert(xhr + ',' + status+ ',' + thrown);
        },
        complete: function(){
            $('#ajax-loader').hide();
        },
        success: function(data) {
            $('#result').empty().append(data);
            $('#result').fadeIn('slow');
        }
    });
}

I think this is not the right approach. You're trying to put data in the DOM that you'll be using elsewhere.

For now you might be able to get away with it but if your processes become only a little bit more complex you'll run into problems.

The DOM is a view, not a model. JavaScript is your model, so if you need to keep some data for processing make sure all that data is available in JavaScript.

You'll know which buttons you'll have and what process is attached to it. You can do the linking of the buttons to the process with jQuery. You should replace $(this).attr('href') by just the link, possibly something that gets generated by the server since it knows about URLs.

You can either put inline PHP blocks like:

{
  url: <?php echo json_encode($url);
}

Or you could import everything you need from PHP all at once:

var my_data = <?php echo json_encode(array("url" => $url));?>;

{
    url: my_data.url
}

This approach makes sure your HTML stays clean and you'll always have room to grow your model.

The next step up is to migrate your templates to JavaScript so you don't need the CSS Selector anymore :)