I need some help on the backpack, the buttons.
I have a list of products, and in the edit and delete buttons I have added two more to the nutrient of a product and its price. Using the backpack I do not know how to load the id of the product in question to put this additional information. How can I do it?
Image
Inside the button view you created you should be able to use $entry. Check out https://laravel-backpack.readme.io/docs/crud-buttons for more info.
Even though this event happened more than 1 month, I'll try to share some information to help others.
1. First of all you need to create a new blade file
resources\views\vendor\backpack\buttons\crud\buttons.
2. Inside of your file
<i class='fa fa-list'></i>Listar Nutrientes
The $entry->getKey() is going to provide the "id" to you.
3. Connecting the "Button" to your CrudCrontroller
Inside your ProductCrudController you need to add a new entry.
$this->crud->addButtonFromView('line', 'extra_button', 'extra_button', 'beginning');
the extra_button "just a example" needs to have the name of your blade file in the third parameter "if i'm not wrong".
After this you should get your new button for each line listed in the table.
Just a tip: If you're going to add "a lot of buttons" try to use a
drop down button.
<div class="btn-group">
<button type="submit" class="btn btn-primary btn btn-xs btn-default">
<span class="fa fa-list" role="presentation" aria-hidden="true" style="color: #f1f1f1"></span>
<span data-value="save_and_back" style="color: #fff">Opções</span>
</button>
<button type="button" class="btn btn-primary dropdown-toggle btn-xs btn-default" data-toggle="dropdown" aria-haspopup="true" aira-expanded="false" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">▼</span>
</button><div class="dropdown-backdrop"></div>
<ul class="dropdown-menu" style="font-size: 12px;">
<li><i class='fa fa-plus'></i>Add new nutriente</li>
<li><i class='fa fa-list'></i>Listar nutrientes</li>
<li><i class='fa fa-arrow-right'></i>Second Action</li>
<li><i class='fa fa-times'></i>Cancel</li>
</ul>
</div>
Related
I have an asp.net core MVC project I am creating custom scaffolding template files
I am following this answer to add custom scaffolding template pages
on Details page I want o add link to Listing, Edit and Delete page as below
#using System.Linq
##model #Model.ViewDataTypeName
#: <div class="card-body py-2">
#: <a asp-action="Delete" asp-route-id="##Model.pkName" class="float-right btn-floating btn-sm btn-danger m-0" title="Delete #Model.ViewDataTypeShortName Record"><i class="fa fa-trash"></i></a>
#: <a asp-action="Edit" asp-route-id="##Model.pkName" class="float-right btn-floating btn-sm btn-warning m-0 mr-2" title="Edit #Model.ViewDataTypeShortName Record"><i class="fa fa-edit"></i></a>
#: <a asp-action="Index" class="float-right btn-floating btn-sm btn-info m-0 mr-2" title="Back to #Model.ViewDataTypeShortName listing page"><i class="fa fa-arrow-left"></i></a>
#: <h4 class="mb-2 mb-sm-0 pt-1">#Model.ViewDataTypeShortName Details</h4>
#: </div>
Notice asp-route-id="##Model.pkName" in above example, Actualloy here I need to put primaryKey field name dynamically, ##Model.pkName is not a valid property but I just wanted to show something here.
PFB my code. I have designed a drop down list using bootstrap in asp.net mvc. The contents of the list are static and hard coded. When selection is changed in drop down, the latest item is not updated. I am attaching my code as well as the screenshot of the issue. In drop down list, even if I select Assigned, the status list is not getting updated.
the status field is not changing to assigned or in progress<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
You'll have to use Javascript to update the model if you use a bootstrap dropdown. Just keep a hidden for on the page, then attach a handler to the dropdown's change.
One thing to note is that Bootstrap dropdowns don't fire a change event. You'll have to attach handlers to the individual items. Something like this:
$('.dropdown-menu a').click(function(e) {
// set the hidden field to the new value
var newValue = $(this).text();
$('#foo').val(newValue);
});
#Html.HiddenFor(m => m.myProperty, new {id = "foo"})
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
Of course, if you don't really need a Bootstrap dropdown, and perhaps only need it to look like it, you could do it very easily by just using a regular HTML dropdown and styling it like a bootstrap dropdown:
#Html.DropDownListFor(m => m.myProperty, new {#class = "form-control"})
form-control is a bootstrap css class that makes your input controls more Bootstrap-like. It's not exactly the same though (although I like it better), so the choice will be up to you.
i am using codeigniter.i am trying to convert this bootstrap code into a php variable for HTML table class
<div class="btn-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-default pull-right" role="menu">
<li>
<a href="#" onclick="showAjaxModal('<?php echo base_url();?>index.php?modal/popup/modal_take_payment/<?php echo $row['invoice_id'];?>');">
<i class="entypo-bookmarks"></i>
Take Payment </a>
</li>
<li class="divider"></li>
<!-- VIEWING LINK -->
<li>
<a href="#" onclick="showAjaxModal('<?php echo base_url();?>index.php?modal/popup/modal_view_invoice/<?php echo $row['invoice_id'];?>');">
<i class="entypo-credit-card"></i>
View Invoice </a>
</li>
<li class="divider"></li>
<!-- EDITING LINK -->
<li>
<a href="#" onclick="showAjaxModal('<?php echo base_url();?>index.php?modal/popup/modal_edit_invoice/<?php echo $row['invoice_id'];?>');">
<i class="entypo-pencil"></i>
Edit </a>
</li>
<li class="divider"></li>
<!-- DELETION LINK -->
<li>
<a href="#" onclick="confirm_modal('<?php echo base_url();?>index.php?admin/invoice/delete/<?php echo $row['invoice_id'];?>');">
<i class="entypo-trash"></i>
Delete </a>
</li>
</ul>
</div>
result of above HTML code
now i want to convert this complete html code into a php syntax so i can use it in HTML table class and code for this is as below-
[$edit_url =base_url().'index.php?modal/popup/modal_edit_invoice/'. $row\['invoice_id'\];
$url = base_url().'index.php?modal/popup/modal_take_payment/'. $row\['invoice_id'\];
$url_delete= base_url().'index.php?admin/invoice/delete/'. $row\['invoice_id'\];
$url_invoice= base_url().'index.php?modal/popup/modal_view_invoice/'. $row\['invoice_id'\];
$onclick_delete = array('onclick'=>"return confirm_modal('{$url_delete}')" , 'class'=>"btn-default btn-sm dropdown-toggle");
$onclick_edit = array('onclick'=>"return showAjaxModal('{$edit_url}')" , 'class'=>"btn btn-default btn-sm dropdown-toggle");
$onclick_take = array('onclick'=>"return showAjaxModal('{$url}')",'class'=>"btn btn-default btn-sm dropdown-toggle");
$onclick_invoice = array('onclick'=>"return showAjaxModal('{$url_invoice}')",'class'=>"btn btn-default btn-sm dropdown-toggle");
$links = anchor('#', 'Take Payment',$onclick_take);
$links .= anchor('#', 'edit',$onclick_edit);
$links .= anchor('#', 'Invoice',$onclick_invoice);
$links .= anchor('#', 'delete',$onclick_delete);
but this is not giving me the result as above html code. so can you please suggest me the changes in the code.
problem_II
and when i am using above code bootstrap model properties also not working as expected.the problem is Body is not auto scrolling to top when model is popup and for that reason model is not coming properly on my screen. although i didn't made any changes in body.modal-open.
please help me out. thanks in advance
I am working on a django project, that is using bootstrap4 and I'm with a little problem with dropdown toggler.
The toggler only toggles the dropdown-menu after the second link!
What I've done wrong?
This is my dropdown HTML code:
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Toggler
</a>
<div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
I had the same problem then resolved. Often I due to a double import of bootstrap js libraries.
Hope will help you.
you need to use the toggle like that and assign the data-target to the drop down menu with it's id
using
data-target="#navbarDropdown"
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
and then assign that id to the menu
<li class="nav-item dropdown show">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarDropdown" class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
I came across the same issue recently, i solved this issue by adding $('.dropdown-toggle').dropdown() after loading the drop-down. Hope this may help without changing from the data-toggle="dropdown" to data-toggle="collapse".
Try to put bootstrap js file before bootstrap css
Ex:
Link Bootstrap.min.js file first.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Then link css file
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
I got the same issue and after changing the positions of the js and css, dropdown works well. Hope it helped you.
I came across the same issue recently, i solved it by writing custom script:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
I had the same issue, it occurred because i imported bootstrap library twice. After removing one of them it worked well.
Hope it help you.
Agree with Iwan B. In Rails in javascripts I left only bootstrap.bundle.js. In Gemfile add gem 'popper_js', '~> 1.14.5', respectively in application.js we should add
//= require popper
<ul id="Group_00000000-0000-0000-0000-000000000001" class="xxxxxxxxx">
<li class="buttons">
<button class="button edit">Edit</button>
<button class="button addToOption">Add to option</button>
<button class="button removeFromOption" >Remove from option</button>
<button class="button addToGroup">Add to group</button>
<button class="button removeFromGroup">Remove from group</button>
</li>
<li class="content">
<div class="text">
<span id="Title_Of_The_Item" class="title"> QSE244</span>
<p class="description">A description about this item</p>
</div>
</li>
</ul>
<ul id="Group_00000000-0000-0000-0000-000000000002" class="xxxxxxxxx">
<li class="buttons">
<button class="button edit">Edit</button>
<button class="button addToOption">Add to option</button>
<button class="button removeFromOption" >Remove from option</button>
<button class="button addToGroup">Add to group</button>
<button class="button removeFromGroup">Remove from group</button>
</li>
<li class="content">
<div class="text">
<span id="Title_Of_The_Item" class="title"> QSE236 </span>
<p class="description">A description about this item</p>
</div>
</li>
</ul>
In the structure above I want to be able to click on the any button listed based on the titles like the QSE244 or QSE236 - ie clicking the corrosponding buttons. There is no point in using the id's Group_00000000-0000-0000-0000-000000000002 as they ll be replaced with dynamic GUIDs.
Since the only thing that differentiates these two blocks, and, presumably, many more like them, is the text of the <span class="title"> element, that's what you need to key off of. I'd try a locator something like this:
xpath=//ul[li[#class='content']/div/span[#class='title' and .='the_title_value']]/li[#class='buttons']/button[contains(#class, 'the_button_type']
which means "the button with class 'the_button_type' that is contained within the list with class 'buttons' which is contained within the unordered list that contains a list with class 'content' that contains a div that contains a span with class 'title' and the text 'the_title_value'. So you use the title value to locate the correct ul element, and then you navigate to the button from there.