django jquery .load object values

Question

I am paginating a group of objects, each of which has a button that when pressed, opens a hidden div and pops the div in front of everything. What I want to do is list the attributes of that object in the window that pops up but I can't figure out how to fetch that object from the javascript code.

here is the javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $("#create").click(function(){
            $("#popupContact").load("/cookbook/createrecipe #createform");
        });
        $("#button1").click(function(){
            $("#popupContact").load(load object information for button1);
        });
        $("#button2").click(function(){
            $("#popupContact").load(load object information for button2);
        });
    });
</script>

here is the template:

{% block content %}
    {% autopaginate object_list 6 %}
    <div id="object_cont">
            {% for object in object_list %}
        <div id="object">
            <div id="button{{ forloop.counter }}">      
            <h4>{{ object.name }}</h4>
            <h5>{{ object.author }}</h5>
            <h5>Prep Time: {{ object.prep_time }} minutes</h5>
            </div>
        </div>
    {% endfor %}
    </div>
    <div id="popupContact" class="popup">
    <a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
    </div>
    <div id="backgroundPopup">
    </div>  
    {% paginate %}
{% endblock %}

basically I need a way to fetch the object that is nested in the button div

thanks, snackerfish

Brandon Taylor · Accepted Answer · 2012-04-22 05:28:07Z

1

First, your markup is going to result in a duplicate id parameter "object", which isn't valid HTML. However, there's no need to write individual click handlers for each button:

$('.button').click(function(){
    /* Do whatever with content */
});

jQuery's load method makes a GET request. So, if you're needing to get the URL to call dynamically, I would suggest adding an anchor tag somewhere in the button div that holds the URL to load.

{% for object in object_list %}
    <div class="object">
        <div class="button{{ forloop.counter }}">
            <a href="{% url my_view object.property %}" style="display: none;"></a>   
            <h4>{{ object.name }}</h4>
            <h5>{{ object.author }}</h5>
            <h5>Prep Time: {{ object.prep_time }} minutes</h5>
        </div>
    </div>
{% endfor %}

$('.button').click(function(){
    var content = $.load($(this).children('a:first').attr('href'));
    /* Do whatever with content */
});

Another thing to remember is don't use header tags where they're not needing, simply to get the presentation you want, that's what span tags, and CSS are for :)

Hope that helps you out.

answered Apr 22, 2012 at 5:28

Brandon Taylor

34.8k16 gold badges109 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

snackerfish Over a year ago

this is definitely helpful. What I am missing is what the <a href="{% url my_view recipe.property %}" style="display: none;"></a> say my view is called recipe and it passes in request, cookbook.id and recipe.id. is that what the object.property is? thanks for the help

snackerfish Over a year ago

also what kind of stuff can i do with content in the js say i wanted to get the object.name and object.author. do i do this in the js?

Brandon Taylor Over a year ago

You would need to pass in the parameters necessary to call the view action that would return the content you need. I have no idea what properties are available on the object in your post. If object represents a cookbook, then you could pass in cookbook.id, etc. It just depends on your implementation. In your JavaScript, you can traverse the DOM to get to the properties you need as returned in the HTML from your view, or you might consider passing back JSON from the Ajax call with your content, and the other properties you need.

snackerfish Over a year ago

can you show me an example of traversing the DOM to get the properties as returned in the HTML from the view

snackerfish Over a year ago

i was also wondering if it was possible to get only a div in the piece of code var content = $.load($(this).children('a:first').attr('href')

|

Collectives™ on Stack Overflow

django jquery .load object values

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related