Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    jQuery setInterval perdo riferimenti a file esterni

    Buon pomeriggio.
    Nella head e/o footer del sito ho alcuni file .js, bootstrap, ecc ecc.
    Nel body della pagina ho un <div id='container'>, che contiene una tabella HTML, popolata attraverso una funzione in php, con altre funzioni tipiche di jquery e bootstrap, come la paginazione, la input search e quant'altro.

    Appena la pagina ha finito di caricarsi, vedo tutto perfettamente.
    Ma, nel caso in cui, vado ad interagire con il solo <div id='container'>,attraverso questa funzione:
    codice:
    setInterval(function() {
            $("#container").load(location.href+" #container>*","");
    	}, 1000);
    Non mi fa vedere, più nessuna funzionalità come la paginazione, la input search ecc ecc.
    E' come se perdesse i riferimenti a tutti quei file jquery e bootstrap che ho nella head e/o footer.
    Mi spiegate il perchè?

    Grazie.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, come tu dici, potrebbe dipendere dalla perdita dei riferimenti per l'elemento/gli elementi in questione nel momento in cui sono ricaricati dinamicamente. Difficile però capire dove sta esattamente il problema e come poter intervenire senza vedere la pagina in azione. Puoi postare un link?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Si, hai ragione scusami....
    codice:
    <?php
    setlocale(LC_ALL, 'it_IT');
    define('ROOT_DIR', $_SERVER["DOCUMENT_ROOT"]."/intranet/");
    include ROOT_DIR .'/dwhTest/inc/defineTest.php';
    get_ob_gzhandler();
    get_header();//dentro questa funzione c'è l'head della pagina con questi file:
    <!--DOCTYPE html>
    	<html lang='en'>
    	  <head>
    		<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    		<meta charset='utf-8'>
    		<meta http-equiv='Content-Language' content='it' >
    		<meta name='Robots' content='All' >
    		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
    		<meta name='viewport' content='width=device-width, initial-scale=1'>
    		<title>DataTables | Gentelella</title>
    		<script src='../gentelella/jquery/dist/jquery.min.js'></script>
    		<!-- Bootstrap -->
    		<link href='../gentelella/bootstrap/dist/css/bootstrap.min.css' rel='stylesheet'>
    		<!-- Custom Theme Style -->
    		<link href='../gentelella/build/css/custom.min.css' rel='stylesheet'>
    		<link href='../gentelella/build/css/font-awesome.css' rel='stylesheet'>
    		<style>
    		body{background-color:#FFF}
    		</style>
    	</head-->
    <script>
    $(document).ready(function() {
    	$('#datatable').dataTable({
    		"paginate": true,
    		"sort": false
    	});
    });
    </script>
    <body>
    <div id="container" class="container">
    <!-- dentro "container" ho le mie funzioni in php, con le quali visualizzo la tabella HTML con i dati, questo div è quello che vado ad aggiornare-->
    </div>
    <?php get_footer();//questa funzione contiene?>
    
    <!--script src='../gentelella/jquery/dist/jquery.min.js'></script><script src='../gentelella/bootstrap/dist/js/bootstrap.min.js'></script>
    <script src='../gentelella/datatables.net/js/jquery.dataTables.min.js'></script>
    <script src='../gentelella/datatables.net-bs/js/dataTables.bootstrap.min.js'></script>
    <link rel='stylesheet' href='../gentelella/datetimepiker/bootstrap-datetimepicker.min.css' />
    <script src='../gentelella/datetimepiker/moment.min.js'></script>
    <script src='../gentelella/datetimepiker/bootstrap-datetimepicker.min.js'></script-->
    
    
    </body>
    </html>
    ?>
    Grazie mille.

  4. #4
    no un attimo.
    Allora ricapitolando.
    Tralasciando quello che ho scritto in precedenza.
    Il problema lo dovrei avere qui:
    codice:
    <html>
    <head>
    <script>
            $(document).ready(function() {
                  $('#datatable').dataTable({
    		      "paginate": true,
    		      "sort": false
    	          });
            });
    </script>
    </head>
    <body>
    <table id='datatable' class='table table-striped table-bordered'>
    <!-- qui ci sono tutti i valori-->
    </table>
    <footer><!--ecc ecc--></footer>
    <script>
    function subInCarico(id,incarico,user){
    $.ajax({
    			type: "POST",
    			url: "send.php",
    			data: "id=" + id + "&inCarico=" + incarico+"&user="+user,
    			dataType: "html",
    			success: function(msg)
    			{
    $("#datatable").load(location.href+" #datatable>*","");//aggiorno soltanto la parte relativa alla tabella
    },
    			error: function()
    			{
    				alert("Chiamata fallita, si prega di riprovare...");
    			}
    		});
    		return;
    	}
    }
    </script>
    </body>
    </html>

    Ho modificato il refresh, aggiorno soltanto la parte relativa alla tabella e non tutto il div "container";
    Bootstrap mette a disposizione la funzioncina "$('#datatable').dataTable({..." che pagina ogni 10 record.
    Purtroppo mi sono accorto che, anche aggiornando la sola tabella tramite "$("#datatable").load(..." è come se non sapesse più per quanti record deve paginare, restituendomi in visualizzazione dopo il refresh, il totale dei record.

    Come posso risolvere?
    Grazie mille.

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ho modificato il refresh, aggiorno soltanto la parte relativa alla tabella e non tutto il div "container";
    Non entro in merito a questo discorso ma con quel load() mi pare che tu stia facendo un doppio passaggio. Infatti il load() non è altro che una chiamata AJAX semplificata (diciamo così), per cui tu stai sostanzialmente facendo una chiamata dentro l'altra. La cosa mi pare contorta.

    Ad ogni modo, il punto del problema sta nella perdita dei riferimenti dell'istanza dataTable.

    Non ho troppa esperienza con tale funzionalità ma personalmente avrei aggiornato l'intero container (come da tua situazione iniziale) e quindi, al success della chiamata AJAX, avrei ricreato l'istanza con $('#datatable').dataTable(... Chiaramente è solo un'ipotesi, eventualmente bisognerebbe verificarne il funzionamento.

    Se invece aggiorni solo la tabella, come hai fatto poi, (mantenendo intatto l'involucro dell'elemento #datatable) forse potresti risolvere col metodo draw() che dovrebbe "aggiornare" i riferimenti ai nuovi dati inseriti. Dico "forse" perché tale metodo è usato dopo l'aggiunta o l'eliminazione di righe nella tabella esistente (come indicato nella documentazione) per cui non so se possa funzionare anche quando viene rigenerato l'intero contenuto della tabella. Vedi magari anche l'eventuale uso dei parametri, descritti nella documentazione.
    Tieni conto che in questo caso dovresti usare tale metodo solo dopo l'effettivo aggiornamento che dovrebbe essere determinato al completamento del load() (in quanto si tratta appunto di una chiamata AJAX, quindi un processo di tipo asincrono). In sostanza dovresti usarlo dentro la relativa funzione di callback.

    Fai qualche prova.
    Ultima modifica di KillerWorm; 12-01-2018 a 18:37
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Non entro in merito a questo discorso ma con quel load() mi pare che tu stia facendo un doppio passaggio. Infatti il load() non è altro che una chiamata AJAX semplificata (diciamo così), per cui tu stai sostanzialmente facendo una chiamata dentro l'altra. La cosa mi pare contorta.
    Grazie per avermi risposto.
    Una chiamata dentro l'altra?Puoi spiegarmi meglio per favore.
    C'è un modo diverso per aggiornare la tabella da questo?
    codice:
    $("#datatable").load(location.href+" #datatable>*","");
    Grazie ancora.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Una chiamata dentro l'altra?Puoi spiegarmi meglio per favore.
    Come ho già scritto:
    il load() non è altro che una chiamata AJAX semplificata
    Nel tuo script vedo che hai fatto una prima chiamata AJAX:
    codice:
    $.ajax({
                type: "POST",
                url: "send.php",
    ...
    e nel success vai a fare una seconda chiamata col metodo load().

    Ho scritto anche che non entro in merito a questo discorso perché non so esattamente cosa vai a fare con la prima chiamata.

    Questa chiamata cosa fa esattamente? Forse aggiorna un database, o cosa?
    Cosa viene restituito nel success? Vedo che c'è un argomento msg ma non è stato utilizzato da nessuna parte.

    Per cui mi chiedo, già da questa chiamata non è che puoi ottenere il contenuto aggiornato da inserire dentro #datatable?

    Considerando il tuo load():
    codice:
    $("#datatable").load(location.href+" #datatable>*","");
    è chiaro che va ad aggiornare solo la tabella, ma tu hai idea di cosa c'è dietro quel metodo?
    In sostanza va ad effettuare una chiamata AJAX alla stessa pagina (che presumo a questo punto risulti aggiornata), quindi restituisce (nel suo success) il contenuto aggiornato di #datatable (della pagina richiamata) e lo riversa dentro il #datatable della pagina corrente.

    Per questo dico che mi sembra un doppio passaggio, perché dovresti già poter ottenere quello che ti serve con la prima chiamata, facendo magari in modo che la pagina send.php (o chi per lei) si occupi anche (se già non lo fa) di restituire il solo contenuto da inserire nel tuo #datatable.

    A questo punto puoi ricreare l'istanza del dataTable rieseguendo magari questo script:
    codice:
    $('#datatable').dataTable({
                  "paginate": true,
                  "sort": false
    });
    o provare il metodo draw() come già ti ho indicato.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    allora qui vado ad inviare questi valori id,inCarico,user alla pagina send.php, la quale attraverso una funzione esegue un UPDATE di due campi della TB_SEGNALAZIONI.
    codice:
    $.ajax({
    	type: "POST",
    	url: "send.php",
    	data: "id=" + id + "&inCarico=" + incarico+"&user="+user,
    ecc ecc
    se $.ajax({ mi restituisce il success voglio ricaricare soltanto la tabella con i record aggiornati
    codice:
    success: function(msg)
    {
    $("#datatable").load(location.href+" #datatable>*","");
    La pagina send.php ha il compito di invia i dati per l'UPDATE e non fa altro:
    codice:
    if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {
    	$segnalazioni = $test->InPresaInCarico($_POST['id'],$_POST['inCarico'],$_POST['user']);
    	# controllo sull'esito del metodo
    	if ($segnalazioni) {
    		# notifica in caso di esito positivo
    		echo "<div id='datatable' class='alert alert-success' role='alert'>Risposta registrata ed inviata</div>";
    	}else{
    		# notifica in caso di esito negativo
    		echo "<div class='alert alert-danger' role='alert'>Errore in fase di risposta</div>";
    	}
    }
    Il metodo draw(), non lo riconosce non capisco perché, nonostante tutto richiami i file(js e bootstrap) necessari per il corretto funzionamento.

    Di sicuro, sbaglio qualcosa.

  9. #9
    Ho risolto in questo modo, invece di interagire con l'intera tabella #datatable, intervengo aggiornando attraverso un ID univoco, la riga della #datatable.
    Cosi:
    codice:
    $("#"+id).load(location.href+" #"+id+">*","");
    e nella porzione dell'HTML ho questo:
    codice:
    while($row = $prs->fetch_row()){
          $srt .= "<tr id='$row[0]'>";
    ...
    
    In questo modo, toglie soltanto la riga della tabella avente quell'ID, che passo alla funzione
    codice:
    function subInCarico(id,incarico,user){...}
    
    Ti ringrazio, e mi scuso per averti fatto perder tempo.
    Comunque ti ringrazio per esserti interessato.
    Alla prossima.

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ok, lascia perdere il discorso della doppia chiamata...

    Fai questa prova: imposta una funzione di callback nel metodo load e lì vai a ricreare l'istanza dataTable.

    EDIT: ah ok, non avevo visto che avevi risolto bene così, alla prossima
    Ultima modifica di KillerWorm; 17-01-2018 a 15:43
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.