I am working on a recapitulative headband which is generated in php(phtml view file) like following :
echo "<div>
Nom : " . $this->currentP->getName() . "</br>
" . "Version : " . $this->currentP->getVersion() . "</br>
" . "Date de début : " . $this->currentP->getCreation_date() . "</br>
...
</div>";
I want to have a little button (with an image) next to each field which highlight the current value of each field and allow user to directly change it witout submits etc... a kind of dynamic edition on a recapitulative dashboard. This will give the possibility of edit the objet which is presented without making pop a window or changing the current page.
I didn't found anything on the web, so I think this will be possible thanks to Javascript which I don't know a lot.
First of all, I don't know if I have to declare a link or a button to call the update function. Then, what happen next ?
Thanks for reading and your answer !
1) you add buttons for each field (or better, direct clicking on field): <div class='editableField'><span>Some text to edit</span></div>
2) On field click, hide text and applie input field
$('.editableField').click(function(){
$(this).append('<input type="text" value="'+$('span', this).text()+'" class="editableInput"/>');
$('span', this).remove(); // remove this span temporary
});
3) When .editableInput
focus, use ajax call to save field values:
$(document).on('focusOut', '.editableInput', function(){
$.ajax({
url: 'example.com/saveFieldValues.php',
type: 'post',
data: {fieldValue: $(this).val()},
success: function(){
$(this).parent().append('<span>'+$(this).val()+'</span>'); // return back old span element
$(this).remove(); // remove unnecessary input field
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.