Change Button Text inside foreach Loop - javascript

I have a button , when i click on that button it should change it's text.it's there inside a foreach loop. But the problem is when i click on that button first buttons text change. I want to change the specific button text which i clicked ..How do i do that?
Front-End Part
#foreach($products as $product)
<button onclick="this.disabled=true; quoteAdd('{!!$product->id!!}')" id="inquireButton" class="btn btn-danger ">Inquire</button>
#endforeach
Javascript Part
function quoteAdd(productId)
{
$("#inquireButton").html('Save');
// other code ..
}

You need to pass button reference using this keyword to quoteAdd method like following.
PHP
#foreach($products as $product)
<button onclick="this.disabled=true; quoteAdd('{!!$product->id!!}', this)" id="inquireButton" class="btn btn-danger ">Inquire</button>
#endforeach
JS
function quoteAdd(productId, button) {
$(button).text('Save');
//other code ..
}
FYI id should be unique for each element.

The value of the id attribute in HTML should be unique, so basically what you are doing is wrong (you shouldn't have fixed id within a loop).
Regardless this issue, you can do the following:
// Front-End Part
#foreach($products as $product)
<button onclick="this.disabled=true; quoteAdd(this)" id="inquireButton_{!!$product->id!!}" class="btn btn-danger ">Inquire</button>
#endforeach
// Javascript Part
function quoteAdd(el)
{
$(el).html('Save');
// other code ..
}

Related

Laravel: using Javascript inside blade #if

I was wondering. It's not possible to put Javascript inside blade #if right? Is blade #if some form of php but using php code will be discouraged in view right? What should I do? Here's the logic of what I'm trying to achieve. Basically, what alternative ways are there to achieve what I'm trying to do? I'm trying to show button when the three conditions are met.
#if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
<button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
#endif
Blade is a form of php, so all work is done on the server. So you cannot call javascript functions inside #if expression. Instead you can run the functions in the controller and return a value to say if you should include the button or not or you can have a javascript to show or hide the button if you don't care if the users can find and show the button if they want.
Something like in your controller return view('your view')->with(['showButton' => $shouldShow) and in your view #if($shouldShow) and the rest of your code
Your js must be in public or a child, and would be something like this:
#if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
#include('script.js')
<button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
#endif
Another option could be <script src="{{ asset('js/scripts.js') }}"></script> instead of #include directive
i guess:
#if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
#include('script.js')
<button type="button" class="btn btn-primary btn-sm" data-id="{{ $one_parking_info->booking_data->m_bkl_gov_id }}">取消</button>
#endif
<script>
$('body').on('click','.btn-sm',function(){
var id = $(this).attr('data-id');
//
logic of cancelBooking
//
})
</script>

How to use the same function for a button inside a loop?

I have a homepage where it shows products from the database and I placed an add to cart button that of course will add each specific product to the cart. Currently I have 6 products shown on the page but apparently only the first product can be added to the cart and the rest has a button that does not work.
Upon research it is advised that we cannot use the same id multiple times via JavaScript (I am using id="add-to-cart") and that is what's happening inside the loop therefore only the first item has a working button.
How can I generate specific ID's to each add to cart button on my while loop and how will the script recognize or read each specific id? I am no JavaScript expert.
$result = mysqli_query($bd,$sql2);
}
if($result){
while($row=mysqli_fetch_array($result)){
$prodID = $row["ID"];
$prodname= $row["itemname"];
$prodprice = $row["price"];
?>
<h1 class="product"><?php echo $prodname; ?></h1>
<p>Price: <span class="price"><?php echo $prodprice; ?></span></p>
<br>
<a class="btn btn-default add-to-cart cartButtons" id="add-to-cart" input>Add to Cart</a>
<p class="info hidethis" style="color:red;"><strong>Item Added to Cart!</strong></p>
Here's the script:
$('#add-to-cart').on('click',function(){
$(this).siblings('.info').fadeIn(700).fadeOut(1000);
var price = $(this).siblings('p').children('.price').html();
var product = $(this).siblings('.product').html();
$.post('cart/data.php?q=addtocart',
{
price:price,
product:product,
qty:1
}
);
});
Per your example, remove your id="add-to-cart", then adjust the jquery click like this:
$('.add-to-cart').on('click',function(){ ... });
This will give that click event to all buttons set to be of class add-to-cart. Since you already use $(this) inside your click event function, it is already pulling the details from THAT click, and not others.

Passing values from view to .js file based on button click

I have a view that gets data from Model and displays the information. I am getting a list of school with school name and school Id from Model and then using foreach loop, I am creating a dynamic table based the number of schools the Model returns.
Below is the code I have for my view.
#if (Model.SelectedSchool != null)
{
foreach (var sch in Model.SelectedSchool )
{
<table class="table-bordered">
<tr>
<td class="col-sm-9">
#sch.SchoolName
</td>
<td class="col-sm-3">
<button class="btn btn-default" id="recentlySelected" name="btnRecentlySelected" type="button">
Select
</button>
</td>
</tr>
</table>
}
}
Here SchoolName is the property in the list I am getting from Model.
SchoolId is also in the list.
Below is the view I get
Now, I want that when a user clicks Select button, beside each school name, that specific SchoolId, is passed to the .js file where I am handing the javascript functions and based on the schoolId, the javascript function, generates the address of the school.
My question is how can I link the SchoolId's that I am getting in the SelectedSchool list to the respective Select buttons.
Thanks in advance!
First of all, you are setting the same id to all the buttons generated from the loop. This is invalid HTML ! Id values should be unique. So delete the Id property (unless you absolutely need it for something. in that case you need to make it unique)!
You can keep the school id in html 5 data attribute and read it later in javascript as needed.
Assuming you have a property called SchoolId,
<button class="btn btn-default" data-schoolid="#sch.SchoolId"
name="btnRecentlySelected" type="button">
Select
</button>
You can have the same attribute value for name property. You can use this as your jQuery selector when registering the click event on these buttons.
Now some unobutrusive javascript to bind a click event on this button
$(function(){
$("[name='btnRecentlySelected']").click(function(e){
e.preventDefault();
var schoolId= $(this).data("schoolid");
alert(schoolId);
// to do : Do something with the schoolId
});
});

HTML5 Javascript function not getting called on button click

I have an html page, thats intended to take user's email and password. I defined "login()" method in one of js file but the function doesn't get executed after button click.
HTML file:
http://pastie.org/10276940
Ok,
first, you should be careful about quotes and double quotes... there is already a mistake in your onclick code.
Then, I would not use onclick. I would do it by adding an eventListener (click) on the button, like this :
document.getElementById('myButton').addEventListener('click',function(){
//do something
});
Here is an example on this way to do it.
There are several other ways to do this, like you did with onClick, but here is just the way I would do the job.
http://jsfiddle.net/tz4bnu0m/4/
Problem is also that when you call login in your onclick event, function is just not defined (yet), here is a way to do it with your onclick event, just add function definition before you call it in onclick event :
http://jsfiddle.net/tz4bnu0m/5/
Hope it helps!
(since it is not an input type submit, you don't have to handle default action, click will not submit the form by default)
The problem is on the button.
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById("inputEmail").value,
document.getElementById("inputPassword").value)">Sign in</button>
You are mixing double quotes. Change it by single quotes an it works
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById('inputEmail').value,
document.getElementById('inputPassword').value)">Sign in</button>
This works but...
I don't recommend to you to make this events in HTML directly. You can separate this code and make it more reusable:
<button id="myID"></button>
<script>
document.getElementById("myID").onclick = function() {
// good stuff
};
//other way:
document.getElementById("myID").addEventListener('click', function() {
// good stuff
});
</script>
Good luck

How to call a defined function with parameters with keyboard short keys

I have a table in which i am getting data dynamically. In the table there is an edit button with each record like this
<tr>
.
.
.
//other columns
<td class="center">
<a class="btn btn-info btn-setting edit" href="javascript:;" onClick = "show( 'account_no',<?php echo $row->account_no;?>)">
<i class="icon-edit icon-white"></i>
Edit
</a>
</td>
</tr>
This way i am sending parameter to show method of javascript. Now i am using a keyboard shortcut plugin called shortkeys. When i press down key it adds a class to tr called selected. That's fine i have set it up. Now the problem is that i want to add another shorcut to edit the selected record. Here is the code
shortcut.add("Alt+e",function() {
//???
});
When alter + e is clicked i want to call show method with the parameters defined dynamically. for clearification i want to call show('account_no',<?php echo $row->account_no;?>). But i have no idea how i can do it. Is there any suggestion or alternative? if i can simply call it it would be good as though i have just clicked.
I have doe it using this code.
shortcut.add("Alt+e",function() {
$('.selected > td > a.edit').trigger('click')
});
I am calling click trigger and it is working fine.

Categories