I am trying to create a custom button(with a drop down list) in summer-note v0.8.1.
I was previously using an older version which worked well, however in the new version I cannot figure out how to create a dropdownlist button.
Please help me out in adding attributes to the custom button.
Did you see https://github.com/summernote/summernote/issues/1611?
I just implemented (using Angular) a dropdown with 2 buttons with v0.8.1, but I have to write custom HTML for those 2 buttons that are inside the dropdown:
$scope.summernoteOptions = {
buttons: {
dropdownExample: function dropdownExample(context) {
var pdfButton = ui.buttonGroup([
ui.button({
className: "dropdown-toggle",
contents:
'<span class="fa fa-file-pdf-o"></span> <span class="caret"></span>',
tooltip: "Your tooltip",
data: {
toggle: "dropdown",
},
}),
ui.dropdown({
className: "drop-default summernote-list",
contents:
'<div class="btn-group">' +
'<button type="button" class="btn btn-default btn-sm" title="PDF 1"><i class="fa fa-file-pdf-o"></i>PDF 1</button>' +
'<button type="button" class="btn btn-default btn-sm" title="PDF 2"><i class="fa fa-file-pdf-o"></i>PDF 2</button></div>',
callback: function ($dropdown) {
$dropdown.find(".btn").click(function () {
context.invoke("editor.insertText", "text");
});
},
}),
]);
return pdfButton.render(); // jquery object
},
},
};
Related
public function destroy(Company $company)
{
Alert::question('Delete Record?', 'Cannot Undo! Are You Sure?');
if (session('status')) {
$company->delete();
}
return back()->with('status', 'Company Deleted!');
}
At the moment the record deletes with or without the Sweet Alert confirmation. I want the record deleted only after the Sweet Alert confirmation is clicked.
Just change button type from submit to button and trigger vai javascript function
<form action="{{ route('orders.destroy', $row->id) }}" method="post" class="d-inline">#csrf#method('DELETE')<button type="button" class="btn btn-sm btn-danger confirm-delete"><i class="fas fa-times"></i></button></form>
$(document).on('click', 'button.confirm-delete', function () {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$(this).parent('form').trigger('submit')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
});
});
I was searching for an answer like you, and I came up with something works perfectly!
If the user is trying to delete something, it will show him warning alert to confirm the delete.. once he clicks on yes it will delete it and show another alert with success of deletion.
Here is how you can do it:
after installing RealRashid/Sweet-Alert and publish it you need to do this:
In your view:
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
//Sweet alert stylesheet
<link rel="stylesheet" href="sweetalert2.min.css">
</head>
<body>
//refer to rashid's docs
#include('sweetalert::alert')
//The delete button
<a class="btn btn-primary mb-1" href="{{ Route('movies.edit', $movie) }}">
<i class="bi bi-pencil"></i>
</a>
<form action="{{ Route('movies.destroy', $movie) }}" method="post" class="ms-2 mb-1">
#csrf
#method('DELETE')
//The 'confirm' class is important to use in the JavaScript code
<button class="btn btn-danger confirm" type="submit">
<i class="bi bi-trash"></i>
</button>
</form>
//Add Sweetalert script lib
<script src="sweetalert2.all.min.js"></script>
<script>
//the confirm class that is being used in the delete button
$('.confirm').click(function(event) {
//This will choose the closest form to the button
var form = $(this).closest("form");
//don't let the form submit yet
event.preventDefault();
//configure sweetalert alert as you wish
Swal.fire({
title: 'هل أنت متأكد؟',
text: "لا يمكنك التراجع عن حذف الفلم",
cancelButtonText: "إلغاء",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'حذف'
}).then((result) => {
//in case of deletion confirm then make the form submit
if (result.isConfirmed) {
form.submit();
}
})
});
</script>
</body>
</html>
after doing the above code in your view, head to your controller and do this:
//Add use statement for rashid's alert
use RealRashid\SweetAlert\Facades\Alert;
//in your destroy function you can do this
public function destroy(Movie $movie)
{
$movie->genres()->detach();
$movie->delete();
return redirect()->route('movies.index')->with('success', 'تم حذف الفلم بنجاح!');
}
//with success will trigger rashid's alert to pop up and you customize the message in 'with' statement!
That's it! you don't need to do anything else or add Alert::success in the controller.. withSuccess works just fine.
ajax
$(document).ready(function(){
tabel_sales = $('#tabel_sales').DataTable({
'bLengthChange': false,
scrollXInner: true,
dom : 'frtp',
processing : true,
serverside : true,
ajax : {
'url' : '{{ url("data/data_sales") }}',
'data' : function(data){
month = $('#month').val();
console.log(data);
data.searchByMonth = month;
}
}
})
$('#month').change(function(e){
tabel_sales.draw();
})
})
controller
$testing = $request->get('searchByMonth');
$get_po_apar = DB::table('tabel_header_po')
->where([
['kode_mitra', Auth::user()->kode_mitra],
['no_po', 'LIKE', '%TRX%'],
['created_by', $gd->kode_user]
])
->whereMonth('created_at',$testing)
->get();
if (count($get_po_apar) > 0) {
$po = '<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-envelope"></i> ' . count($get_po_apar) . ' Po Apar</button>';
$fetch[] = $po;
} else {
$po = '<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-envelope"></i> 0 Po Apar</button>';
$fetch[] = $po;
}
i have problem, I want to display data based on the month dropdown I chose, automatically the data that appears will change based on the dropdown
please Help me!
You can try using:
tabel_sales.columns("index column" or "column name").search("value").draw();
This link: https://datatables.net/reference/api/column().search()
May I help you!
I have a table data , this table have function delete button .
this button is successfully delete but i need to add alert on-click confirmation to delete like this :
<a href="delete.php?id=<?=$row['id']; ?>"
onclick="return confirm('Anda yakin mau menghapus item ini ?')">[Hapus]</a>
but i using datatales serverside i dont know where i put this onclick
its my function delete
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->editColumn('edit', function ($pns) {
return '<i class="glyphicon glyphicon-edit"></i>';
})
->editColumn('hapus', function ($pns) {
// THIS START HERE FOR DELETE FUNCTION
$c = csrf_field();
$m = method_field('DELETE');
return "<form action='/delete/$pns->id' method='POST'>
$c
$m
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
</form>";
})
->rawColumns(['Nama' => 'Nama','hapus' => 'hapus','action' => 'action','edit'=>'edit'])
->make(true);
}
where i can put this onclick and this message ?
you can use it on your delete form's button like
<button style='margin-left:10px; width: 30px;' type='submit'
class='btn btn-xs btn-danger delete' onclick='return confirm("Anda yakin mau
menghapus item ini ?")'>
<i class='glyphicon glyphicon-remove-circle'></i>
</button>
or add a class to your form and use confirmation before submitting the form
<form action='/delete/$pns->id' method='POST' class='delete-form'>
now add this script in your view file
<script>
$('.delete-form').submit(function(event){
if(!confirm('Anda yakin mau menghapus item ini ?')){
event.preventDefault();
}
});
</script>
i'm just starting to learn ajax laravel im just following a tutorial then it not working for me. thanks
my ajax looks like this:
$(document).ready(function(){
$('#courseTable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{{ route('courses.index') }}}",
},
then in routes:
Route::resource('courses', 'CourseController');
then for my coursecontroller:
public function index()
{
// $courses = Course::orderBy('description','asc')->paginate(8);
if (request()->ajax()) {
return datatables()->of(Course::latest()->get())
->addColumn('action', function($data){
$button = '<button type="button" name="edit" id="'.$data->courseID.'"
class="edit btn btn-warning btn-sm">Edit</button>';
$button .= ' ';
$button .= '<button type="button" name="delete" id="'.$data->courseID.'"
class="delete btn btn-warning btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('registrar.courses.index');
// ->with('courses', $courses)
}
this error shows up like this:
app.js:16034 GET http://odrs.test/%7B%7B%7B%20route('courses.index')%20%7D%7D%7D?draw=1&colum 404 (Not Found)
it's impossible to write a blade template in a separate javascript file.
you have probably 2 ways to do it:
join your eventListener in your blade view as a child.
transfer your JS file to your views file, change its extension to blade.php and include it in the view between script tags:
<script>
#include("my-view-js")
</script>
A have a parent view OpenOrderListView that creates instances of OpenOrderViews that have events on them. The result I'm trying to gain is when the markCompleted button of an OpenOrderView is clicked a function be called to tell the model to set that attribute.
The functionality is working but it is being called on all OpenOrderViews inside the parent (OpenOrderListView) instead of just the view in which the click event was handled. How can I make this event only trigger on the view that was acted upon?
Code is below
window.OpenOrderListView = Backbone.View.extend({
el: 'table.openOrders tbody',
initialize: function() {
_.bindAll(this,'render');
this.render();
},
render : function() {
var $openOrders
var models = this.collection.open();
for (var i = models.length - 1; i >= 0; i--) {
console.log('model', models[i]);
console.log("this.template", this.template);
new OpenOrderView({'model': models[i], 'el': this.el});
};
}
});
window.OpenOrderView = Backbone.View.extend({
initialize: function() {
console.log('this', this);
_.bindAll(this,'render',
'markCompleted',
'markInProgress');
this.render();
},
events : {
"click .markCompleted": "markCompleted",
"click .markInProgress": "markInProgress",
},
markCompleted: function(){
console.log(this);
this.model.markCompleted();
},
markInProgress: function(){
console.log("markInProgress",this);
this.model.markInProgress();
console.log('markInProgress Complete');
},
template : 'template-openOrderView',
render : function() {
console.log("View Rendered");
$(this.el).append(tmpl(this.template, this.model.toJSON()));
}
window.Order = Backbone.Model.extend({
url: function(){
return "/api/order/id/"+this.get("id");
},
isCompleted: function(){
return this.get('status') == "completed";
},
isInProgress: function(){
return this.get('status') == "inProgress";
},
isOpen: function(){
return this.get('status') == "open";
},
markCompleted: function(){
this.set({'status':"completed"});
console.log('markCompleted');
return this.save();
},
markInProgress: function(){
this.set({'status':"inProgress"});
console.log('markInProgress');
return this.save();
},
markOpen: function(){
this.set({'status':"open"});
console.log('markOpen');
return this.save();
}
});
})
OrderView Template
<tr class="order">
<td class="preview hide_mobile">
<img src="{%=o.thumbnail_url%}">
</td>
<td class="name">
{%=o.name%}
</td>
<td class="description"><span>{%=o.description%}</span></td>
<td class="hide_mobile date_added"><span>{%=o.date_added%}</span></td>
<td class="hide_mobile user"><span>{%=o.username%}</span></td>
<td class="status">
<a class="btn modal-download" target="_blank" href="{%=o.url%}" title="{%=o.name%}" download="{%=o.name%}">
<i class="icon-download"></i>
<span>Download</span>
</a>
<button class="markCancel btn btn-danger" data-type="{%=o.delete_type%}" data-url="{%=o.delete_url%}">
<i class="icon-remove icon-white"></i>
<span>Cancel</span>
</button>
<button class="markInProgress btn btn-primary" data-type="" data-url="">
<i class="icon-repeat icon-white"></i>
<span>Mark In Progress</span>
</button>
<button class="markCompleted btn btn-success" data-type="" data-url="">
<i class="icon-ok icon-white"></i>
<span>Mark Completed</span>
</button>
</td>
All the SubViews are sharing the same DOM element table.openOrders tbody. This is done in the line new OpenOrderView({'model': models[i], 'el': this.el});.
So when you declare events like this:
events : {
"click .markCompleted": "markCompleted"
}
What is happening is that all DOM elements that match this table.openOrders tbody .markCompleted will be binded with this click event.
You need each SubView to have each own this.el DOM element.
In your case I think is better if your SubViews create theirs own DOM element in the air like this:
// code simplified an not tested
window.OpenOrderView = Backbone.View.extend({
tagName: 'tr',
attributes: { class: "order" },
initialize: function(){
// don't render() here
},
// ... rest of your code
render: function(){
this.$el.html(tmpl(this.template, this.model.toJSON()));
return this;
}
})
Look that now the SubView is not rendering itself, neither appending its DOM element directly to the page, it will be a job for the ParentView:
// code simplified an not tested
window.OpenOrderListView = Backbone.View.extend({
render : function() {
var $openOrders
var models = this.collection.open();
for (var i = models.length - 1; i >= 0; i--) {
var openOrderView = new OpenOrderView({'model': models[i]});
this.$el.append( openOrderView.render().el );
};
});
I think this is a very common pattern.
PD: You have to modify your template removing the tr open/close.