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');
});
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 have Bootstrap 4 popovers added dynamically to a table.
I initialize my popover like this:
// Initialize popover
$('body').popover({
html: true,
template:
'<div class="popover popover-row-field" role="tooltip">' +
'<div class="arrow"></div>' +
'<button type="button" class="btn-popover-header btn-edit-popover-close float-right text-primary" aria-label="Close">' +
'<i class="fal fa-check"></i>' +
'</button>' +
'<button type="button" data-action="undo" class="btn-popover-header action-button text-primary float-right">' +
'<i class="fal fa-undo"></i>' +
'</button>' +
'<h3 class="popover-header"></h3>' +
'<div class="popover-body"></div>' +
'</div>',
placement: 'bottom',
trigger:'click',
position: 'relative',
selector: '.btn-edit-cell',
});
I have an event listener for a close button on the popover:
// Close popover by clicking the X
$(document).on('click', '.btn-edit-popover-close', function() {
$('.btn-edit-cell').popover('hide').popover();
});
I then clone a template row and add it to the table:
<td class="field-editor-input align-top">
<button type="button" class="btn-popover-header text-light btn-edit-cell save-btn-group" data-link="{{ $col->header }}-new"
data-html="true" title="{{ pretty_heading($col->header) }}" data-row-id="#row-template-new"
data-content="<textarea id='text-{{ $col->header }}-new' name='{{ $col->header }}' class='form-control popover-edit-field'></textarea>">
<i class="fal fa-pen text-light"> </i>
</button>
<div id="div-{{ $col->header }}-new" data-orig=""></div>
</td>
The popover opens OK but the close button does not fire.
Additionally, the popover does not stay fixed to its target if I scroll the page.
Thanks
I'm creating a simple WordPress functionality, where users can add texts and edit some content:
When i decrease the width to 5/12 it looks like this:
Which is bad and not correctly positioned. Also, the pencil is not clickable and cannot use his functionality. Not sure if it's JavaScript/jQuery problem, or some CSS styles are broken. I'm creating the elements in the following way:
$(".row-container .dx-columns-wrapper").droppable({
accept: '.top-wrapper .dx-draggable-row, .top-wrapper .dx-draggable, .dx-columns, .dx-droppable',
tolerance: "touch",
activeClass: "dx-ui-state-highlight",
drop: function(event, ui) {
var element_class = $(ui.helper[0]).attr('class').split(' ')[0];
if (element_class == 'dx-draggable-row') {
var rows_id = 0;
$('.dx-droppable').each(function() {
var checked = $(this).data('row');
if (parseInt(checked) > parseInt(rows_id)) rows_id = checked;
});
rows_id++;
$(this).append('<div class="dx-droppable" data-row="' + rows_id + '">' +
'<div class="dx-droppable-header">' +
'<i class="fa fa-arrows-alt js-move-row" title="Move Row"></i>' +
'<span class="pull-left dx-row-title">Row ' + rows_id + '</span>' +
'<i class="fa fa-close pull-right dx-remove-row js-remove-row" title="Remove Element"></i>' +
/** Edit row class */
'<button class="js-edit-row-classes-btn-ok dx-edit-row-classes-btn-ok pull-right">OK</button>' +
'<i class="js-edit-row-classes-btn dx-edit-row-classes-btn fa fa-pencil pull-right" title="Edit Classes"></i>' +
'<span class="dx-row-classes pull-right">Row Classes</span>' +
'<input type="text" class="dx-row-class-input">' +
'</div><br></div>');
$(document).init_comp();
} else {
var data_type = $(ui.helper[0]).data('type');
var content = $(ui.helper[0]).html();
if (data_type != undefined) {
var col_id = 0;
$('.dx-columns').each(function() {
var check = $(this).attr('data-indx');
if (parseInt(check) > parseInt(col_id)) col_id = check;
});
col_id++;
$(this).append(
'<div class="dx-columns dx-col-12" data-view="' + data_type + '" data-indx="' + col_id + '">' +
'<i class="fa fa-arrows-alt dx-move-column js-move-column" title="Move Element"></i>' +
'<span class="dx-section-name">' + content + '</span>' +
'<i class="fa fa-arrow-left js-decrease-column-width" title="Decrease Element Width"></i>' +
'<span class="dx-column-part">12</span>' +
'<span>/</span>' +
'<span class="dx-column-full">12</span>' +
'<i class="fa fa-arrow-right js-increase-column-width" title="Increase Element Width"></i>' +
'<i class="fa fa-close pull-right dx-remove-column js-remove-column" title="Remove Element"></i>' +
'<i class="fa fa-cog pull-right dx-setting-column js-setting-column" title="Element Setting"></i>' +
'<i class="fa fa-copy pull-right js-copy-column" title="Copy Element"></i>' +
'<i class="fa fa-align-justify pull-right"><span class="small-column-properties"><i class="js-edit-col-classes-btn fa fa-pencil" title="Edit Classes"></i><i class="fa fa-copy js-copy-column" title="Copy Element"></i><i class="fa fa-cog dx-setting-column js-setting-column" title="Element Setting"></i><i class="fa fa-close dx-remove-column js-remove-column" title="Remove Element"></i></span><div id="triangle-down"></div></i>' +
'<button class="js-edit-col-classes-btn-ok dx-edit-col-classes-btn-ok pull-right">OK</button><i class="js-edit-col-classes-btn fa fa-pencil pull-right" title="Edit Classes"></i><span class="dx-col-classes pull-right">Column Classes</span>' +
'</div>'
);
$(document).find(".dx-columns").draggable({
helper: 'clone',
cursor: 'move',
handle: '.js-move-column'
});
} else {
$(ui.draggable).appendTo(this);
}
}
}
});
Any ideas how it's possible to prevent this issue ?
I am using material design lite and inserting elements with for loop.
var insertClass ='';
var classlist = document.querySelector('.classList');
for (var i = 0; i < 5; i++) {
insertClass += '<div class="eachClass">' +
'<p>'+ i +'</p>' +
'<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">'+
'<i class="material-icons">more_vert</i>'+
'</button>' +
'<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">' +
'<li class="mdl-menu__item deleteClass">Delete</li>' +
'<li class="mdl-menu__item editClass">Edit</li>' +
'</ul>' +
'</div>';
}
classlist.innerHTML = insertClass;
componentHandler.upgradeAllRegistered('MaterialMenu', 'mdl-js-menu');
The componentHandler.upgradeAllRegistered() function is not working at all,
but when I use upgradeDom() it will work only on first element.
In the example you have provided, you are going to end up with multiple buttons with the same id and multiple ul menus with the same for. That would potentially explain why you appear to only get one menu as the id and for are used by material design lite to bind the buttons and menus together. Try rewriting your example with:
'<button id="demo-menu-lower-right_' + i + '" class="mdl-button mdl-js-button mdl-button--icon">'+
'<i class="material-icons">more_vert</i>'+
'</button>' +
'<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right_' + i + '">' +
'<li class="mdl-menu__item deleteClass">Delete</li>' +
'<li class="mdl-menu__item editClass">Edit</li>' +
'</ul>'
...which will give each button and menu a unique id or for.
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.