change the div content based on the $_GET value

Question

I have a main php file where i have a 'navbar' with links to various pages, on click of the 'navbar' item i want the content of the div replace with the respective page.

navbar.php:

<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>    
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>

main.php:

<script>
$(document).ready(function() {  
$('#content').load('<?php echo $_GET['nav'] ?>');           
});
</script>

With this code am expecting that on click of the navbar item the div content has to change to respective page reference. what i found is, for example when i click on page1 my url is being changed to main?nav=page1.php, but the script to change the div content is not triggered at all. Please correct me however i don't want to change the link to '#'.

You have a huge [XSS security hole](http://stackoverflow.com/questions/71328/what-are-the-best-practices-for-avoiding-xss-attacks-in-a-php-site) there, and it is rather pointless (and inefficient and search engine unfriendly) to follow a link to a new page only to use Ajax to load all the content. Just include the content with PHP. — Quentin, Sep 09 '12 at 08:32
I was gonna say the same thing, just either include the content straight away with AJAX or PHP, but don't use such an ineffective way like this one — Alexander, Sep 09 '12 at 08:35
what if i enter url `http://example.com/main.php?nav=main.php`?? :)) — Peter, Sep 09 '12 at 08:37
Just a suggestion : You can use twitter bootstrap for this..as it has inbuilt functionality for this kind of thing and it makes life easier..better you can try backbone.js ..:) — boyfromnorth, Jan 22 '13 at 09:44

score 1 · Answer 1 · answered Sep 09 '12 at 08:33

1

<script>
$(document).ready(function() {  
  $('uL#navbar a').click(function(e){
    e.preventDefault();
    $('#content').load($(this).attr('href'));
  });
});
</script>

answered Sep 09 '12 at 08:33

Peter

16,453
8
51
77

score 0 · Answer 2 · answered Sep 09 '12 at 08:33

0

You may try this

$(document).ready(function() { 
    $('ul li a.button').on('click', function(e){
        e.preventDefault();
        $('#content').load($(this).attr('href'));           
    });
});

answered Sep 09 '12 at 08:33

The Alpha

143,660
29
287
307

score 0 · Answer 3 · answered Sep 09 '12 at 08:36

0

You need to use AJAX for it

<script>
    $(function(){
        $('.button').on('click', function(e){
            e.preventDefault();
            $('#content').load($(this).attr('href'));
        });
    })
</script>

<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>    
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>
<div id="content"></div>

answered Sep 09 '12 at 08:36

Alexander Larikov

2,328
15
15

1) Is it the same? 2) Why did you add the same answer as sheikh? 3) Try to understand that usually it takes time to type and test and submit. – Alexander Larikov Sep 09 '12 at 08:42
1) yes, it's the same 2) skheik added answer after me 3) what tests :D no offence, but IMO there is no point to duplicate answers – Peter Sep 09 '12 at 08:44
here when i use the code my url is not changing and the div is replacing with the same page contents, but in the new div i have a form where the action should keep me in the same page. Whats happening is when i submit the form with the new div am being redirected to main.php, which i don't want. how to achieve that? – Chanakya Vadla Sep 09 '12 at 08:53

score 0 · Answer 4 · answered Sep 09 '12 at 08:48

Try;

$(document).ready(function() { 
    $('.button').on('click', function(e){
        e.preventDefault();
        $('#content').load($(this).attr('href'));           
    });
});

in your php, change code so that the echo look like;

<li id="nav-attn"><a class="button" href="yourpage.php?nav=page1.php">Page1</a></li>

change the div content based on the $_GET value

4 Answers4