Attach .js file into another .js file

Question

Attach .js file into another .js file

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

It is the following:

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

Clicking on GENERATES a function where document.write creates a form according to the value previously selected by the user. That is, you have selected 2, 2 forms appear, etc. ...

My problem is in the masks of this form. (Date and RG) I mounted the page generated through the function in pure HTML and the masks work quietly.

Basically it is: I have an .js file and I want to call another .js file from it. I've tried unescape, I do not know if I've misused the syntax, because it's discontinued, or it does not work, I do not know ...

I looked in several forums, I found basically the same answer and nothing worked until then. As I'm new to javascript, I must be doing something wrong or letting some detail go by.

I hope you can help me.

Thanks for the responses so far.

The answers so far do not look anything like what I did. T_T

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

<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 "GENERATE".

(I only put HTML, but there is a check 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 do not think it's quite what I wanted.

There in // Link 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" my options and my ability exhausted, I have no idea.

I get the impression that it's silly and simple, but I can not resolve it.

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

I'm accepting tips, criticisms, suggestions.

javascript dom

asked by anonymous 16.02.2015 / 16:48

2 answers

How to search for an element in XML with PHP? Creating archive.php in wordpress using custom field

score 1 · Answer 1

I've done an example that might help you.

You can see what the code does in the following comments, but basically it generates a 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><divid="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

score 0 · Answer 2

@WiliamXavier, below is an example.

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

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

But for this it is necessary that the script is already loaded in the page itself:

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 - SCRIPT ONDEMAND

If you want to include javaScript just when you are adding the HTML to the 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.
})