Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Kelven
      Olá pessoal tudo bem?
       
      Então eu quero colocar um formulário de newsletter em um servidor q não tem suporte para php, o negócio é q depois que a pessoa clica em se cadastrar eu quero que ela seja redirecionada para outro site, então gostaria de saber como posso estar fazendo isso usando apenas javascript, jquery ou ajax com o API do Mailchimp? Porque já procurei muito e não achei, só achei em php.
    • Por emersonandree
      <script type="text/javascript"> $(document).ready(function(){ $('#btn_busca_f').click(function () { var data_ini = $('#data_ini').val(); var data_fim = $('#data_fim').val(); var cod_recurso = $('#cod_recurso').val(); var cod_funcionario = $('#cod_funcionario').val(); var num_op = $('#num_op').val(); $.ajax({ type: 'post', async: false, url: '/intranet/ExportaFimApontamento', data:{ '_token': '{{csrf_token()}}', 'data_ini': data_ini, 'data_fim': data_fim, 'cod_recurso': cod_recurso, 'cod_funcionario': cod_funcionario, 'num_op': num_op }, erro: function () { alert('erro'); }, success: function (data) { return (data); alert('Excel Gerado com Sucesso!'); } }); }); }); </script> este script executa uma função no controller onde ele gera um arquivo excel.xls, porem se eu executar a função direto no controler ele funciona, se eu executar com o script ele funciona mas nao gera o arquivo.xls alguem sabe como posso fazer para que ele baixe o arquivo la na função?
    • Por michelmir
      Olá a todos.
       
      Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax:
      <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button> <!-- Modal --> <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" >Adicionar dados</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="usersform" method="post"> <input type="text" name="nome" id="nome"/> <input type="email" name="email" id="email"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button> <button type="submit" class="btn btn-success" id="submit" >ADD USER</button> </form> </div> </div> </div> </div> E abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados:
      <script> $(document).on('submit', '#usersform', function(event){ event.preventDefault(); $.ajax({ url:"insert.php", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data){ alert("Cadastro realizado com sucesso!"); $("#usersform")[0].reset(); $("#dataModal").modal('hide'); } }); }); </script> O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.
    • Por Soneca_BO
      Boa tarde Pessoal!
       
      Estou a um bom tempo tetando fazer um CRUD em um banco de dados não tradicional e sim do "Cognos tm1",
       
      Estou fazendo uma aplicação WEB e queria usar o Ajax com jquery e javascript(dependendo do caso) para fazer um CRUD
      salvando dados deletando e fazendo as devidas atualizações, mas não estou conseguindo fazer o "PUT" e nem o "DELETE", 
      E não faço ideia de como começar a escrever o código para os métodos informados acima.
       
      Segue código criado para fazer o GET (só conseguir fazer o GET)
      $.ajax({ username: 'admin', password: ' ', url: "http://localhost:8881/api/v1/Cubes('ACO.200.Despesas')/Views('visao')/tm1.Execute?$expand=Cube($select=Name;$expand=Dimensions($select=Name)),Axes($expand=Tuples($expand=Members($select=Name;$expand=Element($select=UniqueName)))),Cells", method: 'POST', headers: { "Authorization": "Basic YWRtaW46", "cache-control": "no-cache", }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); }, error: function () { alert("erro"); } });  
       
      Obs.: não sou muito bom em rest e estou buscando aprender mais sobre ele, se alguém poder me ajudar agradeceria muito.
       
      Desde já agradeço alguém que conseguir me da uma força.
       
    • Por gsinhorini
      Olá! Bom dia pessoal tudo bem?
      Estou com uma dúvida, estou fazendo um requerimento em Ajax para pegar algumas informações e preencher alguns campos até ai tudo bem. A minha dúvida é o seguinte eu preciso fazer uma validação em um select como eu posso fazer isso.
      Eu criei um variável output que recebe as informações e monta o html, tenho que fazer a validação dentro do output. Vou colocar o código. 
      Muito obrigado pela atenção.
      $('#btn_problema').on('click', function () { var codigo_sac = $(this).attr('data-codigo'); console.log(codigo_sac); $.ajax({ type: "GET", url:'buscarProblema?codigo='+codigo_sac, dataType: "html", async:false, success: function (data) { console.log(data); var dados = JSON.parse(data); output = ""; $('#descricao-problema').val(dados.descricao); $('#Etapa02_codigo_sac').val(dados.codigo_sac); if (dados["debitos"] != null) { $.each(dados.debitos, function (i, item) { if (item.tipo == 1) { output += '<div class="col-md-12"><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Tipo<!-- <span class="required"> * </span> --></label><div class=""><select class="form-control select2me" disabled><option value="">Selecione...</option><option value="1" selected > Débitos </option></select></div></div></div><div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">Descrição:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" value="'+item.descricao+'" /></div></div></div></div><div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">Data:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="date" class="form-control text-center" value="'+item.data+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label uppercase">Valor:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" name="" id="" value="R$ '+item.valor+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Ação<span class="required"> * </span></label><div class=""><select class="form-control select2me acao_debitos" data-codigo="item.codigo"><option value="">Selecione...</option><option value="1"> Sim </option><option value="2"> Não </option></select></div></div></div></div>'; } if (item.tipo == 2) { output += '<div class="col-md-12"><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Tipo<!-- <span class="required"> * </span> --></label><div class=""><select class="form-control select2me" disabled><option value="">Selecione...</option><option value="2" selected > Multa </option></select></div></div></div> <div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">Data:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="date" class="form-control text-center" value="'+item.data+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label uppercase">Valor:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" name="" id="" value="'+item.valor+'" /></div></div></div></div><div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">AIT:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" value="RS'+item.ait+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Aprovação<span class="required"> * </span></label><div class=""><select class="form-control select2me acao_debitos" data-codigo="item.codigo"><option value="">Selecione...</option><option value="1"> Sim </option><option value="2"> Não </option></select></div></div></div></div>'; } $("#problema-debitos").html(output); $("#problema-debitos").trigger('chosen:updated'); }); } } }); });  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.