After a better understanding of the code after some research I am now asking a further question.
I have a dynamically generated form, the code is shown below:
function prepareBlocksHtml_()
{
$class = new Graffitiwall();
$data = $class->getBlocks();
/* Get the current orderID */
$orderid = get_last_order_id();
echo "The Latest Order ID is ";
echo $orderid;
$html = '<table width="100%" border="0">
<thead>
<tr>
<th>Block</th>
<th>OrderID</th>
<th>Status</th>
<th>Image</th>
<th>Destination</th>
<th>Expiry</th>
<th>Options</th>
</tr>
</thead>';
$count = 1;
if(count($data) == 0)
{
return "<div class='alert alert-warning' >Your blocks are not active yet, or you have not purchased any blocks yet.</div>";
}
foreach($data as $block)
{
if($block->status == 0)
{
$block->status = "Pending Approval";
}
else
{
$block->status = "Active";
}
$fields = array();
$fiedls['orderid'] = $block->orderid;
$fields['destination'] = $block->destination;
$fields['tagline'] = $block->tagline;
$fields['image'] = $block->image;
$fields['id'] = $block->id;
$fields = json_encode($fields);
$settings = $block->permissions;
$html .= '<tr id=block_"'.$block->id.'">';
/* add order ID PC 14-8-2018 */
$html .= '<td>'.$count.'</td>';
$html .= '<td>'.$block->orderid.'</td>';
$html .= '<td>'.$block->status.'</td>';
$html .= '<td><img style="max-width: 61px" class="img-responsive " src="'.$block->image.'" </td>';
$html .= '<td>'.$block->destination.'</td>';
$html .= '<td>'.$block->expiry.'</td>';
$html .= '<td><button class="edit" onclick="showModal(\''.$block->userid.'\',\''.base64_encode($settings).'\',\''.base64_encode($fields).'\')">Edit</button></td>';
$html .= '</tr>';
$count ++;
}
$html .='</table>';
return $html;
}
The code grabs data from a table and shows a list of orders and the data associate with each one. Then the code calls a ShowModal function that sends the user and data as well for each row, with an EDIT button highlighted here:
$html .= '<td><button class="edit" onclick="showModal(\''.$block->userid.'\',\''.base64_encode($settings).'\',\''.base64_encode($fields).'\')">Edit</button></td>';
This calls a function in my main.js file called showModal as shown here
function showModal(user,settings,data)
{
jQuery("#uploadBox, #selectBox, #labelurl, #url").hide();
jQuery("#editListing").modal();
settings = JSON.parse(atob(settings));
data = JSON.parse(atob(data));
if(typeof(settings.custom_logo) !== 'undefined' && settings.custom_logo === true)
{
jQuery("#uploadBox").show();
}
if(typeof(settings.badge) !== 'undefined' && settings.badge === true)
{
jQuery("#selectBox").show();
}
if(typeof(settings.link) !== 'undefined' && settings.link === true)
{
jQuery("#labelurl, #url").show();
}
// this is where data is passed to the showModal
// add in orderid mapping to ordid
jQuery("#ordid").val(data.orderid);
jQuery("#url").val(data.destination);
jQuery("#tooltip").val(data.tagline);
jQuery("#rid").val(data.id);
jQuery("#blockImage").attr('src',data.image);
jQuery('#editListing').modal('show');
}
Then this calls the code for showing the form:
<div id="editListing" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Block</h4>
</div>
<div class="modal-body">
<form id="editingForm" enctype="multipart/form-data">
<!-- Added label for Order ID -->
<label id="labelorderid" class="" style="display: none">Order ID</label>
<input id="ordid" name="ordid" style="display: none;" class="form-control" placeholder="Order ID" />
<label id="labelurl" class="" style="display: none">Destination Url with http://</label>
<input id="url" name="url" style="display: none;" class="form-control" placeholder="Destination URL with http://" />
<label class="">Strapline</label>
<input id="tooltip" name="tooltip" class="form-control" placeholder="Strapline" />
<label class="">Images</label>
<div id="uploadBox" class="row" style="display: none;">
<div class="col-lg-2">
<img id="blockImage" src="" class="img-responsive zoom" />
</div>
<div class="col-lg-10">
<input id="imageFile" name="imageFile" type="file" class="">
</div>
</div>
<!-- Changed the value of selection - starting at 0 instead of 1 -->
<div id="selectBox" class="row" style="display: none">
<p>Stickers are currently free to change</p>
<select id="stickers">
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/001.jpg' value='0'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/002.jpg' value='1'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/003.jpg' value='2'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/004.jpg' value='3'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/005.jpg' value='4'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/006.jpg' value='5'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/007.jpg' value='6'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/008.jpg' value='7'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/009.jpg' value='8'>
<option data-img-src='/wp-content/plugins/graff/public/images/stickers/010.jpg' value='9'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/011.jpg' value='10'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/012.jpg' value='11'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/013.jpg' value='12'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/014.jpg' value='13'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/015.jpg' value='14'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/016.jpg' value='15'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/017.jpg' value='16'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/018.jpg' value='17'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/019.jpg' value='18'>
<option data-img-src=../wp-content/plugins/graff/public/images/stickers/020.jpg' value='19'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/021.jpg' value='20'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/022.jpg' value='21'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/023.jpg' value='22'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/024.jpg' value='23'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/025.jpg' value='24'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/026.jpg' value='25'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/027.jpg' value='26'>
<option data-img-src='../wp-content/plugins/graff/public/images/stickers/028.jpg' value='27'>
</select>
</div>
<input id="rid" name="rid" type="hidden">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveBlockData()">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I noticed how the ShowModal function is passing parameters to the form generation code so I included the OrderID.
However the code I have added to the form to display the orderid is not working. I just copied and pasted from one of the others and modified it. It does not display the label of the input box.
How can I display the value of the OrderID correctly? If I can can get that working I can pass it to the function that updates the table.
