I have a link as follows:
<a href="#" id="<?php $res['id'];?>" class='bid_accept'>Accept</a>
I need to pass the value of id to another page using Framework7 as follows:
$$('.bid_accept').on('click', function (e) {
e.preventDefault();
var value = $(this).attr('id');
var jsonstring = JSON.stringify(value);
myApp.confirm('Are you sure?', 'Custom Title',
function (jsonstring) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
},
function () {
myApp.alert('You clicked Cancel button');
}
);
});
I receive alerts as:
Your name is "". You clicked Ok button
I also tried:
var value = this.id;
Why am I not getting the id value?
If you use JSON.stringfy(value) it means you are setting that ID out of a JSON value, i do not know if i am write but the ID attribute takes a 1 word name and JSON.stringfy() produces multiple words separated by spaces. Let alone i think IDs have a specific number of characters so you might be intializing a very long name.
Not really sure what you want to achieve but HTML allows you to add attributes of your own and read them in JQuery like:
<a href="#" myAttr="<?php $res['id'];?>" class='bid_accept'>Accept</a>
such that when you click your code will be like:
$$('.bid_accept').on('click', function (e) {
var value = $(this).attr('myAttr');
....
}
This line has error
<a href="#" id="<?php $res['id'];?>" class='bid_accept'>Accept</a>
change it to
<a href="#" id="<?php echo $res['id'];?>" class='bid_accept'>Accept</a>
And in jquery part instead of $ you have to use $$.
var value = $$(this).attr('id'); // check $$ sign
Related
I work with jQuery cookie plugin v 2.2.1 and set multiple value to name like this:
html:
<a href="#" id="<?= esc($product->id);?>" class="hvr-bounce-in wishlist">
<i class="icon-favorite_outline"></i>
</a>
js:
$('.wishlist').click(function() {
event.preventDefault();
var id = $(this).attr('id');
ids = Cookies.get("wishlist")
if (!ids)
Cookies.set('wishlist', id)
else
Cookies.set('wishlist', ids + "," + id)
});
output in cookie is:
61,58,95,105
Now I need to remove one value from this list like 58. How can I remove it?
I'm trying to append into the html code a javascript function with 2 variables,
the comment variable is a string and i have problem passing it :
var url = '{{URL::to('calendar/comments')}}';
$.getJSON(url+"/"+data.id, function(data)
{
ul.append("
<li>
<a href='#'onclick='openmodal("+value.id+", "+value.comment+")'>
Modifier
</a>
</li>"
);
});
but when i display in the console i get the string variable shown as a varibale
for example test and not "test" as i want and i get this error "test is not defined".
var url = '{{URL::to('calendar/comments')}}';
$.getJSON(url+"/"+data.id, function(data)
{
ul.append("
<li>
<a href='#'onclick='openmodal("+value.id+", \""+value.comment+"\")'>
Modifier
</a>
</li>"
);
});
You need to surround the comment with "" so when you trigger the click,
the onclick function as something like openmodal(1,"test") and not openmodal(1,test) since it would just try to call it with the `test variable which is undefined
I'm building a webshop and on every item there is a button to add that item to the shopping cart.
<?php
$i = 0;
$path = "../images/women/winter/winter1";
$lang = "description_".get_param();
if(!$result = $db->query("SELECT * FROM cloths;")){
die("There was an error running the query [".$db->error."]");
}
while($winter = $result->fetch_assoc()){
echo "<div class = \"boxsale $winter[image]\">
<img src = \"$path.jpg\"/>
<div class = \"test\"> $winter[$lang] </div>
<select>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
<button class = \"addToCart\" onclick = \"executeJS()\"> <i class = \"fa fa-shopping-cart\" data-id = \"$i\" aria-hidden=\"true\"></i></button>
</div>";
$i++;
}?>
</div>
when you click on the button the executeJS() in the last few lines gets called from a seperate file.
addToCart.js
function executeJS(){
var id = $(this).attr("data-id");
$.ajax( {
type: "GET",
url: "ajax.php?id=" + id + "&action=add"
})
.done(function(){
alert("Product has been added.");
});
}
i wanted to grab the data-id from the button that has been clicked, with
$(this).attr("data-id"); but all i get is a header that has undefined as data-id.
id=undefined&action=add
can anyone please point me in the right direction?
thanks
The problem is because $(this) is not correctly being applied to the element you're trying to access. When using a string based onclick handler (onclick="test()"), this refers to the window, and NOT the element you're trying to access.
function test() {
console.log(this.id);
}
Link
If you want to use the string based onclick notation, pass your element in explicitly, and do $(element).
<button class = \"addToCart\" onclick = \"executeJS(this)\" data-id = \"$i\" />
Javascript:
function executeJS(element){
var id = $(element).data('id');
...
Personally, skip the attr-id all together, and simply pass your id directly:
<button class = \"addToCart\" onclick = \"executeJS($id)\" />
It looks like this may be pointing to the window instead of the button.
You can fix this by manually looking for the button:
var id = $(".addToCart").attr("data-id");
This will only really work if you only have one button. What you should do is use jquery to attach the event to the button.
In your javascript:
$(".addToCart").click(function(e){
var id = $(e.target).attr("data-id");
$.ajax({
type: "GET",
url: "ajax.php?id=" + id + "&action=add"
})
.done(function(){
alert("Product has been added.");
});
})
The e.target refers to the button that is being clicked.
Use regular function (function(){}) instead of arrow function:
$(document).on("click",".deleteBtn",function(){
//Your Code
});
Since you're using jQuery, this is how you should be doing it. First, remove the inline event handler in your PHP (e.g. onclick = \"executeJS()\")
The other issue is that your buttons don't have a data attribute but their <i> children do.
Next, create your jQuery event handler, binding to the button. By doing this you can use $(this).find('i') to get the fontawesone <i> element and its data attribute, .attr("data-id"):
$('button.addToCart').click(function() {
var id = $(this).find('i').attr("data-id");
$.ajax({
type: "GET",
url: "ajax.php?id=" + id + "&action=add"
})
.done(function() {
alert("Product has been added.");
});
})
jsFiddle example
I have the following line of code
$product_list="$product_list $id - $product_name - $date_added <a href='inventory_edit.php?pid=$id'>edit</a> • <a href='inventory_list.php?deleteid=$id'>delete</a><br/>"
and
if(isset($_GET['deleteid']))
{
echo 'Do you really want to delete this item with ID of '.$_GET['deleteid']. '? Yes | No';
exit();
}
How can I make it appear as a dialog box and do you think using a dialog box instead of going to the confirmation page will be a good option?
UPDATE
I tried the following but when ever deleteid gets set it creates another new delete link how can I make the existing delete link show the confirm box?
if(isset($_GET['deleteid']))
{
echo 'Delete';
}
UPDATED try
$product_list="$product_list $id - $product_name - $date_added <a href='inventory_edit.php?pid=$id'>edit</a> • <a href='inventory_list.php?deleteid=$_GET[deleteid]' onClick='return confirm(\'Do you want to delete?\');'>Delete</a><br/>"
Doesn't seem to be working.
<script>
var el = document.getElementById('deleteLink');
el.onclick = reallyDelete();
function reallyDelete(){
var verifyDelete = confirm("Really wanna delete?");
if (verifyDelete == false) {
e.preventDefault();
}
}
</script>
Then you'd of course have to add the ID (deleteLink) to the A link, and this will also only work if there is one link to "delete" otherwise you might need to use onClick, but I would recommend googling around for a tutorial on how to achieve the best solution for you.
(There is also still Bootstrap)
UPDATE
Replace
<a href='inventory_list.php?deleteid=$id'>delete</a>
with
Delete
And delete this:
if(isset($_GET['deleteid']))
{
echo 'Delete';
}
I would like to know how i can set the current hyperlink id to a hidden field on clicking the corresponding links. The html control code is as follows:
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox" id="ExpressionsLink"
title="Create expression column" onclick="keepID()">Add Expressions Model</a>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox" id="AggregateMethodLink"
title="Create aggregate column">Add Aggregate Methods</a><input id="HiddenIdHolder"
type="hidden" />
I need the id of the link clicked on the hidden field 'HiddenIdHolder'.
Javascript
function keepID() {
var hiddenInput = document.getElementById("HiddenIdHolder");
hiddeninput.value= ? // What can i do here to get the id?
}
this refers to the element itself. Example on jsFiddle
onclick="keepID(this)"
Then
function keepID(element)
{
var hiddenInput = document.getElementById("HiddenIdHolder");
hiddeninput.value = element.getAttribute("id");
}
Use jQuery:
$('a').click(function() {
$('#HiddenIdHolder').val($(this).attr('id'))
})
You should modify your HTML to provide argument for KeepID function:
ooxx
note that you should provide a this argument when invoke KeepID function, then in KeepID function, you can access this element from argument:
function KeepID(src) {
document.getElementById("HiddenIdHolder").value = src.id;
}