I have two links in the same class, but only need to remove one of them.
<table class="LinksTable" cellspacing="0" cellpadding="0">
<tbody class="LinksTableFormat">
<tr>
<td>
<a class="LinksText" href="Default.aspx?Page=Shopping Cart Upload">Shopping Cart Upload</a>
</td>
</tr>
<tr>
<td>
<a class="LinksText" href="default.aspx?page=admin page">Admin</a>
</td>
</tr>
</tbody>
The Admin link is set to only show when certain users sign into the site, but Shopping Cart Upload shows to any user. I need to remove the Shopping Cart Upload link without affecting the Admin link.
Is there any way to do this with jQuery, since they are both in the same class?
You can use the attribute contains selector:
$(".LinksText[href*='Shopping']").remove();
Can try with selectors:
$('.LinksText:first').hide(); or .remove()
or
$('.LinksText:last').hide() or .remove()
Related
I have a page one.html that contains a hyperlink
<a href="#">Open second page<a/>
When this link is clicked I want to open second.html in a pop up modal.
My second page contains a simple table which I want to show, like:
<html>
<div class="table-responsive-md">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>adidas</td>
<td>one of the top sport brand.</td>
</tr>
</tbody>
</table>
</div>
</html>
If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.
But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.
I am working on Angular2 project and want to want to add rows to table dynamically, when a button is clicked. I know that *ngFor can be used to add rows dynamically, but I am interested if it is possible to use *ngFor only if button is clicked.
usually you use *ngFor to iterate over an array (generally of objects). So if your array is called "data" yo can have some like
<table *ngIf="data.length"> <!--Don't show nothing if no data-->
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr *ngFor="let item of data">
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td>{{item.age}}</td>
</tr>
</table>
Where you has a variable data like
data:any[]=[] //don't forget initialize!
A button can execute some like
onClick()
{
this.data.push({firstName:"firstName",lastName:"Last Name",age:18})
}
A quick sample:
<button (onClick)="sth=!sth">click</button>
<div *ngIf="sth">
<div *ngFor="...">
...
</div>
</div>
I am using bootstrap confirmation plugin, and I have a table with a list of users. One of the columns has a delete button which goes to a link to delete the user, but before deleting the user I have a confirmation box which needs to be clicked. I want to just use one confirmation dialog that pops up for every button and I want to assign the link of the user id to the delete button.
Now the twist is that the whole table is within a form for multiple deletion as well. So I cant have individual forms for each delete button.
<table class="table table-bordered table-striped mb-none" id="datatable-default">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th class="center">Actions</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even">
<td>1</td>
<td>jane doe</td>
<td>jane#gmail.com</td>
<td>
<a href="#" class="confirmation-callback" data-id="1" data-placement="left">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
<tr role="row" class="even">
<td>2</td>
<td>john doe</td>
<td>john#gmail.com</td>
<td>
<a href="#" class="confirmation-callback" data-id="2" data-placement="left">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
<tbody>
And here my js code:
$('.confirmation-callback').confirmation({
onConfirm: function() {
alert('You clicked: delete');
},
onCancel: function() {
alert('You clicked: cancel');
}
});
In the javascript I just want to get the data-id of the button that is calling the function, something like:
$(this).data(id);
Here is link to jsfiddle/full code: http://jsfiddle.net/mswyxp0u/
I can think of a solution. So here it is : Firstly set the singleton option for confirmation to true. Setting it to true will result in :
Set true to allow only one confirmation to show at a time.
When the newest confirmation element is clicked, the older ones will disappear.
Now we know that only one confirmation box will appear at one time. So now create a global variable to store last clicked delete button attribute for id(data-id). Now bind a event to click of that delete then store data-id inside global variable as you can use easily $(this).data("id") in click event.
Now use this global variable inside onConfirm or onCancel as you can confirm/cancel only after clicking delete button and now if only one confirmation box will appear at a time that means the confirm/cancel callback will be for last clicked button only.
Working demo : https://jsfiddle.net/mswyxp0u/8/
Am using Struts2 Jquery plugin,Please take a look on this code.
<s:iterator status="stat" value="primeDisplayLocationBeans">
<tr>
<td class="last center">
<sj:a openDialog="myremotedialog" href="opendemographicdetails?locationId=%{id}">
Demographic
</sj:a>
<sj:dialog id="myremotedialog" autoOpen="false"
title="Demographic Details" width="800"/>
</td>
</tr>
</s:iterator>
Now what happening the code create a list of dynamic link,and if i click those link it will open the respective content on remote dialog.But the problem is the first row link is not working,but all the other link are working properly and opening there respective dialog.For the first link not even the dialog is opening.
The error its showing in Java script Console is:
Cannot set property 'href' of undefined
You are assigning the same ID to multiple elements, that is against (X)HTML specs, and doesn't allow you to refer uniquely to an element later (having multiple of them with the same ID).
Parametrize your ID with something like this:
<s:iterator status="stat" value="primeDisplayLocationBeans">
<tr>
<td class="last center">
<sj:a openDialog="myremotedialog_%{#stat.index}"
href="opendemographicdetails?locationId=%{id}">Demographic</sj:a>
<sj:dialog id="myremotedialog_%{#stat.index}"
autoOpen="false" title="Demographic Details" width="800"/>
</td>
</tr>
</s:iterator>
I have a table on my site that contains the options for different products. I didn't put it there, the ecommerce platform did. It lists the options in a row in the table. The table looks like this:
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
<td> </td>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
Then if there were another option it would be in an additional row with the same markup.
This renders with the label (size in this case) out in front of the <select> box. I want the label above the <select> box and I figured the easiest way to accomplish this would be to close the <tr> and open a new one. Any ideas on how to do this?
EDIT: I should mention that the ecommerce platform generates the html and I do not have access to the source code
Assuming that it follows that exact structure, try this:
$(".attributes select").each(function(){
$label = $(this).parent().prev().prev();
$label.parent().before("<tr></tr>");
$label.parent().prev().append($label.clone());
$label.remove();
$(this).parent().prev().remove();
});
Here's an example: Demo
Like so?
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
</tr>
<tr>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
I think you have to do it in two steps:
remove the elements:
$('.attributes').find('tr:first-child').remove();
$('.attributes').find('tr:first-child').remove();
2.append them back in the same place
$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');