Question

I am creating a dialog on fly, when I open it the first time it works well, but when I try to re-open it again the function click that I have created doesn’t work. This is my code, it is all in the onready function. I just tried to disable an input field and give it the focus. Thanks a lot.

$("#rdoAddressN").click(function(){
    var html;
    html="<table>"
                +"<tr>"
                    +"<td style='font-size: 14px;'  align='center'><strong>D I R E C T O R I O</strong></td>"
                +"</tr>"
                +"<tr>"
                    +"<td align='center' nowrap>"
                    +"<input name='zipcodeType' id='zipcodeTypeCP' value='1' type='radio' style='margin: 10px'><strong>CP</strong>"
                    +"<input name='zipcodeType' id='zipcodeTypeCol' value='2' type='radio'  style='margin: 10px'><strong>Colonia</strong>"
                    +"<input name='btnBuscarCP' id='btnBuscarCP' value='Buscar' type='button'  style='margin: 10px'>"
                    +"</td>"
                +"</tr>"
                +"<tr>"
                    +"<td align='center'>"
                        +"<input autocomplete='off' name='zipcodeDialog' id='zipcodeDialog' class='zipcodeDialog' size='50' class='authInput' type='text' disabled='disabled' />"
                    +"</td>"
                +"</tr>"
                +"<tr>"
                        +"<td >"
                            +"<div style='width: 576px; opacity: 0.999999; display: none;' id='divResultsCP' align='center'>"
                            +"</div>"
                        +"</td>"
                    +"</tr>";

        +"</table>";

    var caja2 = $('<div title="Direccion de Codigos Postales"><p>'+html+'</p></div>');
    caja2.dialog({modal: true,show: 'fade',hide: 'fade',height:'auto',width:'auto'});
    $(":button").button();
    $('#zipcodeTypeCP').click(function(){
        $('.zipcodeDialog').remove("disabled");
        $('.zipcodeDialog').attr("disabled", true);
        $('.zipcodeDialog').attr("disabled", false);
        $('.zipcodeDialog').focus();
    })
    $('#zipcodeTypeCol').click(function(){
        $('.zipcodeDialog').remove("disabled");
        $('.zipcodeDialog').attr("disabled", true);
        $('.zipcodeDialog').attr("disabled", false);
        $('.zipcodeDialog').focus();
    })
    $('#btnBuscarCP').click(function(){
            if($('#zipcodeDialog').val().length>3){
            $("#divResultsCP").html('<img src="img/ajax-loader-big.gif" />')
            $.ajax({
                data: "texto="+ $('#zipcodeDialog').val()+"&zipcodeType="+$('input:radio[name=zipcodeType]:checked').val() ,
                type: "post",
                dataType: "json",
                url: "ajax/cp.php",

                success: function(data){
                        switch(data.error){
                        case undefined:
                                if(data.mensaje==undefined){
                                    $("#autocomplete_choices").html('');
                                    var tabla="<table  class='cptable'>";
                                    tabla+="<tr >"
                                        tabla+="<td ></td>";
                                        tabla+="<td>CP</td>";
                                        tabla+="<td>Colonia</td>";
                                        tabla+="<td>Municipio</td>";
                                        tabla+="<td>Ciudad</td>";
                                        tabla+="<td>Estado</td>";
                                    tabla+="</tr>"

                                    for(index=0; index<data.length; index++) {
                                        tabla+='<tr><td><a href=""> + </a></td><td>' + data[index].postal_code +  '</td><td> ' + data[index].colony_name + '</td><td>'+ data[index].d_mnpio+'</td><td>'+ data[index].city_name+'</td><td> '+data[index].state_name+'</td></tr>'
                                    }
                                    tabla+="<table>"
                                }else{
                                    tabla=data.mensaje;
                                    $("#divResultsCP").addClass("ui-state-highlight");
                                }
                                $("#divResultsCP").html(tabla)
                                $("#divResultsCP").show()
                            break;
                        case 'Login':
                                $("#autocomplete_choices").html('');
                                alert("Usuario No logueado");
                            break;
                        default:
                                $("#autocomplete_choices").html('');
                                $("#divResultsCP").html(data.error);
                                $("#divResultsCP").addClass("ui-state-highlight");
                            break;
                    }
                }
                ,error: function (request, status, error) {
                    alert(request.responseText);
                }


            });
        }
    });

})`

Answer 1

Well, lunch break and i see no one has given you a decent answer. I made you jsFiddle that may show you how to accomplish what you’re trying to do much easier. If not, it should show you how to make better use of jQuery and HTML. Creating long strings of HTML like you’re doing is completely defeating the purpose of jQuery’s “do more, write less”. They’ve already done the hard work, all you need to do is work smart.

See Working jsFiddle Here

( – the ajax url working since i dont have a real php controller to call, but i guestimated the success code and if you apply it to your local dev, it should still work just the same)

also, if i knew more of what to expect and what’s going on, realistically, even my working example could probably be cut by about a dozen lines or so. That and i tried to use the “easiest” to understand parts of jQuery, but there is alota different ways to accomplish things like “appending” html and some of the other elements there.