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();
Related
I am trying to make the headers of my AgGrid table have 2 lines: the first line is the name, the 2nd line is the unit. I want the 2nd line's font size to be smaller than the 1st one.
I've tried to search for this but could not find the answer. I found this blog about styling the header and followed this answer to make my headers be in 2 lines. But none of them shows how to show 2-line headers and style each line independently. Appreciate any help.
I did this in my Markdown Editor using a Custom Header and having each line as as separate div.
The code for my custom header is here: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
The basic HTML for the header was:
this.eGui.innerHTML = `
<div class="customHeaderTop">
<div class="customFilterMenuButton">
<i class="ag-icon ag-icon-filter"></i>
</div>
<div class="customHeaderLabel">${this.agParams.displayName}</div>
</div>
<div class="headerbuttons">
<span title="add left">[<+]</span>
<span title="rename">[~]</span>
<span title="delete">[x]</span>
<span title="duplicate">[+=]</span>
<span title="add right">[+>]</span>
</div>
`;
Custom Header Components are described here:
https://www.ag-grid.com/javascript-data-grid/component-header/
It is also possible to add a header template if rendering requirements are simple.
This is covered in the AG Grid Blog post https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/
{
minWidth: 150,
field: 'athlete',
headerComponentParams: {
template:
'<div class="ag-cell-label-container" role="presentation">' +
' <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
' <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
' <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
' <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
' <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
' <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
' <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
' <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
' </div>' +
'</div>'
},
}
I have code that's dynamically creating a 3 column image grid from a mySQL database using a JSON array and jQuery .append. How would I pass the database $row ID (array index) of each image in the <div> created by the .append using an href to a modal? I'm calling/building the modal with an AJAX statement.
The line below is from the full $.getJSON statement further down. I believe I can pass the ID in the href but I'm not sure where or how?
// These lines generate the clickable grid images
<a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '">
<img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '">
JSON Parser - builds the image grid:
//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption><p>Board Name: '
+ data.Surfboards[row].Surfboard.boardName
+ '<br>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
Modal for Images:
<!-- Ajax Database Modal Start -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Surfboard Details</h4>
</div>
<div class="modal-body" id="surfboard_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Link to page with working table example and blank modal on image click: Nalu.live/equipment
Link to github repo
Please let me know if any additional information is needed.
Please consider that I'm still a student and very new to web development.
Thanks for any help.
I solved this with the help of a classmate. Working code is in the GitHub repo at the link below. Please note, the code that builds the image grid from JSON database data is posted below and can also be found in scripts/surfboard.js
I'm happy to answer questions (if I can) or walk anyone though the code if needed.
Nalu Github Repo
//// From Dylan W. on Discord - Replace in the surfboard.js
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="equip-content">' + '<div class="photog-group custom-modal clearfix" data-title="'+ data.Surfboards[row].Surfboard.boardName +'" data-image="images/'
+ data.Surfboards[row].Surfboard.imageName +'" data-description="'+
data.Surfboards[row].Surfboard.caDescription +'"><figure><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a data-target="#surfboardModal" data-toggle="modal"><div class="equip-content-overlay"></div><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption class="fadeIn-bottom"><h1>'
+ data.Surfboards[row].Surfboard.boardName + '</h1>'
+ '<hr>'
+ '<p>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
});
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 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.