Question

I am loading content from a different page of my site into a result-container (div class).

    $('.result-container').load('../path/otherpage.html #ID');

So far so good, that works.
Now, I need to update any link within the result-container when it s clicked. Reason being, they all links still point to their original location (from where they were loaded from).

The idea is , when clicking on a link, I get the href attribute. If it starts with “files/”, than it is a link relative to the original page (if it starts with something else, it is a link to somewhere else and is ok). So, I need to add to the front of the (just clicked) href “../path/”, to make the final href path look like “../path/files/etc….”.
I have some bits working, but really struggle to piece it all together…. can anyone reach me a hand please?
Thanks!
M.

    $(function() {
    $(".result-container").live("click",   //on click on element
                     function() {
                     $.get($(this).attr("href"), //get the href attribute                                              
                              if ($('a[href^="files/"]'))   //if attribute starts with "files/"
                                 {function() {
                                 var href = $(this).attr('href'); //get the attribute content - guess I could have done that above?
                                 $(this).attr('href', '../start/path/' + href); //append the start path to original path
                                             };
                                 }
                           )};
                           )};

---

Excellent, Thank you !!!!!
Now I am loading an element from a different page on my site with:

$('.result-container').load(../path/conetent.html #unique-ID); //load conent from different page on my site

on click, it changes every element which starts with “files/” to “../path/files/”:

  $(function() {
    $(".result-container").live("click",
                     function() {
                        $('.result-container').html();
                        var test = $('.result-container').html().replace(/"files\//gi, '"../path/files/');
                        $('.result-container').html(test);                       
                           }); }); 

That works. This changes the original content and displays the altered content after an active click in the .result-container.
Now I am trying to remove the .live(“click”, trigger here. (This trigger is only there, because my initial approach to achieve this was different). But when I remove the “click”, this script does not change the text automatically… Any idea on how this executes and displays the altered content after I load the content from the unique ID container?

Answer 1

How about just replacing any instance of the string “files/ with “/path/. So something like

var new_text = $('#my_div').html().replace(/"files\//gi, '"/path/');
$('#my_div').html(new_text);

You’ll have to forgive me if my regex is a bit off but that should give you an idea.