CODEWITHSUNDEEP
htmlajaxdjangojquery
Praful Bagai
Praful Bagai

Reputation: 17382

Jquery Ajax Auto Refreshing <div>

Since I too have also seen this question on SO, so this might be a duplicate for many, but I've not found an answer to this question.

I want select an item from the navigation bar and show the content inside another tag by replacing the current data with AJAX-generated data.

Currently I'm able to post the data into the python services, it processes it and finally returns it back to the client. This last part of changing the data into the div is not happening.

Here is my code.

python service

def dashboard(request):

    if request.is_ajax():
        which_nav_bar = request.POST['which_nav_bar']
        print which_nav_bar // prints which_nav_bar inside the terminal

    ctx = {'result' : "hellloooo"}
    return render_to_response('dashboard/dashboard1.html',ctx, context_instance = RequestContext(request))

JS file

$(function (){
    $("#nav_bar li").click(function(){
        alert($(this).text());     // works fine
        $.ajax({
            type: "POST", //able to post the data behind the scenes
            url: "/dashboard/",
            data : { 'which_nav_bar' : $(this).text() },
            success: function(result){
                 $(".container-fluid").html(result);
            }

        });
    });
});

HTML

<div class="navbar">
              <div class="navbar-inner">
                  <ul class="nav" id="nav_bar">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Device</a></li>
                    <li><a href="#">Content</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Help</li>
                </ul>
              </div>
        </div>  

<div class="container-fluid"></div>

OUTPUT

On $(".container-fluid").html(result); this is what I get actually. I instead want that my python code should return something(in this case ctx) and prints the ctx variable.

Upvotes: 2

Views: 733

Answers (3)

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

try 

$("#nav_bar li").click(function(){
        var text_input = $(this).text();     // works fine
        $.ajax({
            type: "POST", //able to post the data behind the scenes
            url: "/dashboard/",
            data : { 'which_nav_bar' : text_input  }
            success: function(result){
                $("#container-fluid").text(result);
            }

        });
    });

in your code you use 

data : { 'which_nav_bar' : $(this).text()},

but in your ajax request $(this).text() would be undefined ,

so assign it to a variable and use it inside the data{}

and also remove the comma at the end

Upvotes: 0

iJade
iJade

Reputation: 23801

Change 

$("#container-fluid").text(result);

to

$(".container-fluid").text(result);

# is used to access by id and . is used to access by class

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

change it id

<div id="container-fluid"></div>

this is id selector $("#container-fluid")

id-selector

if you want to access by class you can use

$(".container-fluid")

class-selector

Upvotes: 1

Related Questions