Question

I am designing a cookbook website and I am stuck on this one problem.

I am trying to combine django pagination with this smooth popup jquery plugin:

http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

When I load the content only the first recipe button activates the popup window, which will display whatever recipe you clicked on
This I believe is because there is only one instance of the button object and that is being assigned to the first recipe (see code snippet) in the paginated results

how can I modify the code to allow for multiple buttons?

here is the block content for the relevant code:

revised template: this now works

{% block content %}
    {% autopaginate recipe_list 6 %}
        <div id="recipe_cont">
        {% for recipe in recipe_list %}
        <div id="recipe">
            <img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="30" width="30" style=display:"inline"; />
            <div id="button{{ forloop.counter }}"><input type="submit" value="View" /></div>        
            <h4>{{ recipe.name }}</h4></a>
            <h5>{{ recipe.author}}</h5>
            <h5>Prep Time: {{ recipe.prep_time }} minutes</h5>
            <h6><a href="/addrecipe/{{ recipe.id }}">Add Recipe</a>
            <a href="/removerecipe/{{ recipe.id }}">Remove Recipe</a></h6>
            <div id="popupContact{{ forloop.counter }}">
                <a id="popupContactClose{{ forloop.counter }}" style="cursor:pointer;float:right;">x</a>
                <h1>{{ recipe.name }}</h1>
                <h3>{{ recipe.author }}</h3>
                <p id="contactArea">
                    Ingredients: {{ recipe.ingredients }}
                    <br/><br/>
                    Steps: {{ recipe.steps }}
                </p>
            </div>
            <div id="backgroundPopup"></div>        
        </div>
        {% endfor %}
        </div>
        <div id="col2-footer">
        {% paginate %}
        <p id="recipe_order_text"> order by: <a href="/account/ordered/name">abc</a>|<a href="/account/ordered/date">date</a> 
        </div>

    {% endblock %}

revised jquery:

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: [e-mail]
//@license: Feel free to use it, but keep this credits please!                  
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup1(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact1").fadeIn("slow");

        popupStatus = 1;
    }
}
function loadPopup2(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact2").fadeIn("slow");

        popupStatus = 1;
    }
}
function loadPopup3(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact3").fadeIn("slow");

        popupStatus = 1;
    }
}
function loadPopup4(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact4").fadeIn("slow");

        popupStatus = 1;
    }
}
function loadPopup5(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact5").fadeIn("slow");

        popupStatus = 1;
    }
}
function loadPopup6(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact6").fadeIn("slow");

        popupStatus = 1;
    }
}
//disabling popup with jQuery magic!
function disablePopup1(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact1").fadeOut("slow");
        popupStatus = 0;
    }
}
function disablePopup2(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact2").fadeOut("slow");
        popupStatus = 0;
    }
}
function disablePopup3(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact3").fadeOut("slow");
        popupStatus = 0;
    }
}
function disablePopup4(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact4").fadeOut("slow");
        popupStatus = 0;
    }
}
function disablePopup5(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact5").fadeOut("slow");
        popupStatus = 0;
    }
}
function disablePopup6(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact6").fadeOut("slow");
        popupStatus = 0;
    }
}
//centering popup
function centerPopup1(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $("#popupContact1").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
function centerPopup2(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $("#popupContact2").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
function centerPopup3(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $("#popupContact3").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
function centerPopup4(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $("#popupContact4").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
function centerPopup5(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $("#popupContact5").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
function centerPopup6(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $("#popupContact6").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){   
    //LOADING POPUP
    //Click the button event!
    $("#button1").click(function(){
        //centering with css
        centerPopup1();
        //load popup
        loadPopup1();
    });
    $("#button2").click(function(){
        //centering with css
        centerPopup2();
        //load popup
        loadPopup2();
    });
    $("#button3").click(function(){
        //centering with css
        centerPopup3();
        //load popup
        loadPopup3();
    });
    $("#button4").click(function(){
        //centering with css
        centerPopup4();
        //load popup
        loadPopup4();
    }); 
    $("#button5").click(function(){
        //centering with css
        centerPopup5();
        //load popup
        loadPopup5();
    });
    $("#button6").click(function(){
        //centering with css
        centerPopup6();
        //load popup
        loadPopup6();
    });                 
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose1").click(function(){
    disablePopup1();
});
    $("#popupContactClose2").click(function(){
    disablePopup2();
});
    $("#popupContactClose3").click(function(){
    disablePopup3();
});
    $("#popupContactClose4").click(function(){
    disablePopup4();
});
    $("#popupContactClose5").click(function(){
    disablePopup5();
});
    $("#popupContactClose6").click(function(){
    disablePopup6();
});
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
        $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup1();
        }
    });
        $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup2();
        }
    });
        $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup3();
        }
    });
        $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup4();
        }
    });
        $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup5();
        }
    });
        $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup1();
        }
    });
});

tldr: I believe I need to create a new button for each recipe in the list. I just don’t know how using djangos tag language to allow this while keeping the css and html separate from the django site. Since I pageinate 6 objects per page I thought I could somehow name each of the 6 buttons to correspond to whatever recipe is occupying that spot

Answer 1

There should not be few elements with the same ID in web page’s DOM. You should make different IDs (for example, using {{ forloop.counter }}) or use classes (this is your case, IMHO). So attach a class instead of ID to each element and reference that classes in your JS.