After using dynamic imports in my single route with Flowrouter in my meteor1.5 app like this:
FlowRouter.route(’/’, {
name: ‘home’,
async action() {
const { default: ChargesAdmin } = await import(’./components/Charges/Wrapper.jsx’);
const {default: dataComposer} = await import(’./containers/ListingCharges.js’);
const ChargesAdminCtx = dataComposer(ChargesAdmin);
mount(MainLayoutCtx, {
content: () => ()
});
},
});
One of my div blocks, supposed to appear after a click, button through the jquery does not show up. This block is located inside the route component, which flowrouter finds and displays, along with all other blocks, including some that appear at the click of button with jquery as the block concerned. With a route that does not use dynamic imports, everything is normally displayed. What to do to display the hidden block?
Here is the code of that block:
Détail des dépenses Trier
</div>
<div className="panel-body">
<b><p id="message"> {error} </p></b>
<div id="ligneAddDep" className="horizontal-form">
<div className="col-6 col-md-6">
<div className="form-group span6">
<label htmlFor="formField1"> Libelle </label>
<input type="text" ref="libRef" placeholder="libelle" id="formField1" autoComplete="true" className="form-control" />
</div>
<div className="form-group span6">
<label htmlFor="formField2"> Montant </label>
<input type="number" ref="MRef" placeholder="Montant" id="formField2" autoComplete="true" className="form-control" />
</div>
<div className="form-group">
<label htmlFor="formField3"> Date Echéance </label>
<input type="text" ref="echeRef" placeholder="YYYY-MM-DD" id="formField3" className="form-control" name="formField3" />
</div>
<div className="form-group">
<label className="form-check-label">
<input type="checkbox" className="form-check-input" name="reglemt" id="optionsRadios1"/>
Règlement effectué
</label>
</div>
</div>
<div className="col-6 col-md-6">
<div className="form-group span6">
<label htmlFor="formField4"> Date dépense </label>
<input type="text" ref="factRef" id="formField4" className="form-control" defaultValue={moment(new Date()).format("YYYY-MM-DD")} name="formField4" />
</div>
<div className="form-group">
<label htmlFor="select1"> Mode règlement </label>
<select className="form-control" id="select1" name="select1" onChange={this.hideElt()} placeholder="choisir">
<option id="toHide" value="disabled"> Choisir </option>
<option>CHE</option>
<option>ESP</option>
<option>VIR</option>
<option>CB</option>
</select>
</div>
<div className="form-group">
<label htmlFor="formField4"> N° Pièce </label>
<input type="text" className="form-control" ref="depRef" placeholder="N° CHE/CB" id="formField" />
</div>
<button className="pull-right btn btn-block btn-sm btn-info" id="btnAjtDep" onClick={this.addDepense.bind(this)}> Ajouter </button>
</div>
</div>
<div id="styleTable">
<table className="table table-bordered table-striped table-hover" id="tableau2">
<thead id="enteteStyleTable">
<tr >
<th className="bloc1"> <b> Libelle </b> </th>
<th className="bloc2"> <b> Montant </b> </th>
<th className="bloc3"> <b> Date dépense </b> </th>
<th className="bloc4"> <b> Date échéance </b> </th>
<th className="bloc5"> <b> Reglé </b> </th>
<th className="bloc6"> <span className="glyphicon glyphicon-edit" aria-hidden="true"></span> </th>
<th className="bloc7"> <span aria-hidden="true" className="glyphicon glyphicon-trash"></span> </th>
<th className="bloc8"> <span className="glyphicon glyphicon-chevron-down"> </span> </th>
</tr>
</thead>
</table>
{deps.map(depInfo => {
if(typeof(EltSelected.get('ELT_SELECTED')) !== undefined){
if(depInfo.codeCat == EltSelected.get('ELT_SELECTED')){
return(
<table className="table table-bordered table-striped table-hover" id="tableau2" key={depInfo._id}>
<thead>
<tr className="bloc0" key={depInfo._id} id={depInfo._id}>
<td className="bloc1 pull-left"> {depInfo.libelle} </td>
<td className="bloc2"> {depInfo.montant} </td>
<td className="bloc3">
{depInfo.dateFacturation == 'Invalid date' ? <span className="glyphicon glyphicon-option-horizontal"> </span> : depInfo.dateFacturation}
</td>
<td className="bloc4">
{depInfo.dateEcheance == 'Invalid date' ? <span className="glyphicon glyphicon-option-horizontal"> </span> : depInfo.dateEcheance}
</td>
<td className="bloc5">
{depInfo.etatReglement == 'true' ? <span className="glyphicon glyphicon-ok" id="greenIcon"> </span> : <span> </span>}
</td>
<td className="bloc6">
{depInfo.etatReglement == 'true' ? <span className="glyphicon glyphicon-edit disableIcon" aria-hidden="true"></span> :
<a className="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href={`#${depInfo.codeMI+depInfo._id}`} aria-expanded="false" aria-controls={depInfo.codeMI+depInfo._id}>
<span className="glyphicon glyphicon-edit" aria-hidden="true" id="editIcon"></span>
</a>
}
</td>
<td className="bloc7">
{depInfo.etatReglement == 'true'? <span aria-hidden="true" className="glyphicon glyphicon-trash disableIcon"></span> : <span aria-hidden="true" onClick={this.deleteDepense.bind(this, depInfo._id)} className="glyphicon glyphicon-trash activeIcon"></span>}
</td>
<td className="bloc8">
{ depInfo.etatReglement == 'true' ?
<a className="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href={`#${depInfo.codeMI}`} aria-expanded="false" aria-controls={depInfo.codeMI}>
<span className="glyphicon glyphicon-chevron-down" id='ouvrirDep' > </span>
</a> : <span className="glyphicon glyphicon-chevron-down" id='disableIcon' > </span>
}
</td>
</tr>
</thead>
<tbody>
<tr>
<td id={depInfo.codeMI} className="panel-collapse collapse" role="tabpanel" aria-labelledby={depInfo._id}>
<div className="panel-body">
<span className="bloc91"> Mode de règlement : {depInfo.modeReglement} </span>
<span className="bloc91"> {depInfo.modeReglement !== 'ESP' ? "N° Pièce : " + depInfo.numPiece : null} </span>
</div>
</td>
<td id={depInfo.codeMI+depInfo._id} className="panel-collapse collapse" role="tabpanel" aria-labelledby={depInfo._id} key={depInfo._id}>
<div className="panel-body">
<br/>
<div id={`ligneUpdateDep-${depInfo._id}`} >
<div className="col-6 col-md-6">
<div className="form-group span6">
<label htmlFor="field1"> Libelle </label>
<input type="text" ref={`lib-${depInfo._id}`} defaultValue={depInfo.libelle} id={`lib-${depInfo._id}`} autoComplete="true" className="form-control fieldUpdForm" />
</div>
<div className="form-group span6">
<label htmlFor="field2"> Montant </label>
<input type="number" ref={`mont-${depInfo._id}`} defaultValue={depInfo.montant} id={`mont-${depInfo._id}`} autoComplete="true" className="form-control fieldUpdForm" />
</div>
<div className="form-group">
<label htmlFor="field3"> Date Echéance </label>
<input type="date" ref={`eche-${depInfo._id}`} defaultValue={depInfo.dateEcheance == "Invalid date" ? null : depInfo.dateEcheance} id={`eche-${depInfo._id}`} className="form-control fieldUpdForm" />
</div>
<div className="form-group">
<label className="form2-check-label">
<input type="checkbox" className="form2-check-input" name="reglemt2" id={`radios-${depInfo._id}`}/>
Réglé
</label>
</div>
</div>
<div className="col-6 col-md-6">
<div className="form-group span6">
<label htmlFor="field4"> Date dépense </label>
<input type="date" ref="factUpd" defaultValue={depInfo.dateFacturation == "Invalid date" ? null : depInfo.dateFacturation} id={`fact-${depInfo._id}`} className="form-control fieldUpdForm" defaultValue={this.depenseDateFtn(depInfo)}/>
</div>
<div className="form-group">
<label htmlFor="select12"> Mode règlement </label>
<select className="form-control fieldUpdForm" id={`select12-${depInfo._id}`} name="select12">
<option id="toHide" value="disabled"> Choisir </option>
<option>CHE</option>
<option>ESP</option>
<option>VIR</option>
<option>CB</option>
</select>
</div>
<div className="form-group">
<label htmlFor="field6"> N° Pièce </label>
<input type="text" className="form-control fieldUpdForm" ref="pieceUpd" defaultValue={depInfo.numPiece} id={`piece-${depInfo._id}`} />
</div>
</div>
<a className="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href={`#${depInfo.codeMI+depInfo._id}`} aria-expanded="false" aria-controls={depInfo.codeMI+depInfo._id}>
<button className="pull-right btn btn-sm btn-info" id={`btnAjtDep-${depInfo._id}`} onClick={this.updateDepense.bind(this, depInfo._id)}> Valider </button>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
);
}
}
}
)}
</div>
</div>
</div>
Here is how I make it apper:
showCatDeps(singlecat, catName) {
const {DepSelected, EltSelected, deps, cats} = this.props;
cats.map(category =>{
if(category._id == singlecat){
EltSelected.set(‘ELT_SELECTED’, singlecat);
$(’#bodyCharge’).hide();
$(’#catForm’).hide();
$(’#deps’).text(catName);
$(’#depenseForm’).show();
}
});
}
The showCatDeps function is on another block like that:
Dépenses/
{cats.map(catInfo => (
{catInfo.designation}
{this.sommeDepensesCat(catInfo._id)}
{this.sommeDepensesCat(catInfo._id) == 0 ? : }
))}
Thank you for your help.