0

I'm loading a php page into a div using the following:

<li><a href="content1.php" data-target="#right_section">Some Content</a></li>

$('[data-target]').click( function (e) {
var target = $($(this).attr('data-target'));
target.load($(this).attr('href'));
e.preventDefault(); // prevent anchor from changing window.location
});

<div id="right_section"></div>

This works perfectly fine.... however:

I want to load another page into that same div, but the link is in content1.php . I basically want it to overwrite itself with another page when a link is clicked.

Thoughts ?

Vacek
  • 179
  • 1
  • 12

1 Answers1

1

You should use jQuery's .on event handler to bind the click event.

http://api.jquery.com/on/

In your case it would look like:

Main Page:

<li><a href="content1.php" class="load-external" data-target="#right_section">Some Content</a></li>
<div id="right_section"></div>

<script>
$(document).ready(function()){
    $('body').on('click', 'a.load-external', function(e){
        var target = $( $(this).attr('data-target') );
        target.load( $(this).attr('href') );
        e.preventDefault();
    });
});
</script>

content1.php

<li><a href="content2.php" class="load-external" data-target="#right_section">Some Content 2</a></li>

What this would do is bind the click event on all a.someclass elements inside body and that includes dynamically created elements.

Btw, I added the .someclass so that it will not bind to all a elements but only to specific a elements that you want to load a content from.

DigitalDouble
  • 1,747
  • 14
  • 26
  • Ok, got it working fine ... there was an extra pair of brackets ... )}; ... in your post above. the code on fiddle worked for me. Thanks very much for this. – Vacek May 25 '15 at 12:29
  • How would I also make this work from a form submit on content1.php ?
    .... doesn't appear to want to work the same. (ps, I'm reading on answers, not just asking here without trying to resolve)
     – Vacek May 25 '15 at 12:54
  • What happens after the submit? Because this will only work if your submitting via ajax, or else you'll be refreshing the whole page after submit. – DigitalDouble May 26 '15 at 01:01
  • Bumped into another small issue. When I click on the link and load Content1.php into right_section, all is fine. but on content1.php I have a link to the same content1.php but with some parameters. e.g.: 2014 . ... this link does nothing at all. I cannot get it to load over top of itself with different data based on the url parameters... thoughts ? I know the link works if I remove the class and target, but I need to load it in place over itself – Vacek May 28 '15 at 14:14
  • Try opening the generated link `content1.php?name=&group=&year=2014` on a browser to check if it really works. There shouldn't be an issue here because javascript can only load the compiled html. – DigitalDouble May 28 '15 at 14:38
  • the links work fine if I load them directly, or remove the class and target – Vacek May 28 '15 at 14:49
  • any further thoughts ? – Vacek May 28 '15 at 17:35
  • Thanks. I'm absolutely stumped .... I have a lot of database work going on is this page to build a table.. might be related or not. I've about exhausted all I can think of at this point. I appreciate you trying to help. – Vacek May 29 '15 at 13:50
  • 1
    Try checking for javascript errors on the browser's console. Because as you said, when you load the page independently, the parameters work so definitely there's no db problem. – DigitalDouble May 29 '15 at 13:55
  • Uncaught Error: Syntax error, unrecognized expression: M&group=narmo&archived=yes So the M at the start of that query string would actually be passed in its entirety like this: name=Bob M&group=narmo&archived=yes .... Do you think the space between Bob and the M are causing this ? – Vacek May 29 '15 at 14:05
  • Eureka ... it was the space in the name that was causing the grief. So my new link is: ... in escaped name I added %20 in place of the space. Who would have thunk :) Thanks again DigitalDouble – Vacek May 29 '15 at 14:35