Home » Jquery » javascript – Why is my Ajax cannot save data into database? Laravel with Ajax-Exceptionshub

javascript – Why is my Ajax cannot save data into database? Laravel with Ajax-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am trying to save data using ajax. The ajax is inside my javascript file and passed to my controller and route. However the issue is it cannot save the data into my database.

Here is my jquery.hotspot.js file that include ajax:

(function ($) { var defaults = { // Object to hold the hotspot data points data: [], // Element tag upon which hotspot is (to be) build tag: 'img', // Specify mode in which the plugin is to be used // `admin`: Allows to create hotspot from UI // `display`: Display hotspots from `data` object mode: 'display', // HTML5 LocalStorage variable where hotspot data points are (will be) stored LS_Variable: '__HotspotPlugin_LocalStorage', // CSS class for hotspot data points hotspotClass: 'HotspotPlugin_Hotspot', // CSS class which is added when hotspot is to hidden hiddenClass: 'HotspotPlugin_Hotspot_Hidden', // Event on which the hotspot data point will show up // allowed values: `click`, `hover`, `none` interactivity: 'hover', // Action button CSS classes used in `admin` mode save_Button_Class: 'HotspotPlugin_Save', remove_Button_Class: 'HotspotPlugin_Remove', send_Button_Class: 'HotspotPlugin_Send', // CSS class for hotspot data points that are yet to be saved unsavedHotspotClass: 'HotspotPlugin_Hotspot_Unsaved', // CSS class for overlay used in `admin` mode hotspotOverlayClass: 'HotspotPlugin_Overlay', // Enable `ajax` to read data directly from server ajax: false, ajaxOptions: { url: '' }, listenOnResize: true, // Hotspot schema schema: [ { 'property': 'Title', 'default': '' }, { 'property': 'Message', 'default': '' } ] }; // Constructor function Hotspot(element, options) { var widget = this; // Overwriting defaults with options this.config = $.extend(true, {}, defaults, options); this.element = element; // `tagElement`: element for which hotspots are being done this.tagElement = element.find(this.config.tag); // Register event listeners $.each(this.config, function (index, fn) { if (typeof fn === 'function') { widget.element.on(index + '.hotspot', function (event, err, data) { fn(err, data); }); } }); if (this.config.mode != 'admin' && this.config.listenOnResize) { $(window).on('resize', function () { $(element).find('.' + widget.config.hotspotClass).remove(); widget.init(); }); } if (this.config.tag !== 'img') { widget.init(); return; } if (this.tagElement.prop('complete')) { widget.init(); } else { this.tagElement.one('load', function (event) { widget.init(); }); } } Hotspot.prototype.init = function () { this.parseData(); // Fetch data for `display` mode with `ajax` enabled if (this.config.mode != 'admin' && this.config.ajax) { this.fetchData(); } // Nothing else to do here for `display` mode if (this.config.mode != 'admin') { return; } this.setupWorkspace(); }; Hotspot.prototype.createId = function () { var id = ""; var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (var i = 0; i < 7; i++) { id += letters.charAt(Math.floor(Math.random() * letters.length)); } return id; }; Hotspot.prototype.setupWorkspace = function () { var widget = this; // `data` array: to contain hotspot objects var data = []; var tHeight = $(widget.tagElement[0]).height(), tWidth = $(widget.tagElement[0]).width(), tOffset = widget.tagElement.offset(), pHeight = $(widget.element[0]).height(), pWidth = $(widget.element[0]).width(), pOffset = widget.element.offset(); // Create overlay for the tagElement $('<span/>', { html: '<p>Click this Panel to Store Messages</p>' }).css({ 'height': (tHeight / pHeight) * 100 + '%', 'width': (tWidth / pWidth) * 100 + '%', 'left': (tOffset.left - pOffset.left) + 'px', 'top': (tOffset.top - pOffset.top) + 'px' }).addClass(widget.config.hotspotOverlayClass).appendTo(widget.element); // Handle click on overlay mask this.element.delegate('span', 'click', function (event) { event.preventDefault(); event.stopPropagation(); // Get coordinates var offset = $(this).offset(), relativeX = (event.pageX - offset.left), relativeY = (event.pageY - offset.top); var height = $(widget.tagElement[0]).height(), width = $(widget.tagElement[0]).width(); var hotspot = { x: relativeX / width * 100, y: relativeY / height * 100 }; var schema = widget.config.schema; for (var i = 0; i < schema.length; i++) { var val = schema[i]; var fill = prompt('Please enter ' + val.property, val.default); if (fill === null) { return; } hotspot[val.property] = fill; } data.push(hotspot); // Temporarily display the spot widget.displaySpot(hotspot, true); }); // Register admin controls var button_id = this.createId(); $('<button/>', { text: "Save data" }).prop('id', ('save' + button_id)).addClass(this.config.save_Button_Class).appendTo(this.element); $('<button/>', { text: "Remove data" }).prop('id', ('remove' + button_id)).addClass(this.config.remove_Button_Class).appendTo(this.element); $(this.element).delegate('button#' + ('save' + button_id), 'click', function (event) { event.preventDefault(); event.stopPropagation(); widget.saveData(data); data = []; }); $(this.element).delegate('button#' + ('remove' + button_id), 'click', function (event) { event.preventDefault(); event.stopPropagation(); widget.removeData(); }); if (this.config.ajax) { $('<button/>', { text: "Send to server" }).prop('id', ('send' + button_id)).addClass(this.config.send_Button_Class).appendTo(this.element); $(this.element).delegate('button#' + ('send' + button_id), 'click', function (event) { event.preventDefault(); event.stopPropagation(); widget.sendData(); }); } }; Hotspot.prototype.fetchData = function () { var widget = this; // Fetch data from a server var options = { data: { HotspotPlugin_mode: "Retrieve" } }; $.ajax($.extend({}, this.config.ajaxOptions, options)) .done(function (data) { // Storing in localStorage localStorage.setItem(widget.config.LS_Variable, data); widget.parseData(); }) .fail($.noop); }; Hotspot.prototype.parseData = function () { var widget = this; var data = this.config.data, data_from_storage = localStorage.getItem(this.config.LS_Variable); if (data_from_storage && (this.config.mode === 'admin' || !this.config.data.length)) { data = JSON.parse(data_from_storage); } $.each(data, function (index, hotspot) { widget.displaySpot(hotspot); }); }; Hotspot.prototype.displaySpot = function (hotspot, unsaved) { var widget = this; var spot_html = $('<div/>'); $.each(hotspot, function (index, val) { if (typeof val === "string") { $('<div/>', { html: val }).addClass('Hotspot_' + index).appendTo(spot_html); } }); var height = $(this.tagElement[0]).height(), width = $(this.tagElement[0]).width(), offset = this.tagElement.offset(), parent_offset = this.element.offset(); var spot = $('<div/>', { html: spot_html }).css({ 'top': (hotspot.y * height / 100) + (offset.top - parent_offset.top) + 'px', 'left': (hotspot.x * width / 100) + (offset.left - parent_offset.left) + 'px' }).addClass(this.config.hotspotClass).appendTo(this.element); if (unsaved) { spot.addClass(this.config.unsavedHotspotClass); } if (this.config.interactivity === 'hover') { return; } // Overwrite CSS rule for `none` & `click` interactivity spot_html.css('display', 'block'); // Initially keep hidden if (this.config.interactivity !== 'none') { spot_html.addClass(this.config.hiddenClass); } if (this.config.interactivity === 'click') { spot.on('click', function (event) { spot_html.toggleClass(widget.config.hiddenClass); }); } else { spot_html.removeClass(this.config.hiddenClass); } }; Hotspot.prototype.saveData = function (data) { if (!data.length) { return; } // Get previous data var raw_data = localStorage.getItem(this.config.LS_Variable); var hotspots = []; if (raw_data) { hotspots = JSON.parse(raw_data); } // Append to previous data $.each(data, function (index, node) { hotspots.push(node); }); this.data=data; $.ajax({ type:"POST", url:"/store", dataType:'json', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data:{ Title:$('#Title').val(), Message: $('#Message').val(), x:$('#relativeX').val(), y: $('#relativeY').val(), }, success: function(data){ console.log(data,d); }, error: function(data) { console.log(data); }, }); localStorage.setItem(this.config.LS_Variable, JSON.stringify(hotspots)); this.element.trigger('afterSave.hotspot', [null, hotspots]); }; Hotspot.prototype.removeData = function () { if (localStorage.getItem(this.config.LS_Variable) === null) { return; } if (!confirm("Are you sure you wanna do everything?")) { return; } localStorage.removeItem(this.config.LS_Variable); this.element.trigger('afterRemove.hotspot', [null, 'Removed']); }; Hotspot.prototype.sendData = function () { if (localStorage.getItem(this.config.LS_Variable) === null || !this.config.ajax) { return; } var widget = this; var options = { data: { HotspotPlugin_data: localStorage.getItem(this.config.LS_Variable), HotspotPlugin_mode: "Store" } }; $.ajax($.extend({}, this.config.ajaxOptions, options)) .done(function () { widget.element.trigger('afterSend.hotspot', [null, 'Sent']); }) .fail(function (err) { widget.element.trigger('afterSend.hotspot', [err]); }); }; $.fn.hotspot = function (options) { new Hotspot(this, options); return this; }; }(jQuery));

Here is my route:

Route::get('hotspots','[email protected]');
Route::post('store','[email protected]')->name('store.storePin');

Here is my ImageController.php:

 public function getPin()
{
$pin= Pin::select('Title','Message','x','y');
return hotspot::of($pin)->make(true);
}
public function storePin(Request $request)
{
$validation = Validator::make($request->all(), [
'Title' => 'required',
'Message'  => 'required',
'x'=>'required',
'y'=>'required',
]);
if ($request->get('save','button_id') == "insert")
{
$pin = new Pin();
$pin->Title=$request->Title;
$pin->Message= $request->Message;
$pin->x = $request->relativeX;
$pin->y =$request->relativeY;
$pin->save();
//return Request::json($request);               
}
}

Here is my hotspot.blade.php:

<!DOCTYPE html> <html> <head> <title>Picomment Hotspot</title> <link rel="stylesheet" type="text/css" href="{{ asset ('css/bootsrap.min.css') }}"> <script type="text/javascript" src="{{ asset ('js/jquery.min.js') }}"></script> <link rel="stylesheet" type="text/css" href="{{ asset ('css/jquery.hotspot.css') }}"> <link rel="stylesheet" type="text/css" href="{{ asset ('css/style.css') }}"> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div class="container"> <div class="col-md-6" style="margin-top: 40px;"> <div id="theElement-a"> <img src="{{ asset('storage/'.$files) }}" alt="" title=""> </div> </div> </div> <script type="text/javascript" src="{{ asset ('js/jquery.hotspot.js') }}"></script> <script type="text/javascript"> $(document).ready(function() { $("#theElement-a").hotspot({ mode: "admin", // uncomment /*ajax: true, ajaxOptions: { 'url': 'links.to.server' },*/ interactivity: "click", LS_Variable: "HotspotPlugin-a", afterSave: function(err, data) { if (err) { console.log('Error occurred', err); return; } alert('Saved'); // `data` in json format can be stored // & passed in `display` mode for the image localStorage.clear(); console.log(data); }, afterRemove: function(err, message) { if (err) { console.log('Error occurred', err); return; } alert(message); window.location.reload(); }, afterSend: function(err, message) { if (err) { console.log('Error occurred', err); return; } alert(message); } }); }); </script> </body> </html>
How to&Answer:

If you are using external js then we can not acces route from external js directly.

pass this in button html

data-url=”{{route name}}”

Hope it wiil work