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 cfandrade
      Estou tentando fazer a mudança dos (li) desse sistema que chamei de PRONTUARIOS, apenas arrastando de uma (ul) atual para outra que chamei de CAIXA, estou tentando recuperar o valor do id do prontuario (li) e a caixa atual que o usuário deixou o prontuario caso tenha mudado para uma nova caixa (ul). se alguem puder me ajudar, preciso recuperar o valor desses ids e atualizar no banco de dados!
       
       <script type="text/javascript">          $(document).ready(function() {              $("ul").sortable({                 delay: 150,                 connectWith: ".parent",                 cursor: 'move',                 stop: function() {                     var caixaAtual = new Array();                     var prontuario = '';                     $('li .prontuario').each(function() {                         //caixaAtual = $("data-id").html();                         //prontuario = $("data-id").val(this);                     });                     console.log(prontuario);                     //updateOrder(prontuario,caixaAtual);                 }             });              function updateOrder(id,caixa) {                 $.ajax({                     url:"documentos/alterar_prontuario",                     type:'post',                     data:{id:id,caixa:caixa},                     success:function(data){                         toastr.success('Alterado com sucesso.');                     }                 })             }         }); <div class="container mx-auto mt-3 mb-5 text-center"> <h4 class="col-12 text-center mx-auto">LISTAGEM SEGUNDO VOLUME</h4> CAIXA N° 01 <ul id="c_01" class="col-12 parent mt-0 mb-2 ui-sortable"> <li id="239" data-id="239" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-5 align-middle mx-auto p-0 text-left">ADRIANO ALVES DE ALMEIDA</td> <td class="col-2 align-middle mx-auto p-0 text-center">617.598-8</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1257101/2020</td> <td class="d-print-none col-1 align-middle mx-auto p-0 text-center"><a type="button" class="btn btn-outline-danger" </tr> </tbody></table> </li> <li id="247" data-id="247" class="col-12 mx-auto prontuario ui-sortable-handle" style="position: relative; left: 0px; top: 0px;"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">5</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEX JORGE MELO DA SILVA</td> <td class="col-2 align-middle mx-auto p-0 text-center">664.041-1</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1251911/2020</td> </tr> </tbody></table> </li><li id="241" data-id="241" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">2</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEF DA SILVA OLIVEIRA</td> <td class="col-2 align-middle mx-auto p-0 text-center">1.199.560-2</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center"></td> </tr> </tbody></table> </li> <li id="240" data-id="240" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">3</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEX ALVES CERQUEIRA</td> <td class="col-2 align-middle mx-auto p-0 text-center">340.704-6</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1809667/2020</td> </tr> </tbody></table> </li> <li id="248" data-id="248" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">6</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEX XAVIER PIAUI</td> <td class="col-2 align-middle mx-auto p-0 text-center">771.513-9</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1243357/2020</td> </tr> </tbody></table> </li> <li id="249" data-id="249" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">7</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEXANDRE DE OLIVEIRA MEDEIROS</td> <td class="col-2 align-middle mx-auto p-0 text-center">893.604-9</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1415815/2020</td> </tr> </tbody></table> </li><li id="246" data-id="246" class="col-12 mx-auto prontuario ui-sortable-handle" style="position: relative; left: 0px; top: 0px;"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">4</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEX EDUARDO DE JESUS LOURENCO</td> <td class="col-2 align-middle mx-auto p-0 text-center">236.643-3</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1392042/2020</td> </tr> </tbody></table> </li> <li id="250" data-id="250" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">8</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEXANDRE PEREIRA DA COSTA</td> <td class="col-2 align-middle mx-auto p-0 text-center">932.592-9</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1532754/2020</td> <td class="d-print-none col-1 align-middle mx-auto p-0 text-center"><a type="button" class="btn btn-outline-danger" href="http://10.14.101.160/cimic/?url=documentos/excluir_segundo_volume/250" title="APAGAR"><i class="fa fa-trash"></i></a></td> </tr> </tbody></table> </li> </ul> CAIXA N° 02 <ul id="c_02" class="col-12 parent mt-0 mb-2 ui-sortable"> <li id="242" data-id="242" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-5 align-middle mx-auto p-0 text-left">ALEXSANDRO HENRIQUE FRANCA CAMARGO DE MOURA</td> <td class="col-2 align-middle mx-auto p-0 text-center">1.224.350-7</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">2092453/2020</td> </tr> </tbody></table> </li> <li id="251" data-id="251" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">2</td> <td class="col-5 align-middle mx-auto p-0 text-left">AMAURI FERREIRA DA SILVA</td> <td class="col-2 align-middle mx-auto p-0 text-center">613.004-1</td> <td class="col-1 align-middle mx-auto p-0 text-center">3</td> <td class="col-2 align-middle mx-auto p-0 text-center">1243426/2020</td> </tr> </tbody></table> </li> <li id="prontuario" data-id="243" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0"> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">3</td> <td class="col-5 align-middle mx-auto p-0 text-left">ANDERSON LIMA RIBEIRO GONCALVES</td> <td class="col-2 align-middle mx-auto p-0 text-center">1.164.179-2</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center"></td> </tr> </tbody></table> </li> <li id="252" data-id="252" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">4</td> <td class="col-5 align-middle mx-auto p-0 text-left">ANDERSON SOUZA VELOSO</td> <td class="col-2 align-middle mx-auto p-0 text-center">277.426-3</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center"></td> </tr> </tbody></table> </li> <li id="244" data-id="244" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">5</td> <td class="col-5 align-middle mx-auto p-0 text-left">ANDRE ALMEIDA</td> <td class="col-2 align-middle mx-auto p-0 text-center">1.096.394-0</td> <td class="col-1 align-middle mx-auto p-0 text-center">2</td> <td class="col-2 align-middle mx-auto p-0 text-center"></td> </tr> </tbody></table> </li> <li id="245" data-id="245" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">6</td> <td class="col-5 align-middle mx-auto p-0 text-left">ANDRE LUIZ RODRIGUES</td> <td class="col-2 align-middle mx-auto p-0 text-center">465.133-7</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">2213488/2020</td> </tr> </tbody></table> </li> </ul> CAIXA N° 03 <ul id="c_03" class="col-12 parent mt-0 mb-2 ui-sortable"> <li id="253" data-id="253" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-5 align-middle mx-auto p-0 text-left">ANDREO LEONE FERREIRA LOBATO</td> <td class="col-2 align-middle mx-auto p-0 text-center">719.305-5</td> <td class="col-1 align-middle mx-auto p-0 text-center">2</td> <td class="col-2 align-middle mx-auto p-0 text-center">1359268/2020</td> </tr> </tbody></table> </li> <li id="254" data-id="254" class="col-12 mx-auto prontuario ui-sortable-handle"> <table class="table table-hover table-sm mb-0 "> <tbody><tr class="row col-12 mx-auto text-center"> <td class="col-1 align-middle mx-auto p-0 text-center">2</td> <td class="col-5 align-middle mx-auto p-0 text-left">AUGUSTO PEREIRA DA SILVA</td> <td class="col-2 align-middle mx-auto p-0 text-center">1.094.345-4</td> <td class="col-1 align-middle mx-auto p-0 text-center">1</td> <td class="col-2 align-middle mx-auto p-0 text-center">1183605/2020</td> </tr> </tbody></table> </li> </ul> </div>  
    • By AlexandrePrezzi
      Estou fazendo um formulário onde tenho que enviar um upload de videos .... fiz o mesmo procedimento para imagens e funciona perfeitamente... porem para vídeo nao...
       
      Código do  Formulário
       
      <form id="Form_AddVideos" class="form-group" method="POST" action="javascript:func()" enctype="multipart/form-data"> <input type="hidden" id="ACAO_VIDEO" name="ACAO_VIDEO" value="INSERT_NEW_VIDEOS" /> <input type="hidden" id="ipv100_video" name="ipv100_video" value="<?php echo $_GET['id_pv100']; ?>" /> <input type="hidden" id="tipo_video" name="tipo_video" value="V" /> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="form-group"> <label for="add_videos">Adicionar Fotos</label><br /> <input class="form-control form-control-sm" type="file" name="video[]" multiple="multiple" id="video" accept="video/*" /> </div> </div> </div> <button type="submit" id="btn_Gravar_video" title="Gravar" name="wGravar_video" class="btn btn-primary tp" value="TELA"> <i class="fa fa-save"></i> Gravar </button> <button type="button" class="btn btn-danger tp btn_fechar_modal_cliente" title="Cancelar" data-dismiss="modal" style="margin-left: 5px;"> <i class="fa fa-times"></i> Cancelar </button> </div> </form>  
      Script Ajax para enviar os dados
       
      <script type="text/javascript"> $(document).ready(function (e) { $("#Form_AddVideos").on('submit',(function(e) { e.preventDefault(); $.ajax({ enctype: 'multipart/form-data', url: "src/controller/request_videos.php", type: "POST", data: new FormData(this), contentType: false, cache: false, processData:false, beforeSend : function() { //$("#preview").fadeOut(); $('#resultErroVid').html("<img src='img/aguarde.gif' />"); }, success: function(g) { var objVid = JSON.parse(g); if (objVid.rst){ if ($('#ACAO_VIDEO').val() === 'INSERT_NEW_VIDEOS'){ document.getElementById('wOKDivVid').style.visibility = "visible"; document.getElementById('wOKDivVid').style.display = "block"; $('#resultOKVid').html(objVid.msg); setTimeout(function(){ document.getElementById('wOKDivVid').style.visibility = "hidden"; document.getElementById('wOKDivVid').style.display = "none"; $(".modal_proprio_videos").hide(); document.location.reload(true); }, 1200); } else { document.getElementById('wErrorDivVid').style.visibility = "visible"; document.getElementById('wErrorDivVid').style.display = "block"; $('#resultErroCli').html(objVid.msg); setTimeout(function(){ document.getElementById('wErrorDivCli').style.visibility = "hidden"; document.getElementById('wErrorDivCli').style.display = "none"; $(".modal_proprio_imagens").hide(); document.location.reload(true); }, 1200); } } else { //fEnableBtn(Form_Cli_GQPS); document.getElementById('wErrorDivVid').style.visibility = "visible"; document.getElementById('wErrorDivVid').style.display = "block"; $('#resultErroVid').html(objVid.msg); setTimeout(function(){ document.getElementById('wErrorDivVid').style.visibility = "hidden"; document.getElementById('wErrorDivVid').style.display = "none"; $(".modal_proprio_imagens").hide(); document.location.reload(true); }, 2000); }//fim do if/else objCli } }); })); }); </script> Arquivo php request .....(pedaço)
       
      if (@$_POST['ACAO_VIDEO'] == 'INSERT_NEW_VIDEOS'){ require_once '../model/setaqueryGQPS.php'; require_once '../model/conecta.php'; //require_once '../model/zConst_GQPS.php'; //require_once '../../../zLib.php'; $wEMP = '001'; $wPV100 = $_POST['ipv100_video']; $video = $_FILES['video']; if ($_POST['ACAO_VIDEO'] == 'INSERT_NEW_VIDEOS'){ //require_once '../model/zConst_GQPS.php'; if($video != ''){ O que acontece que no $_FILES,  o arquivo não esta sendo salvo na pasta  temporaria..... está vindo vazia essa informação, conforme mostro na imagem ....
       
      Alguem sabe me dizer onde ta o problema ? 
       
      Tenho um procedimento bem semelhante para imagens e funciona perfeitamente.
       
       
       

    • By CiganoA3
      Eu tenho uma situação estranha, que até estou com dificuldades de explicar. Mas vamos la.
       
               Tenho um código ajax que é igual ao que coloquei aqui mudando só endereço da url que fiz para testar este erro que está acontecendo na aplicação. O que ocorre, e que tudo funciona, os dados são coletados, o ciclo dos eventos ocorrem sem problemas, mas ao final do ajax ele redireciona a pagina para ela mesma como uma copia com os parâmetros na url. Vou tentar exemplificar para deixar claro. Vamos supor que tenha um formulário com estes parâmetros de inputs nome e telefone que não tem nada haver com o ajax. O ajax ao completar muda o endereço da url do browser,  algo como isso.  http://endereçodapagina.php?nome=xxxxx&telefone=99912345, carregando a pagina novamente. E este é o comportamento inesperado. E como podem ver o código e muito simples e não vejo razão para este comportamento.
      function OpenParam(idproxima,statusAlvo){ let pf_id=$("#sf_id").val(); let urlRegras="endereco_alvo.php/"+pf_id+"/"+idproxima; $.ajax({ type:"GET", url:urlRegras, success:function(data, textStatus, request){ alert("sucesso"); }, error:function(data){ alert("error"); }, complete:function(xhr, textStatus){ alert("complete"); } }); }  
               
    • By Matheus B. Siqueira
      Fala pessoal, meu problema é o seguinte: Tento retornar os valores do json_encode via AJAX, só que na hora de armazenar no const ele da erro de:
      <b>Notice</b>: Undefined variable: videos_pendentes in <b>C:\xampp\htdocs\tcc\monitor.php</b> on line <b>504</b><br /> <br /> <b>Notice</b>: Trying to access array offset on value of type null in <b>C:\xampp\htdocs\tcc\monitor.php</b> on line <b>504</b><br /> null); Não sei qual seria a melhor forma de retornar esses dados, alguma sugestão?
      AJAX:
      $('#btn-lista-videos-carousel').click(function() { var nome_monitor = $("#nomecomp").val(); $.ajax({ url: 'pesquisar_video_pendente.php', data: {nome_monitor}, dataType: 'json', type: "POST", complete: function(data) { const videos_pendentes = JSON.parse(<?php echo json_encode($videos_pendentes[0]) ?>); let itens = ''; let indicadores = ''; $('#botaobaixar').hide(); $('#tudo_monitor').hide(); $('#carouselExampleIndicators_2').hide(); if (videos_pendentes.length > 0) { videos_pendentes.forEach(function(video, indice) { indicadores += '<li data-target="#carouselExampleIndicators" data-slide-to="' + indice + '" class="' + (indice == 0 ? 'active' : '') + '"></li>' itens += '<div data-link_video="' + video.link_video + '" data-id="' + video.idvideo_monitor + '" data-titulo="' + video.titulo_video + '" data-situacao="' + video.situacao + '" class="carousel-item ' + (indice == 0 ? 'active' : '') + '">'; itens += ' <iframe width="100%" height="350" src="https://www.youtube.com/embed/' + video.link_video + '" frameborder="0" allowfullscreen></iframe>' itens += '</div>'; }); $('#tudo_monitor').show(); $('#carouselExampleIndicators').show(); $('#carousel-indicadores').html(indicadores); $('#carousel-itens').html(itens); } else { alert('Nenhum vídeo pendente'); } } }); }); E o meu PHP, a qual busca os dados no mysql:
      <?php $monitor = $_POST['nomecomp']; $servidor = 'localhost'; $usuario = 'root'; $senha = 'root'; $banco = 'onteach'; $conexao = mysqli_connect($servidor, $usuario, $senha, $banco); $consulta = "SELECT * FROM video_monitor WHERE video_monitor.monitor = '$monitor' AND video_monitor.pendente = 1 OR video_monitor.pendente = 3"; $resultados = mysqli_query($conexao, $consulta); $videos_pendentes = array(); while ($video = mysqli_fetch_assoc($resultados)) $videos_pendentes[] = $video; mysqli_free_result($resultados); mysqli_close($conexao); $videos_pendentes = json_encode($videos_pendentes); echo json_encode($videos_pendentes); ?>  
    • By Matheus B. Siqueira
      Olá, tento fazer uma requisição para atualização de item do accordion no mysql, porém apenas um item é atualizado.
      O código funciona da seguinte forma: É buscado perguntas referente ao vídeo selecionado no carousel, logo após, o código da Amostra de Código 1, cria os cards dentro do modal. Cada card é referente a uma pergunta diferente registrada no Banco de Dados.
      Porém, ao tentar atualizar um item do MYSQL, dentro do card, no textarea, o primeiro item (1º pergunta) desse accordion é atualizado, o segundo item (2º pergunta) não é atualizado.
      Cada pergunta possui um id no MYSQL, bem como, um assunto, uma resposta, uma pergunta... de acordo com a Figura 01.
      Vale ressaltar que, de acordo com a Amostra de Código 2, é buscado juntamente com o AJAX, todas as perguntas referente ao vídeo selecionado no carousel.
      Amostra de Código 1:
      $(document).ready(function() { $(function() { $('#responder_duvidas').click(function() { var codigoVideo2 = $('.carousel-item.active').attr('data-link_video'); var accordion2 = ""; $.post("buscar_duvida_monitor_resp.php", { codigo_video_monitor: codigoVideo2, }, function(data2, status) { if (data2 !== "Fail") { $("#dynamic_accordion #accordion").html(accordion2); // Adiciona essa linha $.each(JSON.parse(data2), function (index2, duvida3) { accordion2 += '<div class="card" style="margin: 5px">'; accordion2 += '<div class="card-header" id="heading'+index2+'">'; accordion2 += '<h5 class="mb-0">'; accordion2 += '<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'+index2+'" aria-expanded="true" aria-controls="collapse'+index2+'">'; accordion2 += duvida3.assunto; accordion2 += '</button>'; accordion2 += '</h5>'; accordion2 += '</div>'; accordion2 += '<div id="collapse'+index2+'" class="collapse" aria-labelledby="heading'+index2+'" data-parent="#accordion">'; accordion2 += '<div class="card-body">'; accordion2 += '<div style="background: #ddd; color #fff; padding: 10px 20px; border-radius: 5px">'; accordion2 += duvida3.pergunta; accordion2 += '</div>'; accordion2 += '<hr>'; accordion2 += '<div style="background: #fff; color #fff; padding: 10px 20px; border-radius: 5px">'; accordion2 += '<form method="post" enctype="multipart/form-data">'; accordion2 += '<textarea class="form-control" name="resposta" id="resposta" required>'+duvida3.resposta+'</textarea>'; accordion2 += '<input type="hidden" id="id_duvidas" value="'+duvida3.idduvidas+'" />'; accordion2 += '<br><button type="button" id="enviar_resposta" class="btn btn-success btn-sm">Enviar resposta</button>'; accordion2 += '</form>'; accordion2 += '</div>'; accordion2 += '</div>'; accordion2 += '</div>'; accordion2 += '</div>'; $("#dynamic_accordion #accordion").html(accordion2); }); } }); }); $(document).on("click", "#enviar_resposta",function(){ $.ajax({ url: "atualizar_resposta.php", method: "POST", data: { resposta: $('#resposta').val(), idduvidas: $('#id_duvidas').val() }, success: function(res) { var data = JSON.parse(res); alert((data.success == true) ? "Pergunta atualizada" : "Pergunta não atualizada"); $('.modal-backdrop').remove(); return; } }); // fecha modal $("#modalDuvidas").modal("hide"); }); }); }); Figura 1:

       
       
      Amostra de Código 2:
      <?php if (isset($_POST['idduvidas']) && isset($_POST['resposta'])) { $id_resposta = $_POST['idduvidas']; $resposta = $_POST['resposta']; $servidor = 'localhost'; $usuario = 'root'; $senha = 'root'; $banco = 'onteach'; $conexao = mysqli_connect($servidor,$usuario,$senha,$banco); $consulta2 = "UPDATE duvidas SET duvidas.resposta = '$resposta' WHERE duvidas.idduvidas = '$id_resposta'"; die(json_encode(['success'=>(mysqli_query($conexao, $consulta2))])); } Figura 2 (FIGURA COMPLEMENTAR APRESENTANDO O ACCORDION NO WEBSITE)

       
      Por fim, este tópico auxilia em um tema que é específico, porém, pode ser utilizado para outros fins de programação, bem como, a utilização de definição de váriantes em accordion com maiores itens.
      Desde já, agradeço.
       
×

Important Information

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