I have a jquery script
$('.add-item').on('click',function(){
var URL = '{% url "main:adding_from_all_products" %}';
var $this = $(this);
var product_add_name = $this.data('item-name');
$.post(URL,{'product_add_name':product_add_name},function(response){
$(".test").append('<p class="product-item">'+
'<span class="product-width-fix">' +
response +
'<a href="#" data-product-id=' + product_add_name +
'class="btn btn-mini btn-success remove-product">Remove</a></span></p>');
})
return true;
});
The element I add is a button styled with bootstrap. But after the append is done
<a href="#" data-product-id=' + product_add_name +
'class="btn btn-mini btn-success remove-product">Remove</a></span></p>
the button does not apper, it's just a link withouth any style. what should i do ?
maybe you need "" for product_add_name :
$(".test").append('<p class="product-item">'+
'<span class="product-width-fix">' +
response +
'<a href="#" data-product-id="' + product_add_name +
'" class="btn btn-mini btn-success remove-product">Remove</a></span></p>');
Try
$(".test").append('<p class="product-item">' +
'<span class="product-width-fix">' + response +
'<a href="#" data-product-id=' + product_add_name +
' class="btn btn-mini btn-success remove-product">Remove</a></span></p>');
there is no space between product_add_name and the class
I just checked this with code,
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script>
$(function(){
var response="The Product Name";
var product_add_name="productName";
$(".test").append('<p class="product-item">'+
'<span class="product-width-fix">' +response +
'<a href="#" data-product-id=' + product_add_name +
' class="btn btn-mini btn-success remove-product"> Remove </a></span></p>');
});
</script>
</head>
<body><div class="test"></div></body>
</html>
This works fine even if you didn't use "" for "product_add_name" like data-product-id="' instead of data-product-id=' and '" class=... instead of ' class... (But if you have spaces in product_add_name, you need to use "" in order to get the expected output).
Please log and see what "product_add_name" is. This can be happen if your "product_add_name" which is returned by "$this.data('item-name')" is having any incompatible character.
If your "product_add_name" is also valid, just check whether you are adding this child element to a valid parent with style display:block applied.
Related
function confirmDelete(ruta, id){
alert(ruta +","+ id);
document.getElementById('confirmDeleteModal').innerHTML = '<div class="modal-dialog max-w-2xl">'
+ '<div class="modal-content mx-auto">'
+ '<div class="modal-header">'
+ '<button type="button" class="close la la-times" data-dismiss="modal"></button>'
+ '</div>'
+ '<div class="modal-body">'
+ '<h2>¿Está seguro que desea eliminar el registro?</h2>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<div class="flex flex-wrap gap-2">'
+ '<a href="{{route('+ ruta +', '+ id +'}}"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
+ '<button type="button" data-dismiss="modal"'
+ 'class="btn btn_outlined btn_secondary uppercase">Cancelar</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+'</div>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')" class="btn btn-icon btn_outlined btn_secondary">
eliminar
</a>
<div id="createModal" class="modal" data-animations="fadeInDown, fadeOutUp">
</div>
I have an anchor that executes a function to remove
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')"
class="btn btn-icon btn_outlined btn_secondary">
<span class="la la-trash"></span>
</a>
This function adds the content to a modal
The function needs 2 parameters the route and the id to delete
function confirmDelete(ruta, id){
alert(ruta +","+ id);
}
The problem is that it doesn't add the content to the div of the modal and I don't know how to use the "{{route('+ route +', '+ id +'}}" in js
If I'm not mistaken, what you want is to use a Laravel function (route) but passing the values through javascript, however that is not possible. First the laravel code is executed on the server and the generated result (html and JS) is sent to the client, so you can't call laravel functions directly from javascript.
One way to solve this would be to create your route string using javascript from the received data, without using Laravel code.
+ '<a href="http:/example.com/'+ ruta +'/'+ id +'"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
I want to go to stackoverflow.com for example when an ahref is clicked. The user types in the URLs so it could either have https:// at the start or not. Whenever the URL does have the https:// at the start, it works perfectly and links to the page, but whenever it doesn't. It keeps the file path, eg: file:///C:/Users/..../stackoverflow.com
How can I fix this?
https://codepen.io/anon/pen/rKZGdG
let results = document.getElementById('results');
// let url = "https://www.facebook.com"; WORKS
let name = "result";
let url = "facebook.com";
// this one leaves on the webite when Visit is clicked eg. file:///C:/User/../facebook.com
//I want the user to be able use to fb.com or http://www.fb.com, how can I do this?
results.innerHTML += '<div class="card bg-light p-3">'+
'<h3>'+name+
' <a class="btn btn-secondary" target="_blank" href="'+url+'">Visit</a> ' +
' <a onclick="delete(\''+url+'\')" class="btn btn-danger" href="#">Delete</a> ' +
'</h3>'
+ '</div>';
<div id="results">
</div>
Just add // before your url. So in your case, this should work:
results.innerHTML += '<div class="card bg-light p-3">'+
'<h3>'+name+
' <a class="btn btn-secondary" target="_blank" href="//'+url+'">Visit</a> ' +
' <a onclick="delete(\''+url+'\')" class="btn btn-danger" href="#">Delete</a> ' +
'</h3>'
+ '</div>';
This is because when you add a link without a protocol or a slash, it gets interpreted as a relative path.
I have the current page (with glyphicons in buttons as download buttons).
As seen in the picture the final column with the glyphicons don't quite line up. I tried replacing the glyphicons with just a "test" in the button and they seem to line up perfectly.
This is the line of code that has to do with one of the buttons for that column.
document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id =' + array13[prop] + ' name = "Rec_Status" onclick="gotovendor(0)" value = ' + array13[prop] + ' class="list-group-item" onclick="myFunction7(this.value)"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';
How do I have the buttons with glyphicons in the first image align like the buttons in the second image? I tried using padding, but it doesn't look like a good solution.
Below is the the same code with padding.
document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id =' + array13[prop] + ' name = "Rec_Status" style = "padding: 0.625vw;" onclick="gotovendor(0)" value = ' + array13[prop] + ' class="list-group-item" onclick="myFunction7(this.value)"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button></div>';
Try to add some padding/font-size/line-height.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<button style="padding:5%;font-size:20px" type="button" class="btn btn-default"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></button>
Try this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary"><i class="fa fa-bars"></i></button>
I have this button for opening a modal box and I whould like to execute a function of the pressed button at the same time opening the modal. The modal is opening but the function no.
Here is my code
$.each(data, function (i, item) {
$('#fileListTable tbody').append("<tr><td>" + item.File + "</td><td>" + item.DateUpload + "</td><td>" + `
<i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF
<i class="fa fa-file-pdf-o" aria-hidden="true"></i> Quest
` + "</td > <td>" + `
<button id="btnStatus`+ i +`" class="btn btn-primary btn-xs btn-status" data-toggle="modal" href="#static"><i class="fa fa-list-alt" aria-hidden="true"></i> Status</button>
` + "</td><td id='statusContainer"+ i +"'>" + item.Status + "</td><td>" + item.Comments + "</td></tr > ");
});
my function
$('button[id^="btnStatus"]').click(function () {
console.log('A button was clicked');
});
You have dynamic element. So you need to attach click using on event
$('body').on('click', 'button[id^="btnStatus"]', function() {
console.log('A button was clicked');
});
I have a table with all cells of a column having the following html content:
<span id=\"" + id + "\"" + "class=\"asset_value\">" + comments + "</span>" + "<span class=\"glyphicon glyphicon-pencil pull-right\"> </span>
How can I remove <span class=\"glyphicon glyphicon-pencil pull-right\"> </span> on an onclick event?
I already have an onclick event function inside which I have the row id and the column id where I have this cell.
Try this :
$(this).closest("tr").find("span.glyphicon").remove();
Try,
$(this).parent().find(".glyphicon").remove();