CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Benjamin H
Benjamin H

Reputation: 3

Navigation bar onclick with Ajax

I would like to redirect a content with a PHP function:

<div>$content</div>

in case of condition on my navbar

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"   style=color:blue;> Information <span class="caret"></span></a>
  <ul class="dropdown-menu">
        <li id="uniqueId01">Submenu_1</li> 
        <li id="uniqueId02">Submenu_2</li> 
        <li id="uniqueId03">Submenu_3</li> 
  </ul>
</li>`

I am trying with this navbar.php and bellow phpfunc.php

navbar.php

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<h3 style=color:blue;>INFORMATION </h3>
<ul class="nav nav-pills" style="background-color:lightblue" >
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"   style=color:blue;> Information <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li id="uniqueId01">Submenu_1</li> 
        <li id="uniqueId02">Submenu_2</li> 
        <li id="uniqueId03">Submenu_3</li> 
    </ul>
</li>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

$('.dropdown-menu li').on('click', function(){
    $.get('phpfunc.php', { menu: this.id }, function(data){
        $('body').append(data); //do something with whatever data is returned
    });
});

</script>
</body>
</html>

phpfunc.php

<?php

switch($_GET['menu']){

    case 'uniqueId01':
        menu1();
        break;
    case 'uniqueId02':
        menu2();
        break;
    case 'uniqueId03':
        menu3();
        break;
    default:
        someDefaultFunction();
        break;
}

function menu1(){
    include 'home.php'; //do something
}
function menu2(){
    include 'user.php';
}
function menu3(){
    echo 'You clicked Menu 3! ';
}


?>

The problem is: the Ajax script returns each value glued to next choice value. I would like to return a value and delete the other value by new to display pages.

I would also like this function to return into the div and not the body.

Upvotes: 0

Views: 3397

Answers (3)

Edwin Krause
Edwin Krause

Reputation: 1806

This seems to be a very basic question, but here is how I understand your problem

Use the $('#myelementID').html('text') function, to overwrite the current content of the element.

<div id="myPageDisplay"> Content goes here!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('.dropdown-menu li').on('click', function(){
    $.get('phpfunc.php', { menu: this.id }, function(data){
        $('#myPageDisplay').html(data); // inject HTML into above DIV,
    });
});
</script>

Upvotes: 2

Benjamin H
Benjamin H

Reputation: 3

i have signaled iam new in Ajax ;)

many thanks to you thant work perfectly with this code

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<h3 style=color:blue;>INFORMATION </h3>
<ul class="nav nav-pills" style="background-color:lightblue" >
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"   style=color:blue;> Information <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li id="uniqueId01">Submenu_1</li> 
        <li id="uniqueId02">Submenu_2</li> 
        <li id="uniqueId03">Submenu_3</li> 
    </ul>
</li>
</ul>
</div>

<div id="myPageDisplay"> Content goes here!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

$('.dropdown-menu li').on('click', function(){
$.get('phpfunc.php', { menu: this.id }, function(data){
    $('#myPageDisplay').html(data); // inject HTML into above DIV,
});
});

</script>
</body>
</html>

the php is still intact, thanks to stackoverflow !

Upvotes: 0

Tasos Fel
Tasos Fel

Reputation: 331

So you want to show your data inside a div . You can create a div element

<div id='wrapper-ajax'></div>

Then in your js Code try something like this:

 $('.dropdown-menu li').on('click', function(){
        $.get('phpfunc.php', { menu: this.id }, function(data){
         $('#wrapper-ajax').html(data); //do something with whatever data is 
          returned
        });
    });

Upvotes: 0

Related Questions