Question

I designed a ASP.NET page named kk-container.aspx to be used as a control which will be loaded in Default.aspx with jQuery load function. The page kk-container.aspx has many HTML controls and javascript events bound as in the example.

<!--Sample code from kk-container.aspx-->
<div id="kk-container">
    <a href="#" id="kk-action">Action</a>
    <!--Many HTML controls here-->
</div>
<script type="text/javascript">
    $(document).ready(function () {
            $("#kk-action").click(function () {
            return false;
        });
    });
    //Many javascript here.
</script>

I load this kk-container.aspx into Default.aspx with such code in the Default.aspx.

<div id="mycontainer"></div>
<script type="text/javascript">
    $("#mycontainer").load("kk-container.aspx");
</script>

Everything works fine up to here. However, I have to load this kk-container.aspx in a few more divs in the Default.aspx. This causes conflict in the id’s of HTML controls. $("#kk-action").click() doesn’t work for all. How can I solve this problem and load kk-container.aspx multiple times in one Default.aspx page.

More to say: I considered giving random id’s for HTML controls for each load of kk-container.aspx. However I had already designed my stylesheet mostly with id selector. And I use a packet javascript, valums uploader, working in kk-container.aspx. It will also require edit. If there is a simpler way, I don’t want to code all over.

Answer 1

I expected too much from jQuery and asked this question desperately. I should have decided first whether I will use “kk-container” thing once or multiple times in a page. For loading “kk-container” thing multiple times, I had to consider these:

• Designing CSS using class selectors instead of id selectors.
• Producing random id for my HTML elements like in this question.
• Writing my javascript functions so that they work compatible with those random id’s.

Therefore loadind “kk-container.aspx” in a page with jQuery load wouldn’t cause any id conflicts.

Anyway, I did a mistake and didn’t want to rewrite my code. I found a solution to load content of “kk-container.aspx” in my Default.aspx page without a problem. Instead of jQuery load function I used iframes.

Since there is already an item with id “kk-action”,

<a href="#" id="kk-action">Action</a> (like this one)

loading a content having an item with id “kk-action” will cause trouble.

$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.

Instead create an iframe without border and load that content into iframe.

function btnEdit_Click(recordID) {
$('#mycontainer').html("");
    var kayitKutusuFrame = document.createElement("iframe");
    kk-Frame.setAttribute("id", "kk-iframe");
    kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
    kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
    kk-Frame.setAttribute("frameBorder", "0");
    kk-Frame.setAttribute("hspace", "0");
    kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
    document.getElementById("Mycontainer").appendChild(kk-Frame);
    if (isIE = /*@cc_on!@*/false) { //For IE
        setTimeout(function () { heightAdapter() }, 500);
    } 
}

I didn’t gave random id to “kk-iframe” because I will not use it mulitple times. It now resides in FaceBox. To make the iframe flawless, it needs to be auto-resized. My heightAdapter() function will do it. Not only when a content is loaded into iframe but also content changes dynamically because of my clicks.

Here is the actual code for resizing iframe to fit content by Guy Malachi.

function calcHeight(content) {
    //find the height of the internal page
    var the_height = content.scrollHeight;

    //change the height of the iframe
    document.getElementById("kk-iframe").height = the_height;
}

Here is my heightAdapter() function which will work both when content is loaded and when I clicked something causing content to expand.

function boyutAyarlayici() {
    var content=document.getElementById("kk-Frame").contentWindow.document.body;
    calcHeight(content);
    if (content.addEventListener) { //Forn non-IE
        content.addEventListener('click', function () {
            calcHeight(content);
        }, false);
    }
    else if (content.attachEvent) { //For IE
        content.attachEvent('onclick', function () {
            calcHeight(content);
        });
    }
}

And the following is a link in a repeater. Since the link will be replicated, it should have unique id by asp server.

<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>

Now, whenever I click one of the replica links, the content having an item with id “kk-action” can be loaded into the my flawless iframe which will be created in “mycontainer”.

<div id="mycontainer" class="kk-iframe" style="display:none"></div>

And the content will be shown in my fancy FaceBox.