I currently have the following files :
*vehicule_parc.php :*
<script language=javascript src="../js/vehicule_parc.js"></script>
<h3 class="headInfoBox" id="cch">Fuel Consumption >></h3>
<hr />
<div id="cc">
<table cellpadding="0" cellspacing="0" border="0" class="display boxtable" id="consoTable">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Quantity</th>
<th>Cost</th>
<th>Card</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeA">
<td>21/03/2011</td>
<td>10:00</td>
<td>30</td>
<td>40</td>
<td>02248</td>
</tr>
...
</div><!-- cc -->
<button id="addcc">Add</button>
<?php include 'form_conso_carb.html'; ?>
*form_conso_carb.html :*
<div id="form_conso_carb" title="New Consumption">
<form>
<label for="date">Date</label> <input type="text" name="date" value="" />
<label for="time">Time</label> <input type="text" name="time" value="" />
<label for="quantity">Quantity</label> <input type="text" name="quantity" value="" />
<label for="cost">Cost</label> <input type="text" name="cost" value="" />
<label for="card">Card</label> <input type="text" name="card" value="" />
</form>
</div>
*vehicule_parc.js :*
//some code before
J( "#form_conso_carb" ).dialog({
autoOpen : false,
height : 'auto',
width : 300,
modal : true,
position : 'middle',
Cancel : function() {
J(this).dialog( "close" );
},
buttons : {
"Send" : function() {
}
}
});
J( "#addcc" )
.button()
.click(function() {
J( "#form_conso_carb" ).dialog( "open" );
});
//some code after
My objective is to extract and reuse the code in vehicule_parc.js into a standalone file. However, the code must be aware of the table id - in this case id="consoTable" - in order to perform AJAX on the table.
And ideally, I would like to include form_conso_carb.html in that same file as well.
The main goal here is to easily implement a modal form for CRUD operations on the consoTable.
I hope my explanation is clear.