Laravel BadMethodCallException: Method [signdoc] does not exist - ajax

Question

Sorry for the long post. I am new to Laravel. I am trying to add an online hand signature functionality to a controller. I have chosen to use the javascript library https://github.com/szimek/signature_pad. I want to use an ajax call to the controller to save the signature image through php but i get a http 500 error whenever I try make the ajax call. Any help would be greatly appreciated as I'm all out of ideas.
In my laravel log
[2018-12-27 22:18:12] local.ERROR: BadMethodCallException: Method [signdoc] does not exist. in D:\...\vendor\laravel\framework\src\Illuminate\Routing\Controller.php:82
On the view, I am able populate a signature pad with the button functionalities. This is the javascript from the view where the ajax called is made. I followed this guide https://github.com/szimek/signature_pad/issues/167
<script type="text/javascript">
console.log("test");
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: '#c6c6c6',
penColor: 'rgb(0, 0, 0)'
});
var signButton = document.getElementById('sign');
var cancelButton = document.getElementById('clear');
var undoButton = document.getElementById('undo');
signButton.addEventListener('click', function (event) {
event.preventDefault();
if(!signaturePad.isEmpty()){
//TODO
//save picture
var data = signaturePad.toDataURL('image/png');
var imagen = data.replace(/^data:image\/(png|jpg);base64,/, "");
var fdata = new FormData();
fdata.append('imgData', imagen);
console.log(data);
console.log(window.document.location);
var url =
jQuery.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type:"POST",
dataType: "json", //datatype expected to be returned
url:"/transaction/modify/signdoc",
data: fdata,
sucess: function (data) {
if(data && data.status == "success"){
bootbox.alert("signed document!!" + data.info);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.responseText);
console.log(textStatus);
console.log(errorThrown);
}
}).done(function(msg) {
// Image saved successfuly.
alert('success');
}).fail(function (data) {
alert('failed');
});
}
});
cancelButton.addEventListener('click', function (event) {
signaturePad.clear();
});
undoButton.addEventListener('click', function (event) {
var data = signaturePad.toData();
if (data) {
data.pop(); // remove the last dot or line
signaturePad.fromData(data);
}
});
</script>
In my route
Route::get('report/transactionsreporting','TransactionsController#reportindex');
Route::get('report/AverageNightlyRate','TransactionsController#reportindex');
Route::get('report/transactionsProportionRate','TransactionsController#reportproportionrate');
Route::get('report/transactionsAverageRental','TransactionsController#reportaveragerental');
Route::get('report/transactionsGroupSize','TransactionsController#reportgroupsize');
Route::get('report/transactionsInquiryCheckInDate','TransactionsController#reportinquirycheckindate');
Route::get('report/transactionsClosed','TransactionsController#reporttranclosed');
Route::get('report/transactionsRate','TransactionsController#reportindex');
Route::get('report/inquiryCheckInDate','InquirysController#reportinquirycheckindate');
Route::post('transaction/modify/signdoc', 'TransactionsController#signdoc');
//this is the route to the function in controller
Route::get('transaction/getbc/{transactionID}','TransactionsController#getBC');
Route::get('transaction/showAll', 'TransactionsController#show');
Route::post('transaction/delete', 'TransactionsController#delete');
Route::get('transaction/modify/{id}', 'TransactionsController#modify');
Route::post('transaction/modify/store', 'TransactionsController#update');
Route::post('transaction/modify/addcashflow', 'TransactionsController#addcashflow');
Route::post('transaction/modify/modifycashflow', 'TransactionsController#modifycashflow');
Route::post('transaction/modify/deletecashflow', 'TransactionsController#deletecashflow');
Route::post('transaction/modify/deletedoc', 'TransactionsController#deletedoc');
Route::get('transaction/confirm','TransactionsController#confirmInquiry');
Route::post('transaction/add','TransactionsController#add');
Route::get('/transaction/download/{id}', 'TransactionsController#getDownload');
In my transaction controller
class TransactionsController extends Controller
{
public function signdoc(Request $request){
//TODO
// save image
echo "signdoc";
log::info("sign doc controller asdfsadfsafsadfsad");
return response()->json(['status'=>'success','info'=>' entered sign doc function!!'])
->header('Content-Type','json');
}
}
in the terminal I check the php artisan route:list and the routes seems correct
| web |
| | POST | transaction/add | | App\Http\Controllers\TransactionsController#add
| web,auth |
| | GET|HEAD | transaction/confirm | | App\Http\Controllers\TransactionsController#confirmInquiry
| web,auth |
| | POST | transaction/delete | | App\Http\Controllers\TransactionsController#delete
| web,auth |
| | GET|HEAD | transaction/download/{id} | | App\Http\Controllers\TransactionsController#getDownload
| web,auth |
| | GET|HEAD | transaction/getbc/{transactionID} | | App\Http\Controllers\TransactionsController#getBC
| web,auth |
| | POST | transaction/modify/addcashflow | | App\Http\Controllers\TransactionsController#addcashflow
| web,auth |
| | POST | transaction/modify/deletecashflow | | App\Http\Controllers\TransactionsController#deletecashflow
| web,auth |
| | POST | transaction/modify/deletedoc | | App\Http\Controllers\TransactionsController#deletedoc
| web,auth |
| | POST | transaction/modify/modifycashflow | | App\Http\Controllers\TransactionsController#modifycashflow
| web,auth |
| | POST | transaction/modify/signdoc | | App\Http\Controllers\TransactionsController#signdoc
| web,auth |
| | POST | transaction/modify/store | | App\Http\Controllers\TransactionsController#update
| web,auth |
| | GET|HEAD | transaction/modify/{id} | | App\Http\Controllers\TransactionsController#modify
| web,auth |
| | GET|HEAD | transaction/showAll | | App\Http\Controllers\TransactionsController#show
| web,auth |
| | GET|HEAD | transactionDelete/showAll | | App\Http\Controllers\TransactionsDeleteController#show
| web,auth |
| | POST | updateOwner | | App\Http\Controllers\HouseOwnersController#updateOwner
| web,auth |
| | GET|HEAD | welcome | | Closure
| web |

Answer 1

Please use name in the route ... ->name('transaction.modify.sincdoc');
Route::post('transaction/modify/signdoc', 'TransactionsController#signdoc')->name('transaction.modify.sincdoc');
And the blade where you are writing the url use route clause
url:"{{route('transaction.modify.syncdoc')}}",
Please try this and let me know how it works :)