Attach file . js inside other . js

Asked

Viewed 1,419 times

3

Is the following:

I have an index.html page where the user selects a certain amount through radio input.

Clicking on GENERATE runs a function where via Document.write a form is created according to the value selected by the user previously. That is, you selected 2, appears 2 forms, etc...

My problem is with the masks on this form. (Date and RG) I assembled the page generated through the function in pure HTML and the masks work smoothly.

Basically it is: I have a.js file and I want to call another.js file from it. I’ve tried unescape, I don’t know if I made wrong use of the syntax, even because it’s discontinued, or doesn’t work, I don’t know...

I searched several forums, found basically the same answer and nothing worked so far. As I am new to javascript, I must be doing something wrong or letting some detail pass.

I hope you can help me.

I appreciate the answers so far.

The answers so far look nothing like what I did. T_T

This is the index.html page where the user chooses the amount.

<body>
    <div class="body">
        <div class="content_body">
            <div class="logo">
                <img src="img/logo.png">
            </div>
            <div class="title">
                QUANTAS CREDENCIAS VOCÊ GOSTARIA DE GERAR?
            </div>
            <div class="options">
            <form>
                <p><label> 1 </label><br>
                <input name="Opc" value="1" type="radio"/></p>
                <p><label> 2 </label><br>
                <input name="Opc" value="2" type="radio"/></p>
                <p><label> 3 </label><br>
                <input name="Opc" value="3" type="radio"/></p>
                <p><label> 4 </label><br>
                <input name="Opc" value="4" type="radio"/></p>
                <p><label> 5 </label><br>
                <input name="Opc" value="5" type="radio"/></p>
            </form>
            </div>
            <div class="submit">
                <input onclick="qtdd()" type="submit" value="GERAR"/>
            </div>
        </div>
    </div>
</body>

Below is the page that is created by clicking on "GENERATE".

