Jump to content
Omar~

Carregar Script em página Carregada com AJAX

Recommended Posts

Em um trabalho aqui o cliente me veio com a ideia de querer uma barra de progresso igual aquele que tem no GIT/YOU-TUB etc...

Muito bem, simples para isso usarei ajax.

Aí começaram os problemas, como a aplicação (é algo parecido a esse fórum) usará o banco de dados MySQL e para  armazenar páginas e conteúdos, assim sendo o admin pode logar e criar novas/editar páginas inteiras no próprio site sem criar novos arquivos. Então como carregar os scripts que forem adicionados um vez que as páginas vão ser lidas através de um AJAX?

 

Muito bem usarei a jQuery que faz isso muito bem. Porém não sou fã de biblioteca externa, mas mesmo assim optei por ser a única solução plausível. Então me veio o cliente novamente e disse que não queria isso. "Putz ferrou" Vida de webmaster é fod.....

 

Comecei uma peregrinação e estudo através de uma solução de executar scripts em páginas carregadas com ajax. Resultado. Não existe solução prática para isso.

A forma mais coesa seria pegar os JS que forem carregados e serem embutidos na página principal. Outro problema que assim há um sobrecarregamento do DOM quando mais se navega no site.

A solução então meio que na gabiarra era pegar os dados e realocar dentro da própria div que fora carregada com conteúdo, assim toda vez que for carregado novo ajax o local era re-escrito.

 

Então fiz esse script aqui que funciona perfeitamente. Porém ainda não implementei a importação de CSS porque achei desnecessário até o momento.

Quem quiser executar Ajax usando javascript nativo fica aqui como fazer.

Vamos aos exemplo:

 

Página que requisitará o AJAX

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Meu Ajax</title>
        <script src="AjaxRequest.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="ajax-progress"></div>

        <button onclick="ajx.linkAjax('carregar', 'new.php', null, null);">Carregar</button>

        <div id="carregar"></div>

        <script>ajx = new AjaxRequest();</script>
    </body>
</html>

 

Simples um botão que vai chamar um método que executa o ajax então vou explicar.

ajx = É o objeto da intrância para acessar o método.

linkAjax = É o método que executa o Ajax.

Os parâmetros

Citar

linkAjax (divName, fromHttp, urlReplace, progress)

divName : É a div#ID onde deve ser carregado o arquivo.

fromHttp: É o arquivo que vai ser carregado

urlReplace: (Ainda não está 100% funcional) Altera o endereço da barra do navegador coloque true para ativar.

progress: Vai mostrar o status do progresso enquanto a página vai sendo carregada. Requer que crie o layout no CSS da div.ajax-progress * Coloque true que habilita.

 

DIV.ajax-progress para quem tiver dificuldade de criar

Spoiler

.ajax-progress {
    z-index: 9;
    height: 5px;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff0000;
    border-top: .625rem solid #bb0000;
    border-bottom: .625rem solid #bb0000;
    box-shadow: 0 .2rem .625rem 0 rgba(255,0,0,.5)
}

 

Arquivo AjaxRequest.js

Spoiler

var AjaxRequest = function () {
    var $httpRequest;
    var $progressBar = document.querySelector('.ajax-progress');
    var $progress = 0;
    var $loadDiv;
    var $scripts;

    function initXMLHR() {
        $httpRequest = null;

        if (window.XMLHttpRequest) {
            $httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                $httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e) {
                try {
                    $httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {
                    $httpRequest = true;
                }
            }
        }
    }

    this.linkAjax = function (divName, fromHttp, urlReplace = null, progress = null) {
        initXMLHR();
        $loadDiv = document.getElementById(divName);
        if (urlReplace) {
            window.history.replaceState(null, null, fromHttp);
        }
        if (progress) {
            $httpRequest.addEventListener('progress', updateProgress, false);
        }
        $httpRequest.onreadystatechange = function () {
            try {
                if (($httpRequest.readyState === 4) && ($httpRequest.status === 200)) {

                    $loadDiv.innerHTML = $httpRequest.responseText;
                    $scripts = unescape($httpRequest.responseText);
                    appendjS($scripts);
                    if (progress) {
                        $progressBar.style.width = '0';
                    }
                }
            } catch (e) {
                $loadDiv.innerHTML = '<div class="font-jumbo align-center margin-top">\n\
                 Erro ao requisitar arquivo do servidor!</div>';
                if (progress) {
                    $progressBar.style.width = '0';
                }
            }
        };
        $httpRequest.open('GET', fromHttp, true);
        $httpRequest.send();
    };

    function updateProgress(e) {
        if (e.lengthComputable) {
            $progress = (e.loaded / e.total) * 100;
            $progressBar.style.width = $progress + '%';
        }
        return true;
    }

    function appendjS(script) {
        var $src;
        var $endSrc;
        var $newSrc;
        var $stringSrc;
        var $coutSrc;

        $coutSrc = script.indexOf('<script', 0);
        removeOldSrc();

        while ($coutSrc != -1) {
            $newSrc = document.createElement('script');
            $src = script.indexOf(' src', $coutSrc);
            $coutSrc = script.indexOf('>', $coutSrc) + 1;
            if ($src < $coutSrc && $src >= 0) {
                $coutSrc = $src + 4;
                $endSrc = script.indexOf('.', $coutSrc) + 4;
                $stringSrc = script.substring($coutSrc, $endSrc);
                $stringSrc = $stringSrc.replace("=", "").replace(" ", "").replace("\"", "").replace("\"", "").replace("\'", "").replace("\'", "").replace(">", "");
                $newSrc.src = $stringSrc;
            } else {
                $endSrc = script.indexOf('</script>', $coutSrc);
                $stringSrc = script.substring($coutSrc, $endSrc);
                $newSrc.text = $stringSrc;
            }
            $loadDiv.appendChild($newSrc);
            $coutSrc = script.indexOf('<script', $endSrc);
            $newSrc = null;
        }
    }

    function removeOldSrc() {
        var $oldScript = $loadDiv.getElementsByTagName('script'), cns;
        for (cns = $oldScript.length - 1; cns >= 0; cns--) {
            $oldScript[cns].parentNode.removeChild($oldScript[cns]);
        }
        return;
    }

};

 

 

