Je charge une autre page dans un el via XHR. La page chargée contient js qui génère une erreur et échoue à moins que l'élément dom requis ne soit chargé sur la page. Comme c'est XHR .ready et. Al. ne fonctionnera pas.
Je l'ai avec un délai d'attente de 500 ms, mais ce n'est pas OK; Il doit y avoir une meilleure façon. Avec le timeout, le dom el ne se charge pas toujours et la page échoue.
Il y a un tableau codé en dur sur la page avec un id. Le script de la page est un plugin jquery (tables de données) et ne s'initiera que si la table est chargée.
J'ai pensé à avoir une fonction qui contient les éléments des tables de données et à appeler à plusieurs reprises while $('#tableID') est null mais je ne suis pas sûr que ce soit correct.
<div id="contactQueue">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="contactsQueueTable">
<thead>
<tr>
<th class="" rowspan="1" colspan="1" style="width: 185px; ">Contact Name</th>
<th class="" rowspan="1" colspan="1" style="width: 148px; ">Bus. Name</th>
<th class="" rowspan="1" colspan="1" style="width: 116px; ">Is Client</th>
<th class="" rowspan="1" colspan="1" style="width: 165px; ">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?php echo form_open('',array('id'=>'step2form','name'=>'step2form'));?>
<input type="hidden" name="clientID" value="<?php echo $clientID; ?>">
<?php echo form_close();?>
<script type="text/javascript" charset="utf-8">
console.log(jq('#currentContactsTable'))
while(jq('#currentContactsTable').html()==null){
initXHRPage();
console.log(jq('#currentContactsTable')+' not ready');
}
function initXHRPage(){
//init tables stuffs
}
ÉDITER;
Le problème était autre chose, un peu. Le script des tables de données est en cours de chargement via getScript(). L'élément était chargé normalement, mais initDatatables() se tirait avant le chargement de getScript() , pas avant le chargement de l'el.
La solution était d'appeler la fonction initDatatables() dans le rappel de succès getScript():
<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
initDatatable();
});
</script>
3 réponses
C'est ce que j'ai trouvé. Merci aux répondants pour obtenir de l'aide.
initPage();
function initPage(){
if(jq('#currentContactsTable').length==1){
initDatatable();
}else{
window.setTimeout(function(){
initPage();
},250);
}
}
function initDatatable(){
jq('#currentContactsTable').dataTable( {
//REST OF DATATABLE STUFF...
Ce n'est peut-être pas super joli car il repose toujours sur un timeout, mais au moins cette timeout c'est un peu plus robuste ...
^^^^ BZZZZZZZZZZ
Le problème était autre chose, un peu. Le script pour les tables de données est en cours de chargement via getScript (). L'élément était chargé normalement, mais initDatatables () était lancé avant le chargement de getScript (), pas avant le chargement de el.
La solution était d'appeler la fonction initDatatables () dans le rappel de succès getScript ():
<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
initDatatable();
});
</script>
Comment je comprends que votre html / js se charge:
- containerPage -> $ .get (/ajax/getMiddlePage.php)
- page XHR du milieu -> $ .get (/ajax/getContactQueue.php)
- page XHR du milieu -> $ .get (/ajax/getCurrentContactsTable.php)
Rugueux. ok, voici ce dont je pense que vous avez besoin:
<html>
<!---CONTAINER PAGE--->
<head>
<script type="text/javascript">
//this .ready is to register events we need to catch the '#currentContactsTable' load event
$(document).ready(function(){
//ajaxSuccess is a global ajax function, you need to check ajaxOptions object to ensure you have the correct 'ajaxSuccess' you thought you did.
$.ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions){
if (ajaxOptions.url == '/ajax/getCurrentContactsTable.php') {
$('#currentContactsTable').trigger('initDataTables');
}
});
// .live() does not need the element to exist on document.ready()
$('#currentContactsTable').live('initDataTables', function(event){
var dataTables = $(this).datatables({options:here});
});
});
</script>
</head>
<body></body>
</html>
Avez-vous essayé $(el).ready(...)? Cela devrait certainement fonctionner. Si ce n'est pas le cas, quelque chose d'autre ne va pas.
Éditer
Désolé, cela aurait dû être $("#your_xhr_loaded_content").ready()....
Je fais ce genre de choses tout le temps et ça marche, je pense que la clé est que je suis en train de charger un document.
Document HTML principal, index.html:
...
<body>
...
<div id="activity_content">
</div>
...
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
main.js:
...
function ruleManagement.loadContent() {
$.ajax({
url: "subdocs/ruleMgmt.html",
cache: false,
success: function(html) {
$("#activity_content").html(html);
}
}
}
ruleManagement.onReady = function(event) {
// Init contents of the rule_management_pane
...
}
Sous-document HTML, ruleMgmt.html
<div id="rule_management_pane">
<!-- Content here -->
...
</div>
<script type="text/javascript" language="JavaScript">
jQuery("#rule_management_pane").ready(ruleManagement.onReady);
</script>
Si j'appelle ruleManagement.loadContent(), ruleManagement.onReady() est appelé une fois que div # rule_management_pane a été chargé avec succès. Je ne peux pas dire avec certitude que onReady est invoqué avant que div # rule_management_pane soit inséré dans #activity_content, mais je pense que c'est le cas.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.