CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdialog
Basilio Hinojosa del Castillo
Basilio Hinojosa del Castillo

Reputation: 71

How to properly load html code on a jquery dialog?

im trying to load a piece of html inside a jquery dialog, this piece of code is located in a separated file, but sometimes fails to load it right. It happens like this :

This is how it should have been displayed.

Everything fine

But sometimes(many times actually) does this:

Oh! No!

This is the code that calls the dialog

        .click(function(){
        var me = this;
        $.ajax({
            type:"POST",
            url:"../CuentaEquipo.php",
            dataType: "json",
            data:"idEquipo="+$(this).attr("idEquipo")+"&idTorneo="+$(this).attr("idTorneo")+"&action=100",
            success:function(data){
                if(data.data == 1){
                    var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html").dialog({
                        stack:true,
                        autoOpen:false,
                        close:function(){
                            $(this).dialog("close");
                        }
                    });
                    cuentas.dialog('open');
                }

And this is the code i'm trying to load (AdministracionCuentaEquipo.html)

<script type="text/javascript">
$("#accioncuentas").tabs();
$(".test").button().click(function(){alert("ASDF")});
</script>
<div id="accioncuentas">
    <ul>
        <li><a href="#abonos">Abonos</a></li>
        <li><a href="#cargos">Cargos</a></li>
        <li><a href="#saldos">Saldos</a></li>
    </ul>

<div id="abonos">
    <button class="test">HI</button>
</div>

<div id="cargos">
    <button class="test">HI</button>
</div>

<div id="saldos">
    <button class="test">HI</button>
</div>
</div>

The only thing that works is closing and opening when this happens, but it's very annoying to do that. It's there any fix or i'm doing something wrong with the ajax or anything else?

Thanks .

Upvotes: 0

Views: 91

Answers (1)

Byson
Byson

Reputation: 550

I think the problem is that you are creating/opening the dialog before the HTML has properly been parsed.

From the jQuery documentation:

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed.

So try changing this code:

var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html").dialog({
    stack:true,
    autoOpen:false,
    close:function(){
            $(this).dialog("close");
    }
});

to:

var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html", function(e)
{
    $("#cuentas").dialog({
        stack:true,
        autoOpen:false,
        close:function(){
                $(this).dialog("close");
        }
});

EDIT: the line $("#accioncuentas").tabs(); might also fire too early, so you could change that script tag to wrap it in a function and call that function in your other code. Example:

<script type="text/javascript">
    function InitializeTabs()
    {
        $("#accioncuentas").tabs();
    }
</script>

and then add the line InitializeTabs(); to your code, for example above the line $("#cuentas").dialog({.

SECOND EDIT: I actually think Dasarp is correct in saying that the $("#accioncuentas").tabs(); is the main problem. Either wrap it in a function as I suggested, or move the entire <script> tag down to the bottom of the file (below all your HTML).

Upvotes: 1

Related Questions