Problems with Javascript HTML function does not show content in the page source code

Asked

Viewed 52 times

1

About the Javascript functions that add HTML content, these added contents are not being shown in the page’s source code, even if it works.

Example:

<html>
    <head>
        <script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
         </script>
    </head>
    <body>

    </body>

<script>
    $("body").append("<p>Apareço no carregamento normal, mas não no código fonte </p>");
</script>

</html>

I have a jQuery table plugin, but it can’t select the table because it doesn’t have the columns yet and as I create the columns dynamically, I end up not being able to use the plugin.

--EDIT-- My problem was with the asynchronous function of the ajax. I had a function to activate the plugin, and before it the function with ajax, since the function of ajax still did not return a value, I could not activate the plug because the object did not yet exist. The solution was to put the plugin activation in ajax Success

javascript append source-code
  • 1

    Changes made by JS will only be present in the DOM, because it is the browser that deals with this. The source code will always be the one the browser received from the HTTP request. If you need something to be in the source code, you need to put it there explicitly. If you want something dynamic you can try using a server-side language.

  • You can pick up content dynamically added to the DOM. But you need to show how it’s done.

  • You could inform which plugin is using ?

  • 1

    Better would be you put the example of your real doubt, with the table and the plugin, that it becomes easy to help the community

1 answer

0

In order for the input type date to receive the value, you need to submit in the form yyyy-MM-dd, see the snippet 

function adicionar() {
    const tabela = $('#tabela');
     
    const ParcelaVencimento = $('#ParcelaVencimento').val();
    // Converti para numeros
    const ParcelaValor = $('#ParcelaValor').val();

    // Usei o sinal de + para transformar em numero
    const QtdParcela = +$('#QtdParcela').val();

    // Iniciei um novo array para armazenar os subtotatis
    const subtotal = [];

    let total = 0;
    let vencimento = new Date();
    vencimento.setDate( ParcelaVencimento )
    // Aqui voce criou o contador como sendo $i ao invés de count    
    for ( let cont = 0; cont < QtdParcela; cont++ ) {

        subtotal.push( ParcelaValor * 1 );
        total += subtotal[ cont ];
        vencimento.setMonth( vencimento.getMonth() + 1 )

        // Dica: utilize templateString para facilitar a criacao do HTML
        var linha = `<tr class='selected' id='linha${cont}'>    
                            <td> <button type='button' class='btn btn-warning' onclick='apagar('${cont}');'> X </button></td>
                            <td> <input type='hidden' name='cont[]' value='${cont}'>'${cont +1}'</td>
                            <td> <input name='ParcelaVencimento[]'  type='date' value='${formatDate(vencimento)}'></td>
                            <td> <input type='number' name='ParcelaValor[]' value='${ParcelaValor}'></td>
                            <td> <input type='number' name='QtdParcela[]' value='${QtdParcela}'></td> 
                        </tr>`
        tabela.append( linha );
    }
  
}

// Função para formatar a data
function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Parcela vencimento: <input type="text" value="12" id="ParcelaVencimento"><br />
Parcela Valor: <input type="text" value ="123.30" id="ParcelaValor"><br />
Quantidade Parcelas: <input type="text" value="12" id="QtdParcela"><br />

<button onclick="adicionar()"> Gerar tabela </button> <br />

<table id="tabela"></table>

Browser other questions tagged javascript append source-code

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