(I only put the HTML, but there is the verification of which field is checked)

            document.write(

            "<html>" +
                "<head>" +
                    "<link rel='stylesheet' type='text' href='css/credencial.css'/>" +
                    "<meta charset='UTF-8'/>" +
                    "<link rel='shortcut icon' href='img/logo.ico' type='image/x-icon'>" +
                    //Linkar javascript aqui
                "</head>" +

                "<body>" +
                    "<div class='body'>" +
                        "<div class='content_body'>" +
                            "<div class='logo'>" +
                                "<img src='img/logo.png'>" +
                            "</div>" +
                            "<div class='title'>" +
                                    (1+i) +  "° CREDENCIAL - FRENTE " +
                                "</div>" +
                            "<div class='frente'>" +
                                "<form>" +
                                    "<p><label> NOME: </label></p>" +
                                    "<input autofocus type='text'>" +
                                    "<p><label> CARGO: </label>" +
                                    "<input type='text'></p>" +
                                    "<p><label> RECEBIDO POR: </label></p>" +
                                    "<input type='text'>" +
                            "</div>" +
                                "<div class='title'>" +
                                    (1+i) +  "° CREDENCIAL - VERSO " +
                                "</div>" +
                            "<div class='verso'>" +
                                "<p class='form2'><label> RG: </label><br>" +
                                "<input type='text' id='rg'> &nbsp </p>" +
                                "<p class='form2'><label> ESTADO CIVIL: </label><br>" +
                                "<select>" +
                                    "<option value=' ' title='Nenhum'> </option>" +
                                    "<option value='Solteiro(a)'> Solteiro(a) </option>" +
                                    "<option value='Casado(a)'> Casado(a) </option>" +
                                    "<option value='Divorciado(a)'> Divorciado </option>" +
                                    "<option value='Viúvo(a)'> Viuvo(a) </option>" +
                                "</select>" +
                                "<p class='form2'><label> DATA DE NASCIMENTO: </label><br>" +
                                "<input id='dtn' type='text'> &nbsp </p>" +
                                "<p class='form2'><label> ESTADO: </label><br>" +
                                "<select>" +
                                "<option value=' ' title='Nenhum'> </option>" +
                                "<option value='Acre' title='Acre'> AC </option>" +
                                "<option value='Alagoas' title='Alagoas'> AL </option>" +
                                "<option value='Amapá' title='Amapá'> AP </option>" +
                                "<option value='Amazonas' title='Amazonas'> AM </option>" +
                                "<option value='Bahia' title='Bahia'> BA </option>" +
                                "<option value='Ceará' title='Ceará'> CE </option>" +
                                "<option value='Distrito Federal' title='Distrito Federal'> DF </option>" +
                                "<option value='Espírito Santo' title='Espírito Santo'> ES </option>" +
                                "<option value='Goiás' title='Goiás'> GO </option>" +
                                "<option value='Maranhão' title='Maranhão'> MA </option>" +
                                "<option value='Mato Grosso' title='Mato Grosso'> MT </option>" +
                                "<option value='Mato Grosso do Sul' title='Mato Grosso do Sul'> MS </option>" +
                                "<option value='Minas Gerais' title='Minas Gerais'> MG </option>" +
                                "<option value='Pará' title='Pará'> PA </option>" +
                                "<option value='Paraíba' title='Paraíba'> PB </option>" +
                                "<option value='Paraná' title='Paraná'> PR </option>" +
                                "<option value='Pernambuco' title='Pernambuco'> PE </option>" +
                                "<option value='Piauí' title='Piauí'> PI </option>" +
                                "<option value='Rio de Janeiro' title='Rio de Janeiro'> RJ </option>" +
                                "<option value='Rio Grande do Norte' title='Rio Grande do Norte'> RN </option>" +
                                "<option value='Rio Grande do Sul' title='Rio Grande do Sul'> RS </option>" +
                                "<option value='Rondônia' title='Rondônia'> RO </option>" +
                                "<option value='Roraima' title='Roraima'> RR </option>" +
                                "<option value='Santa Catarina' title='Santa Catarina'> SC </option>" +
                                "<option value='São Paulo' title='São Paulo'> SP </option>" +
                                "<option value='Sergipe' title='Sergipe'> SE </option>" +
                                "<option value='Tocantins' title='Tocantins'> TO </option>" +
                            "</select> &nbsp </p>" +
                                "<p class='form2'><label> BATISMO: </label><br>" +
                                "<input type='text' id='batismo'> &nbsp </p>" +
                                "<p class='form2'><label> VALIDADE: </label><br>" +
                                "<input type='text' id='validade'> &nbsp </p>" +
                                "<div class='limpar'>" +
                                    "<input type='reset' value='LIMPAR'/>" +
                                "</div>" +
                            "</form>" +
                        "</div>" +
                    "</div>" +
                "</div>" +
            "</body>" +
        "</html>"
            )
        }
        document.write(
        "<div class='submit'>" +
            "<div class='btnsub'>"+
            "<input onclick='validacao()' type='submit' value='ENVIAR'/>" +
            "</div>" +
        "</div>" 
        )
        return
    }   
}
for(i=0; i<qtd.length; i++){
    if(qtd[i].checked == false){                              
        alert("VOCÊ PRECISA ESPECIFICAR A QUANTIDADE!")
        return
    }   
}

I even understood what you proposed, but I don’t think it’s quite what I wanted.

Ali in //Linkar javascript, I would like to put this: 

    <script type="text/javascript" src="lib/jquery.js"></script>
    <script src="lib/maskedinput-1.3.js" type="text/javascript"></script>
    <script src="lib/mascara.js" type="text/javascript"></script>

However, with "all" the options and my capacity exhausted, I have no idea.

I have the impression that it is something silly and simple, but I can not solve.

I have tried creating through DOM, concatenate the "scr" + "ipt" and nothing.

I accept tips, criticism, suggestions.

javascript dom

  • Without seeing your code it becomes difficult to answer... But anyway, I suggest you review your strategy: why not, for example, put all Javascript in one file, and when this new content is inserted into the DOM (tip: prefer el.appendChild instead of document.write) you manually assign references to Event listeners? An even better option - if you are using jQuery - would be to use generic functions, which deal with all the elements that satisfy a certain filter, current or future. This is done through $.on. Just a few suggestions.

2 answers

1