Assim sendo poderemos sempre reaproveitar o código para executar diversificados ajax em divs diferentes.

O código está meio bagunçado porque ainda é um rascunho, e pretendo fazer upgrades para POT'S, upload e downloads. Mas por enquanto assim atende a necessidade do Ajax.

 

Por fim vamos a página "new.php" que está sendo chamada no ajax

Spoiler

<script type="text/javascript" src="teste.js"></script>

<script type="text/javascript">
    function teste2() {
        document.getElementById('texto').innerHTML = "Executando teste 2 JS em escopo";
    }
</script>

<button onclick="teste1();">TESTE 1 (JS import) </button>
<button onclick="teste2();">TESTE</button>

<div id="texto"></div>

 

Citar

E o arquivo de teste que é um js que importamos para testar.



function teste1() {
    document.getElementById('texto').innerHTML = "Executando teste 1 com arquivo JS importado";
}

 

 

 

Então ficamos aqui.

Quem quiser pegar isso criar uma lógica melhor, melhorar o código. Compartilhe suas ideias...

E para quem não sabe como usar Ajax, agora tem o exemplo e o script necessários.

 

Lembrando que isso é uma solução feita as pressas para entregar um trabalho, apesar de funcional.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By smashplus
      Olá amigos, sendo breve, apenas gostaria de saber se alguem sabe por onde começo para fazer por exemplo o seguinte:
       
      Existe o usuário 1 e o usuário 2,  quando o usuário 1 insere uma linha no bd, ele manda uma mensagem para o usuário 2, avisando tipo, foi inserido uma linha no bd para o usuário, tipo aqueles popup sabe.
       
      Se alguem puder dar uma luz, tenho noções basicas de php e ajax...
       
      Agradeço se alguem puder dar a direção.
    • By lucasvbl
      <form id="frmDados" name="frmDados" class="form-horizontal" method="post" action="" enctype="multipart/form-data"> <input name="acao" id="acao" type="hidden" value="paginas"> <? if($_idCodigo){ ?> <input name="r" id="r" type="hidden" value="<?=$_idCodigo;?>"> <? } ?> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label class="col-md-2 col-form-label"> Titulo</label> <div class="col-md-10"> <input class="form-control" autocomplete="off" type="text" name="txtDescricao" id="txtDescricao" value="<?=$_rowDados->C02_DESCRICAO;?>"> </div> </div> </div> <? if($_idCodigo){ ?> <div class="col-md-6"> <div class="form-group row"> <label class="col-md-2 col-form-label"> Link</label> <div class="col-md-10"> <input readonly="readonly" class="form-control" type="text" name="txtLink" id="txtLink" value="pagina.php?p=<?=$_rowDados->C01_ID;?>"> </div> </div> </div> <? } ?> </div> <div class="row"> <div class="col-md-12"> <div class="form-group row"> <label class="col-md-12 col-form-label">Conteúdo</label> <div class="col-md-12"> <textarea class="form-control" name="txtConteudo" id="txtConteudo"> <?=$_rowDados->C04_CONTEUDO;?> </textarea> </div> </div> </div> </div> <div class="col-md-12" style="text-align: center;"> <button class="btn btn-oval btn-success" type="button" id="btGravar">Gravar</button> </div> </form> <script type="text/javascript"> $(function () { $("#btGravar").click(function(){ erros = 0; if(!$("#txtDescricao").val()){ mensagem('mensagemDIV', 'danger', 'Preencha o campo <strong>Título para a página</strong>.', 0, 'txtEntidade'); erros = 1; } if(erros > 0){ return; } off("btGravar"); var formData = $("#frmDados").serialize(); $.ajax({ url: "app.php", type: "POST", data: formData, dataType: "json", success: function (retorno) { if(retorno.status == '1'){ tratarRetorno(retorno); } if(retorno.status == '400'){ tratarRetorno(retorno); } on("btGravar"); return; } }).fail(function (jqXHR, textStatus, error) { console.log(jqXHR.responseJSON); }); return; }); }); $(document).ready(function(){ $("#txtTitulo").focus(); }); </script> Estou com um problema num crud utilizando ajax, ele meio que "corrompe a string"... 
      ENVIO ASSIM
       
      ELE SALVA ASSIM
       
      Não estou utilizando nenhum editor nada, num textarea
      ESSE CODIGO
       
       
       
       
    • By opl12
      Olá Mestres,
      Tenho uma página com comando "input Range" .. é uma barra deslizante... conforme deslisa gera um valor.
       
      o problema, 
      não consigo gravar o valor numa variável PHP,
      Segue html:
      <html> <head> <title> ...::: HOME :::... </title> </head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <body> <form method="POST"> <label class="mt-3" for="ciclo">CICLO</label> <input type="range" class="custom-range" value="201901" min="201901" max="201915" step="1" id="ciclo" name="idciclo"> <span>201901</span> </form> <div id="resultado"> </div> <script type="text/javascript"> $("#ciclo").on("change", function(){ var idCiclo = $("#ciclo").val(); $.ajax({ method: "POST", url: "ciclo_inicios.php", data: { 'ciclo': idCiclo }, success: function(retorno){ alert(retorno); } }); }); </script> </body> </html>  
      código php... arquivo "cilo_inicios.php"
      <?php //$valorciclo = isset($_POST['dados']) ? $_POST['dados'] : ''; $valorciclo = $_POST["idciclo"]; echo "$valorciclo"; ?>  
      Sabem o que estou fazendo de errado ?   :/
       
       
       
    • By ewersonsv
      Olá pessoal estou iniciando o uso do ajax/js, estou fazendo um protótipo de sistema de estoque (onde gera-se uma fatura manualmente);
      O PHP ta tudo certo mais o JS não atualizar o valor assim que faz as ações { Adiciona, remover, aumenta/diminuir quantidade }
       

       
      AJAX/JS:
      <script type="text/javascript"> //VARIAVEL: var timmer; //PESQUISAR: function pesquisar(item,saidaid){ if(item != ''){ clearTimeout(timmer); timmer = setTimeout(function callback(){ $.ajax({ url: '<?php echo base_url('estoque/pesquisar/'); ?>'+item+'/'+saidaid, success: function(response){ jQuery('#resultado_pesquisar').html(response); }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); }, 100); }else{ $('.resultado_pesquisar').css("display", "none"); } } //CANCELAR PESQUISAR: function cancelar_pesquisar(){ $('#camp_pesquisar').val(''); $('#camp_pesquisar').focus(); $('.resultado_pesquisar').css("display", "none"); $.ajax.reload(); } //TESTE: //ADICIONAR ITEM: function adic_item_list(item,saidaid){ //alert(saidaid); if(item != ''){ clearTimeout(timmer); timmer = setTimeout(function callback(){ $.ajax({ data: {'item': item, 'saidaid': saidaid}, url: '<?php echo base_url('estoque/adicionar/'); ?>'+item+'/'+saidaid, success: function(response){ jQuery('#inner_invoice_area').html(response); $('#camp_pesquisar').val(''); $('#camp_pesquisar').focus(); $("#produt").ajax.reload(); if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); }, 100); }else{ $('.resultado_pesquisar').css("display", "none"); } } $('#adcitem').click(function () { $.ajax({ success: function(data){ if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } } }); }); //ALTERA QUANTIDADE DE ITEM: function atualizar_qntd(qntd,item,saidaid){ clearTimeout(timmer); timmer = setTimeout(function callback(){ var int_val = parseInt(qntd); $.ajax({ url: '<?php echo base_url('estoque/qntd/'); ?>'+int_val+'/'+item, success: function(response){ jQuery('#inner_invoice_area').html(response); $('#camp_pesquisar').val(''); $('#camp_pesquisar').focus(); if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); }, 400); } //DELETAR ITEM: function deletar_item(item,saidaid){ if(item != ''){ clearTimeout(timmer); timmer = setTimeout(function callback(){ $.ajax({ url:'<?php echo base_url('estoque/deletar/'); ?>'+item+'/'+saidaid, success: function(response){ jQuery('#inner_invoice_area').html(response); $('#camp_pesquisar').val(''); if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); $('#camp_pesquisar').focus(); $("#inner_invoice_area").ajax.reload(); }, 100); } } $('#dltitem').click(function () { $.ajax({ success: function(data){ if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } } }); }); //ATUALIZAR PAGINA: function reflesh(){ $.ajax({ success: function(data){ if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } } }); } </script>  
       
    • By rxhxtx
      Boa tarde,
      nos meus estudos me deparei com mais um obstaculo,
      estava fazendo um tutorial sobre atualizacao de BD via ajax...
       
      os dados da pagina estao sendo atualizados perfeitamente, porem o PHP nao executa a funcao de colear os dados e atualizar o BD,
      <?php $connection = mysqli_connect('localhost' , 'root' ,'' ,'testes'); if(isset($_POST['user_id'])){ $user_fname = $_POST['user_fname']; $user_lname = $_POST['user_lname']; $user_email = $_POST['user_email']; $user_id = $_POST['user_id']; $result = mysqli_query($connection , "UPDATE `users_full` SET `user_fname`=`$user_fname` , `user_lname`=`$user_lname` , `user_email`= `$user_email` WHERE `user_id`=`$user_id`"); if($result){ echo 'data updated'; } } ?> se eu coloco 
      if(2+2 ==$){  
      e tiro os POST e coloco os valores ex: $user_fname = "carlinhos";
      atualiza, porem se deixo para ele pegar os dados vi post não funciona... so atualiza na pagina, mas o BD fica igual....
       
      qual é o erro? pq nao esta recebendo os POST??
       
      codigo da pagina é esse:
      <?php include 'listaUSUcon.php'; ?> <head></head> <body> <div class="container"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <?php $table = mysqli_query($connection ,'SELECT * FROM users_full'); while($row = mysqli_fetch_array($table)){ ?> <tr id="<?php echo $row['user_id']; ?>"> <td data-target="user_fname"><?php echo $row['user_fname']; ?></td> <td data-target="user_lname"><?php echo $row['user_lname']; ?></td> <td data-target="user_email"><?php echo $row['user_email']; ?></td> <td><a href="#" data-role="update" data-id="<?php echo $row['user_id'] ;?>">Update</a></td> </tr> <?php } ?> </tbody> </table> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <input type="text" id="user_id" class="form-control" readonly> </div> <div class="modal-body"> <div class="form-group"> <label>First Name</label> <input type="text" id="user_fname" class="form-control"> </div> <div class="form-group"> <label>Last Name</label> <input type="text" id="user_lname" class="form-control"> </div> <div class="form-group"> <label>Email</label> <input type="text" id="user_email" class="form-control"> </div> <input type="hidden" id="user_id" class="form-control"> </div> <div class="modal-footer"> <a href="#" id="save" class="btn btn-primary pull-right save">Update</a> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> <script> $(document).ready(function(){ // append values in input fields $(document).on('click','a[data-role=update]',function(){ var user_id = $(this).data('id'); var user_fname = $('#'+user_id).children('td[data-target=user_fname]').text(); var user_lname = $('#'+user_id).children('td[data-target=user_lname]').text(); var user_email = $('#'+user_id).children('td[data-target=user_email]').text(); $('#user_fname').val(user_fname); $('#user_lname').val(user_lname); $('#user_email').val(user_email); $('#user_id').val(user_id); $('#myModal').modal('toggle'); }); // now create event to get data from fields and update in database $('#save').click(function(){ var user_id = $('#user_id').val(); var user_fname = $('#user_fname').val(); var user_lname = $('#user_lname').val(); var user_email = $('#user_email').val(); $.ajax({ url : 'listaUSUcon.php', method : 'post', data : {user_fname : user_fname , user_lname: user_lname , user_email : user_email , user_id: user_id}, success : function(response){ // now update user record in table $('#'+user_id).children('td[data-target=user_fname]').text(user_fname); $('#'+user_id).children('td[data-target=user_lname]').text(user_lname); $('#'+user_id).children('td[data-target=user_email]').text(user_email); $('#myModal').modal('toggle'); } }); }); }); </script>  
       
      aquele include (listaUSUcon.php) é referente ao primeiro codigo que postei la em cima..
       
       
      para mim não faz sentido, pois aparentemente nao tem nada errado....
       
      alguem sabe onde estou errando???
       
       
       
       
       
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.