FooTable est une erreur indéfinie - jquery, footable

J'essaye de construire un fooTable où mes déclarations d'en-tête de table sont sur un autre formulaire et les champs de ligne HTML sur un autre formulaire. Voici le design,

forme pro

    <table class="footable table" id="L-EGY-TRG-501-00BP_fooTable" >
<thead>
<tr>
<th data-sort-initial="true" data-toggle="true">Employed by</th>
<th>Category</th>
<th data-hide="phone, tablet">Sub-Category</th>
<th data-hide="phone, tablet">Attendee Count</th>
</tr>
</thead>
<tbody id="L-EGY-TRG-501-00BP_fooTableBody">
</tbody>
</table>

forme trg-row

<table>
<tr id="yyy" data-losstype="fin-row" data-GUID="L-EGY-TRG-ROW-501-003H">
<td>
<input type="text" class="form-control" id="yyy_EmployedBy" name="yyy_EmployedBy" value=""   >
</td>
<td>
<input type="text" class="form-control" id="yyy_Category" name="yyy_Category" value=""   >
</td>
<td>
<input type="text" class="form-control" id="yyy_SubCategory" name="yyy_SubCategory" value=""   >
</td>
<td>
<input type="text" class="form-control" id="yyy_attendeecount" name="yyy_attendeecount" value=""   >
</td>


<td>
<button type="button" class="btn btn-sm btn-default btn-rounded" onClick="#" title="Add Attendee Row">
<i class="fa fa-plus"></i>
</button>
&nbsp;
<button type="button" class="btn btn-sm btn-default btn-rounded removeRowLink" onClick="#" title="Remove Attendee Row">
<i class="fa fa-minus"></i>
</button>
</td>

</tr>
</table>

C’est ce que j’essaie de faire avec JQuery,

$(document).ready(function(){
guid="xxxxx"
prepTable("/pro?openform,guid); //
});
function prepTable(surl,guid){
$.get( surl, function( data ) {

var footable = $(data).find(".footable").footable();

guid="xxxxx";
buildFooTable(guid,"/trg-row?openform");

});
}

funtion buildFooTabl(containerID,surl) {
$.get( surl, function( data ) {
var $row = $(data).find("#yyy");
var footable = $("#" + containerID + "_fooTable").data("footable");
var rowid = $row.attr("data-GUID");
$row.find("[id*=yyy]").each(function() {
var id = this.id || "";
this.id = id.replace("yyy", rowid)
});
$row.find("[name*=yyy]").each(function() {
var nm = this.name || "";
this.name = nm.replace("yyy", rowid)
});

$row.attr("id",rowid);
footable.appendRow($row);
});

Mais obtenir l'erreur "TypeError: footable est indéfinie" erreur sur cette ligne, mais l'id de fooTable arrive correctement.

var footable = $("#" + containerID + "_fooTable").data("footable");

Réponses:

1 pour la réponse № 1

L'erreur que vous obtenez est sur cette ligne:

var footable = $("#" + containerID + "_fooTable").data("footable");

Le problème est que nulle part dans votre code HTML n’avez-vous un attribut comme "data-footable".

La méthode jQuery .data ("parm") extrait la valeur d'un attribut data-parm. Le paramètre n'est pas pertinent. si vous avez une div comme celle-ci:

<div id="mydiv" data-mytext="This is my text"></div>

Et vous faites ceci:

var mytext = $("#mydiv").data("mytext")
alert(mytext);

L'alerte dira; "Ceci est mon texte". Parce que la fonction .data ("mytext") a extrait la valeur de l'attribut data-mytext.

Alors qu'est-ce que vous essayez de charger dans le var footable? si vous essayez d'obtenir une référence à votre table et que vous avez le conteneur ID correct, il vous suffit de

var footable = $("#" + containerID + "_fooTable");

---