I made an example that might help you.

You can see what the code does in the following comments, but basically it generates a certain number of times the same fields and applies the mask to them at the end.

    $('#generate').click(function() {
        
        //recupera radio selecionado
        var radio = $('input[name=qtd]:checked');
        if (radio.length == 0) {
            alert('Selecione a quantidade!');
            return;
        }
        
        //recupera valor do radio (quantidade de repetições)
        var count = parseInt(radio.val());
        
        //html com campos de cada seção do formulário
        var baseHtml = 
          '<div>Data <input name="data" class="campo-data" type="text"/></div>' +
          '<div>RG <input name="rg" class="campo-rg" type="text"/></div>';
        
        //laço para adicionar N vezes os campos
        for (var i = 0; i < count; i++) {
            $('#myform').append('<div> Cliente ' + (i+1) + '</div>');
            $('#myform').append(baseHtml);
        }
        
        //aplica máscara de acordo com os estilos
        $(".campo-data").mask("99/99/9999");
        $(".campo-rg").mask("999.999.999-9");
        
        //inibe formulário inicial
        $('#gen-form').hide();
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gen-form">
<div><input name="qtd" type="radio" value="1" /> 1 Cliente</div>
<div><input name="qtd" type="radio" value="2" /> 2 Clientes</div>
<div><input name="qtd" type="radio" value="3" /> 3 Clientes</div>
<button id="generate">Gerar Form</button>
<hr/>
</div>
<form id="myform">
</form>

Jsfiddle

1

@Wiliamxavier, follows an example below.

In it I have a Modal that when opened is filled with an HTML content generated from a template.

After it is attached to the Modal I initialize the input type="text" with a mask, in case CPF

but for this it is necessary that the script is already loaded in the own page:

HTML

<div class="row switch small">
    <input id="Opc1" name="Opc" value="1" type="radio"/>
    <label for="Opc1"></label>
</div>
<div class="row switch small">
    <input id="Opc2" name="Opc" value="2" type="radio"/>
    <label for="Opc2"></label>
</div>
<div class="row switch small">
    <input id="Opc3" name="Opc" value="3" type="radio"/>
    <label for="Opc3"></label>    
</div>
<div class="row switch small">
    <input id="Opc4" name="Opc" value="4" type="radio"/>
    <label for="Opc4"></label>
</div>
<div class="row switch small">
    <input id="Opc5" name="Opc" value="5" type="radio"/>
    <label for="Opc5"></label>
</div>
<div>
    <input id="btGerar" class="button small" type="submit" value="GERAR" data-reveal-id="modal"/>    
</div>

<div id="modal" class='reveal-modal' data-reveal=""></div>

<script id="tmplModal" type="text/x-jsrender">
    <div class="row">
        <div class="small-2 column">
            <label for="txtRG" >RG</label>
        </div>
        <div class="small-10 column">
            <input id="txtRG" type="text" />            
        </div>
    </div>
    <div class="row">
        <div class="small-2 column">
            <label for="txtCPF" >CPF</label>
        </div>
        <div class="small-10 column">
            <input id="txtCPF" type="text" />            
        </div>
    </div>
</script>

JAVASCRIPT

$(document).foundation();

var btGerar = $("#btGerar");
var modal = $("#modal");
var tmplModal = $.templates("#tmplModal");

btGerar.click(function () {
    var content = $(tmplModal.render({}));
    var txtCPF = $("#txtCPF", content);

    modal.empty();    
    modal.append(content);   
    console.log(txtCPF);

    txtCPF.mask("999.999.999-99");
    return;
});

CSS

#modal label {
    float: rigth;
}

#modal label:after {
    content: ':'
}

JSFIDDLE

BONUS - ONDEMAND SCRIPT

If you want to include Avascript only when including the HTML page, do the following

$.getScript( "lib/jquery.js" ),
$.getScript( "lib/maskedinput-1.3.js" ),
$.getScript( "lib/mascara.js" ),
$.Deferred(function( deferred ){
    //carrege o seu HTML e inicialize os plugins aqui.
})

Browser other questions tagged javascript dom

You are not signed in. Login or sign up in order to post.