Conflict when loading a page multiple times with jQuery ajax load

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:20

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.

score 0 · Answer 2 · answered Dec 10 '11 at 12:28

You're going to have to use classes to style the elements. There can only be one unique ID per page, so you are going to have to generate different IDs or use class selectors in your JavaScript such as:

$('.kk-action').click()

The above is probably the best way to go as it will give every element with that class the binding

Conflict when loading a page multiple times with jQuery ajax load

2 Answers2