I'm learning laravel, and now i trying to delete object without form.
i want to use js to detect when user click delete's button and return notify to controller. Then controller with delete object with id has returned from JS file.
This is blade file
#extends ('layouts.master')
#section ('head.title')
Blog
#stop
#section ('body.content')
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
</div>
</div>
<form class="form-show">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2> {{ $article->title}} </h2>
<p> {{ $article->content}} </p>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Update
<button id="delete-button" type="submit" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</form>
</div>
<script src="{{ asset('/js/jshow.js') }}"></script>
#stop
And this is controller file
class ArticlesController extends Controller
{
protected $articleModel;
public function __construct(Article $article){
$this->articleModel = $article;
}
public function index(){
$articles = $this->articleModel->getListArticles();
// $articles = Article::paginate(10);
return view('articles.index',compact('articles'));
}
public function show($id){
// $article = Article::find($id);
$article = $this->articleModel->getArticleWithID($id);
return view('articles.show',compact('article'));
}
public function delete($id){
$this->articleModel->deleteArticle($id);
return redirect()->route('articles.index');
}
}
And here is JS file
var deleteButton = document.getElementById("delete-button");
var idPost = document.getElementById("")
deleteButton.onclick = function() {
alert('Click to delete');
return false;
}
You need to use $.ajax from the jQuery JS library.
Try to understand and to do something, then come back if you any have difficulties.
Like Jerodev said, AJAX calls can be done without jQuery, but I find the jQuery method more understandable. Check here to read more about AJAX using plain JavaScript.
AJAX Request in Jquery is that for you ...
first learn how AJAX Work to request server .
use jquery to easy that for you .
remake delete function to make it more able with AJAX Request to just delete the object and response data .
public function delete(Request $req)
{
$this->articleModel->deleteArticle($id);
return response()->json(['msg' => 'some Msg help]);
}
make route for this function .
then make the ajax request to get this route and delete the object and return the msg you make .
but you must first Learn AJAX .
Related
I am still very weak in Ajax, but they told me that this is a way out of the situation that I have developed.
I have a javascript function that filters categories. There is also alternation of lists in php.blade.
When I click on "All", all blogs are displayed and the alternation is working properly. When I select the "desired category", all blogs from this category are displayed, but alternation does not work.
I was prompted that you can is to call one ajax functional on category selection and return the HTML response on that ajax call. But I don't know how to do this, can anyone help?
JavaScript
$('.category-filter_item').click(function(){
$('.category-filter_item').removeClass('active')
$(this).addClass('active')
var dataFilter = $(this).attr('data-filter');
$('.blog-list').hide()
$(dataFilter).show()
})
php.blade
#extends('layouts.app')
#section('content')
<div class="container">
<div class="category-filter" id="filter">
<div class="category-filter_item active" data-filter="*">All</div>
#foreach($categories as $category)
<div class="category-filter_item" data-filter=".category_{{$category->id}}">{{ $category->title }}</div>
#endforeach
</div>
#foreach ($blogs as $index => $blog)
<div class="blog-list">
#if ($index % 2 === 1) //Alternation
<div class="blog blog--left" >
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
#else
<div class="blog blog--right">
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
#endif
</div>
#endforeach
</div>
#endsection
Controller
public function index()
{
$blogs = Blog::all();
$categories = Category:all();
return view('blog', compact('blogs', 'categories'));
}
Need to create new route and controller function to return only the selected category blogs and that should be in json format
Once that is done need to use the ajax call to the above route in the click function defined. Capture the response and then iterate and generate the html that should be inside the blog-list in your script. then update the html inside blog-list value.
refer this link
refer this for making ajax call link
I have books retrieved from database in the Index view. Each one has a button below. When you click them a modal box should pop up with the corresponding book details (book img, name title, decsription, price etc) printed on it.
Index View:
<!-- language: lang-html -->
#model AuthorTest.Models.HomeModel
<!--razor codes where book properties are called-->
#foreach(var book in Model.Bestsales)
{
<a class="first__img" href="single-product.html"><img src="~/Uploads/img/#(book.Id + " .jpg ")"</a>
<h4>product.html">#book.Name</a></h4>
<ul class="prize d-flex">
<li>#book.Price</li>
</ul>
<!--modal-box pop-up button-->
<a data-toggle="modal" title="Quick View" data-id="#book.Id" class="modal-open" href="#productmodal"><i class="bi bi-search"></i></a>
}
I'm trying to pass a book id using ajax
<!-- language: lang-js-->
#section scripts{
<script>
$(".modal-open").click(function () {
var id = $(this).data("id");
$.ajax({
type: "POST",
url: "/Home/Details/" + id
});
});
</script>
}
into the "Details" action that retrieves related book and returns it to a view where modal box content is placed.
<!-- language: lang-cs-->
[HttpPost]
public ActionResult Details(int id)
{
HomeModel model = new HomeModel();
var book = db.Books.Where(b => b.Id == id).Include(b => b.Author).SingleOrDefault();
if (book == null)
{
HttpNotFound();
}
book.DisplayNumber++;
db.SaveChanges();
model.bookDetails = book;
return view( model);
}
This is the HomeModel class that I use to keep two models 1)list property of type Book to loop through my books in the Index view
2)property of Book type to call model-related book datas in "Details" view:
<!-- language: lang-cs-->
public class HomeModel
{
public List<Book> BestSales { get; set; }
public Book bookDetails { get; set; }
}
a view where modal box content is placed:
<-- language: lang-html-->
#model AuthorTest.Models.HomeModel
div id="quickview-wrapper">
<!-- Modal -->
<div class="modal fade" id="productmodal" tabindex="-1" role="dialog">
<div class="modal-dialog modal__container" role="document">
<div class="modal-content">
<div class="modal-header modal__header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="modal-product">
<!-- Start product images -->
<div class="product-images">
<div class="main-image images">
<img alt="big images" src="~/Uploads/img/#(Model.bookDetails.Id + ".jpg")">
</div>
</div>
<!-- end product images -->
<div class="product-info">
<h1>#Model.bookDetails.Name</h1>
<div class="rating__and__review">
</div>
<div class="price-box-3">
<div class="s-price-box">
<span class="new-price">#Model.bookDetails.Price</span>
<span class="old-price">$34.00</span>
</div>
</div>
<div class="quick-desc">
#Model.bookDetails.Description
</div>
<div class="addtocart-btn">
Add to cart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When I click modal-open button the id gets passed to the "Details" action, corresponding book is retrieved and takes me to the view. But it seems like modal box pops up before ajax runs action and therefore the data is not printed. Where do I make mistake? How to pass the book details into the modal-box correctly?
An Ajax call is asynchronous, so you must get in this mindset: when you work in a non sync way, you shall manage async calls with callbacks. jQuery offers different types of callback for the $.ajax() method, such as "success","error".... on and on. If the ajax call results in a server exception for instance, the HTTP result will be 500 and you can manage it in the "error" callback subscribing the callback with a your custom method that will be raised by jQuery. On the other way, the success callback must be subscribed by a method that accepts parameters where will be the server response (in this case, an html response). So, if the result is a success (HTTP Status code 200), you will have the HTML in that parameter, and you can use it to append in your modal (always with jQuery methods... or even in simple javascript if you like more)
Take a look to callbacks subscriptions:http://api.jquery.com/jquery.ajax/ in the "Callback Function Queues" section. You will find out that I gave you just a real basic explanation and there's a lot of more to learn!
I'm working on Asp.net Mvc news website like (yahoo, BBC ...).
I have loads of divs that contains the feed title,text and image.What I want to achieve is to make these divs that contains these 3 elements clickable no matter where I clicked (title,text or feed image)and to post the value of the feed ID to my controller method.
I've done this already like this:
In my feed table I have : FeedID-FeedText-FeedPath
View:
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
}
</div>
}
And in my controller I'm taking the "FeedID"
Controller:
[HttpPost]
public ActionResult goToFeed(int FeedID)
{
//some code here
}
I guess there should be a way to post the FeedID inside this div without making it a button.
I've checked these posts already but none of them helped me.
Form submit by click on a div element without JS
submiting form on div click with js
Thanks for any help...
You should not use a POST request to read data. The correct HTTP verb in this case would be GET. POST should mainly be used to create new entries. See Using HTTP Methods for RESTful Services.
This has not only academic reasons. If you use POST, and your users use the backwards/forwards buttons of the browser to navigate, they would see "Are you sure you want to resubmit the form?" messages.
To use GET, your CSHTML could look like this. Use CSS marker classes js-feed and js-feedId so you can later access these elements using jQuery.
#foreach (Feeds item in Model.FeedViewModel) {
<div class="col-4 js-feed">
<h3>#item.title</h3>>
<span>#item.FeedText</span>
#Html.HiddenFor(m => item.FeedID, new { #class = "js-feedId" })
</div>
}
The URL to the GET action is configured in the JS part. Extract the FeedId from the clicked div, replace the placeholder in the configured URL with this FeedId, and then redirect to this action by setting window.location.href, which will reload the page.
If you do not want to reload the entire page, use $.ajax instead.
<script type="text/javascript">
$(document).ready(function() {
var getUrl = '#Url.Action("goToFeed", "Home", new { FeedID = "To_Be_Replaced_By_JS" })';
$('.js-feed').on('click', function() {
var feedId = $('.js-feedId', $(this)).val(); // search only inside clicked element
var feedUrl = getUrl.replace('To_Be_Replaced_By_JS', feedId);
window.location.href = feedUrl;
});
});
</script>
The target controller action should be attributed with [HttpGet].
[HttpGet]
public ActionResult goToFeed(int FeedID) {
//some code here
}
Change this:
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
}
</div>
}
To this:
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="feed col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
#Html.HiddenFor(m => item.FeedID)
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
}
</div>
}
Then add this to your page:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$('.feed').click(function() {
return $(this).closest("form").submit();
});
});
</script>
Having a field is required when posting a razor form to the server so having the FieldID hidden will allow this to be sent. Having a div surrounding the area adding the onclick attribute with a submit function to post the above form document.forms[0].submit() can also be used.
#foreach (Feeds item in Model.FeedViewModel)
{
<div class="col-4">
#using (Html.BeginForm("goToFeed", "Home"))
{
<div onclick="this.parentNode.submit()">
#Html.HiddenFor(m => item.FeedID)
<h3>#item.title</h3>>
<button type ="submit" name="FeedID" value="#item.FeedID"
style="background:none; border:none" href="#">#item.FeedText</button>
<img src="#Url.Content(#item.FeedPath)">
</div>
}
</div>
}
I have a problem in my code. In my setup I created a single page for language selection. And I copy some of opencart's code on language template and also on controller. But my problem is after passing my form, the action controller doesn't get any POST data from my form.
<form action="{{ action }}" method="POST" enctype="multipart/form-data" id="form-language">
<div class="col-lg-4">
<div class="border_index_in">
<div class="holder">
<h3>ENGLISH</h3>
<button class="language-select btn btn-green" type="button" name="en-gb">Choose</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="border_index_in">
<div class="holder">
<h3>日本語</h3>
<button class="language-select btn btn-green" type="button" name="jap">選択</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="border_index_in">
<div class="holder">
<h3>中文</h3>
<button class="language-select btn btn-green" type="button" name="zh-hk">选择</button>
</div>
</div>
</div>
</form>
JS:
// Language
$('#form-language .language-select').on('click', function(e) {
e.preventDefault();
$('#form-language input[name=\'code\']').val($(this).attr('name'));
$('#form-language').submit();
});
Controller to show my language selection page
public function language_switch() {
$this->load->model('setting/extension');
$this->document->setTitle($this->config->get('config_meta_title'));
$this->document->setDescription($this->config->get('config_meta_description'));
$this->document->setKeywords($this->config->get('config_meta_keyword'));
if (isset($this->request->get['route'])) {
$this->document->addLink($this->config->get('config_url'), 'canonical');
}
$data['action'] = $this->url->link('common/language/language');
$data['code'] = $this->session->data['language'];
$styles_array = array(
'catalog/view/theme/onemidorie/stylesheet/style.css'
);
$scripts_array = array(
);
foreach($styles_array as $st) {
$this->document->addStyle($st);
}
foreach($scripts_array as $sc) {
$this->document->addScript($sc);
}
$data['styles'] = $this->document->getStyles();
$data['scripts'] = $this->document->getScripts();
$data['footer'] = $this->load->controller('common/footer');
$data['header'] = $this->load->controller('common/header');
$this->response->setOutput($this->load->view('common/language_selection', $data));
}
Controller that should accept the POST data from my form:
public function language() {
print_r($this->request->post['code']); //Notice: Undefined index: code
die;
if (isset($this->request->post['code'])) {
$this->session->data['language'] = $this->request->post['code'];
}
if (isset($this->request->post['redirect'])) {
$this->response->redirect($this->request->post['redirect']);
} else {
$this->response->redirect($this->url->link('common/home'));
}
}
Can you help me this?
You should use
print_r($this->request->post);
die;
Then you will get some post data.
because you define the name like "en-gb","jap" and "zh-hk". So please use above code then you can get solution.
You're not posting any data - you're just showing a button. Use something more like
<input type="submit" value="english" name="lang"/>
<input type="submit" value="japanese" name="lang"/>
etc. then just look at
$_POST['lang']
and see if it's english, japanese or whatever.
You can find out how opencart set language in /catalog/controller/startup/startup.php:
// Overwrite the default language object
$language = new Language($code);
$language->load($code);
$this->registry->set('language', $language);
So in controller what should accept the POST data you should dublicate this code before loading language:
// $this->request->post['code'] = 'en-gb' or 'ru-ru' or whatever.
$language = new Language($this->request->post['code']);
$language->load($this->request->post['code']);
$this->registry->set('language', $language);
// now opencart use new language and you can use it too:
$this->load->language('common/header');
$text_home = $this->language->get('text_home');
This works for me in opencart 2
I have a Module call ftp_data. Also I have a js file inside my Module Assets folder bonfire/modules/ftp_data/assets/js/ftp_data.js.
Now I want to load this file to my view
Inside View
<!-- Edit by Yesh -->
<div class="container-fluid">
<form method="POST" id="url_finder" name="url_finder">
<div class="span4">
<h3>Search URL : <input type="search" id="search_url" name="search_url" placeholder="www.example.com"></h3>
</div>
<div class="span3">
<button id="url_btn" name="url_btn" class="btn" type="submit">Search</button>
</div>
</form>
</div>
<!-- Edit by Yesh -->
inside ftp_data.js
$(function(){
$('#search_url').keyup(function(){
var s = new RegExp(this.value.toLowerCase());
$('.result_table .result_row').each(function() {
if(s.test(this.innerHTML.toLowerCase())){
$(this).show();
}else{
$(this).hide();
}
});
});
});
To load js/css file in you View module you should use constructor method. You can simply copy my code i have added below.
code like :
public function __construct()
{
parent::__construct();
Assets::add_module_js('ftp_data', 'ftp_data.js');
}
add_module_js() : first parameter defines the name of the module to be use and second parameter define the files to be load.
Put this code on your view file
<script src="assets/js/ftp_data.js"></script>
Finally I found the solution. This is what I found. I hope it will help you too.
public function index()
{
//---functions will goes here
//--Add this code before closing public function index
Assets::add_module_js('ftp_data', 'ftp_data.js');
//--ftp_data is the Module name.
//--ftp_data.js is the name of the js file that is inside the module/assets/js/
}