There's 2 buttons on my blade like this :
<a data-url="{{route('trip.out', ['trip' => $trip->id])}}" data-table-name="#dataTable" class="btn btn-lg btn-primary out">Set - Out</a>
<a data-url="{{route('trip.completed', ['trip' => $trip->id])}}" data-table-name="#dataTable" class="btn btn-lg btn-primary completed">Set - Complete</a>
#push('custom_js')
<script type="text/javascript">
$(document).ready(function() {
$('a.out, a.completed').click(function(e) {
$.redirect($(this).data('url'), {
_token : '{{ csrf_token() }}',
}, 'POST');
})
});
</script>
#endpush
the one I want is once I click complete it return finish button, so i put this :
#if ($trip->id == 1)
Finish;
#endif
it doesn't work. Note out = 0, complete = 1. status updated on database but it didn't return finish button.
any idea about the problem?
Problem may be due to this..
href="javascript:;"
SO change it as
#if ($trip->id == 1)
Finish;
#endif
When the html have generated with the laravel php, there is no ralations with the blade code.
The blade if is the server code, have nothing todo with you client button click.
If you want to do that, use client js code.
Related
I'm using Laravel Livewire in my project, I use wire:loading for loading the state while clicking. I iterated all the tasks in foreach loop but the loading state applies for all components. Here is the code.
Blade file
GitLab: https://gitlab.com/tasklog/tasklog/-/blob/master/resources/views/livewire/home/tasks.blade.php
<button type="button" wire:click="togglePraise({{ $task->id }}, {{ $task->user->id }})">
👏
<span class="small text-black-50 font-weight-bold">
{{ $task->task_praise->count() }}
</span>
<div wire:loading wire:target="togglePraise">
Processing...
</div>
</button>
Controller file
GitLab: https://gitlab.com/tasklog/tasklog/-/blob/master/app/Http/Livewire/Home/Tasks.php
public function togglePraise($id, $user_id)
{
if (Auth::check()) {
if (Auth::user()->id === $user_id) {
session()->flash('message', 'Forbidden!');
return;
}
$isPraised = TaskPraise::where([
['user_id', Auth::user()->id],
['task_id', $id],
])->count();
if ($isPraised === 1) {
TaskPraise::where([
['user_id', Auth::user()->id],
['task_id', $id],
])->delete();
return true;
} else {
TaskPraise::create([
'task_id' => $id,
'user_id' => Auth::user()->id,
]);
return true;
}
} else {
return session()->flash('message', 'Forbidden!');
}
}
I know the question was before the realease of v2, yet adding the answer for v2 for reference.
as per the Livewire docs if you're using v2, you may specify the action and its parameters in the wire:target directive. For your example, it would be like this:
wire:target="togglePraise({{ $task->id }}, {{ $task->user->id }})"
I was unable to do it by loading targets to actions with parameters so I used jquery with the livewire
Button in the table loop with default d-none loading icon class
<div class="col-3">
<button class="btn btn-sm btn-default btn-save ">
Save <span class="loading-icon d-none">
<i class="fa fa-circle-o-notch fa-spin" style="font-size:14px"></i></span>
</button></div>
Javascript code to call livewire and enable loading
$('.btn-save').click(function (e) {
e.preventDefault();
$('.parameter-value').removeClass("error-field");
var row = $(this).closest('tr');
row.find('.loading-icon').removeClass('d-none');
var parameter = row.data('parameter');
var value = $.trim(row.find('.parameter-value').val())
if(value == ""){
row.find('.parameter-value').addClass('error-field');
}else{
row.find('.parameter-value').removeClass('error-field');
//Livewire call
#this.addParameterValue(parameter,value);
}
});
before LiveWire function ends dispatch browser event
public function addParameterValue($parameterID,$value)
{
...
$this->dispatchBrowserEvent('parameter_value-saved');
}
Handle Browser event from javascript end and remove hide loading icon inside
window.addEventListener('parameter_value-saved', event => {
$('.loading-icon').addClass('d-none');
})
I had the same issue as you. After researching, I decided to make 2 wire:click, IDK if this is the best way to solve this but yeah that's what I do
<div wire:loading wire:target="LoadingAnimation({{$loop->iteration}})">
// icon loading or teks for showing this row load sth
</div>
......
<div wire:click="LoadingAnimation({{$loop->iteration}})">
<a wire:click="setUpdateid({{$author->id}})">
// your content here , teks or maybe an icon
</a>
</div>
If you have any questions let me know, Happy coding!
Edit: Don't forget to make the method inside the class, like the LoadingAnimation and the setUpdateid
To update the quantity of products in the shopping cart
I use buttons. But I'm doing something wrong. Can you help?
sepet.blade.php CODE
<a href="#" class="btn btn-outline-dark btn-xs azalt"
data-id="{{ $UrunCartItem->rowId }}"
data-adet="{{$UrunCartItem->qty-1}}">-</a>
<span style="padding: 4px 12px">
{{ $UrunCartItem->qty }}
</span>
<a href="#" class="btn btn-outline-dark btn-xs artir"
data-id="{{ $UrunCartItem->rowId }}"
data-adet="{{$UrunCartItem->qty+1}}">+</a>
Javascript CODE
<script>
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('.artir , .azalt').on('click' , function () {
debugger;
var id = $(this).attr('data-id');
var adet = $(this).attr('data-adet');
$.ajax({
type:'PATCH',
url:'/sepet/guncelle/' + id ,
data : { adet: adet } ,
success: function () {
window.location.href='/sepet';
}}); }); });
</script>
Page All Code
http://notes.io/8kex
At first, add event.preventDefault() under $('.artir , .azalt').on('click' , function () {.
Of course, you have to pass event like $('.artir , .azalt').on('click' , function (event) {)
Please, Share your Laravel code - maybe there is something not working or you have bug inside routes
PS: You don't need to pass new quantity inside the data-adet, but you can pass e.g. data-operation="plus" and data-operation="minus".
I have two sets of buttons for every package, one for inserting data into my database and the other for deleting data from the database.
When I click the 'Select' button data will be inserted through AJAX and then hide the 'Select' button and display the 'Selected' button. When I click on the 'Selected' button the data will be deleted from the database through an AJAX call. The 'Selected' button will then be hidden and the 'Select' button will be shown again.
All the select & selected buttons are within a PHP while loop so the buttons have the same name but incremental IDs. When I click on one single 'Select' button, the other button is also showing me 'Selected'. I need something to track the each button ID when I click.
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast" id="<?php echo $id ; ?>" onClick="addintoListBroadcast(this)">Select</a>
<a class="btn btn-primary active-button active-button-broadcast" id="<?php echo $id ; ?>" onClick="deleteintoListBroadcast(this)" style="display: none;">Selected</a>
</div>
<script>
$('.select-btn-broadcast').click(function (e) {
var pkgId = this.id;
//alert(pkgId);
$('.select-btn-broadcast').hide();
$('.active-button-broadcast').show();
});
$('.active-button-broadcast').click(function(e) {
$('.select-btn-broadcast'.show();
$('.active-button-broadcast').hide();
});
</script>
The main issue with your code is because you select all the elements with the given class, not just the one related to the element which was clicked. To fix this use the this keyword to traverse the DOM to find the sibling() a element, and then amend it as required.
Also note that there's several other things you can improve in your code. Firstly, don't use inline CSS. Use the classes you've already applied to the elements to amend their styling in an external stylesheet.
Similarly, don't use inline event handlers such as onclick. Call the relevant functions within the unobtrusive event handlers you've bound through jQuery.
With all that said, here's a working example:
$('.select-btn-broadcast').on('click', function(e) {
$(this).hide().siblings('.active-button-broadcast').show();
// addintoListBroadcast(this);
});
$('.active-button-broadcast').on('click', function(e) {
$(this).hide().siblings('.select-btn-broadcast').show();
// deleteintoListBroadcast(this);
});
.active-button-broadcast {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
i want to make a button click counter. When you click the button the text from it changes, when the button is clicked i want to write to the database but i can't manage this.
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true"> </i> XXXX XXX XXX <h6>Show Number</h6></h4></button>
document.getElementById("textChanger").onclick= function(){
document.getElementById("textChanger").innerHTML="<h4><i class=\"glyphicon glyphicon-earphone\" aria-hidden=\"true\"> </i> <?php echo $nrTelefonAnunt ?> </h4>";
}
this is the code that i manage the text change, now what can i do to write to the database, i tried some methods but none worked
Thanks everybody for the answers i manged by adding this:
$('#textChanger').click(function(){
$.ajax({
url : 'rate.php?idanunt="<?php echo $idAnunt ?>"',
type : 'post',
success : function(data){
}
});
});
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;">1</button>
<script>
document.getElementById("textChanger").onclick= function(){
var count = document.getElementById("textChanger").innerHTML;
count = parseInt(count) + 1;
document.getElementById("textChanger").innerHTML=count;
}
</script>
Try this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true"> </i> <span>XXXXX</span> <h6>Show Number</h6></h4></button>
<script>
count=0;
$(document).on("click","button",function(){
count++;
$('span').text(count);
});
</script>
This is the code
html
<a href="#" data-postid="{{ $post->id }}" data-userid="{{ Auth::user()->id }}" class="like-post">
#if(Auth::user()->likes()->where(['user_id' => Auth::user()->id, 'post_or_comment_id' => $post->id,'isPost' => 1])->first())
<span class="glyphicon glyphicon-star"></span>like
#else
<span class="glyphicon glyphicon-star-empty"></span>like
#endif
</a>|
jquery
$('.like-post').on('click',function(event){
event.preventDefault();
var userId = event.target.dataset['userid'];
var postId = event.target.dataset['postid'];
$.ajax({
method:'POST',
url:likeUrl,
data:{userId:userId, p_or_c:postId, isPost:1, _token:token},
success:function(msg){
if(msg['like'] == 0)
$(event.target).html('<span class="glyphicon glyphicon-star-empty"></span>like');
else
$(event.target).html('<span class="glyphicon glyphicon-star"></span>like');
console.log(msg['like']+'yes');
}
})
});
every thing works fine but when I change :
<span class="glyphicon glyphicon-star"></span>like
to (in both html and jquery files ):
<span class="glyphicon glyphicon-star"></span><b>like</b>
or
<b><span class="glyphicon glyphicon-star"></span>like</b>
this happens before adding b tag ... everything fine
screen shot 1
after adding b tag screen shot 2
I get this error HTTP/1.1 500 Internal Server Error
and I tried many things but it seems that jquery doesn't accept two tags in html() cause I tried to change b tag to span tag and the same error appears and thanks in advance
Try:
$(event.target).append('<span class="glyphicon glyphicon-star"></span><b>like</b>');
I create a jsFiddle for you: jsFiddle
Try this snippet, similar to your example.
When you append an HTML, there is no matter how many tags you include in that. The HTML should be proper, That's it.
$('.like-post').click(function(){
$(event.target).html("<span class='glyphicon glyphicon-star'></span><b>like</b>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-postid="105" data-userid="505" class="like-post">
Click
</a>