I have a HTML table and I get data for each cell from database.Some cells have an edit icon, so when the user clicks on it, he will see a pop up dialog. In this dialog there is a drop down menu with 3 options.And after the user selects one of them and clicks on save button, the database should get updated.
The following is part of my code in the tracking.php file.
<td>
<?php
$var=$arrayD['Structural Data Loaded'];
echo
'<a data-id="$id" class="StructuralDataLoaded">' . $var . ' <img class="img" onclick="javascript:SelectStatus();" src="images/edit.png"></a>';
?>
</td>
/* Selecting new status DIV */
<div id="SelectingStatus" title="Select Status" style="display:none;">
<h>
Select the status
</h>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select>
</div>
<script>
function SelectStatus(id) {
var SelectingStatus = $('#SelectingStatus');
SelectingStatus.dialog({
close: function(event, ui) {
},
modal: true,
title: 'Select Status',
width: 600,
height: 'auto',
overlay: {
backgroundColor: '#000000',
opacity: 0.5
},
});
}
so I want to add a save button to this diaolg, and call a function like
function PostStructuralDataLoadedData(id,data){
var request = $.ajax({
url: "InsertData.php",
type: "POST",
data: {
id : id,
data : data,
type : "StructuralDataLoladed"
},
dataType: "html"
});
request.done(function( ) {
location.reload();
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
}
and then update the database. So you can see in above function,I need 2 values. The $id to know which row of the table should get updated and the value, which is the status that user has selected. ( Before using jQuery Dialog I was using prompt(), and the above function works fine).So first before adding the Save button, I want to send the $id to SelecStatus function when the user clicks on the edit icon . So I changed my code as below.(The parts that are in ** **, are the new parts).
<td>
<?php
$var=$arrayD['Structural Data Loaded'];
echo
'<a data-id="$id" class="StructuralDataLoaded">' . $var . ' <img **id="$id"** class="img" onclick="javascript:SelectStatus(**$id**);" src="images/edit.png"></a>';
?>
</td>
and
<script>
function SelectStatus(**id**) {
var SelectingStatus = $('#SelectingStatus');
SelectingStatus.dialog({
close: function(event, ui) {
},
modal: true,
title: 'Select Status',
width: 600,
height: 'auto',
overlay: {
backgroundColor: '#000000',
opacity: 0.5
},
});
}
So when calling SelectStatus function, should I write :
onclick="javascript:SelectStatus($id);"
or
onclick="javascript:SelectStatus(thid.id);"
and how can I test to make sure that the SelectStatus function has revived the right value?
