So I have a page, with a modal. Now I have a table on that page. I want to include a link in each row of the table that opens that same modal, and then put different content in it using jQuery.
The problem I'm having is in the modals. When I give 2 links the id code, and do the following in jQUery:
$(document).ready(function()
{
$("#code").click(function()
{
$("#CodeModal").modal('show')
});
});
Only the first link opens the modal.
I have also tried data-toggle, but that resulted in no links being able the open the modal.
Is there a way to make this possible? If so, how to do it?
Thanks.
Id must be unique. You can assign the same class to the links and do this:
$(".code").click(function()
{
$("#CodeModal").modal('show')
});
Related
Using jQuery UI Accordion to create dropdowns for a filter list.
http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage
Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.
You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.
To recreate:
Go to the above link
Select an option on the left
Clear button should appear
Try click the 'Clear' button
The accordion should then close
What I want:
The function contained in the 'onclick' to clear all checkboxes that are under that header
Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:
$("#clear-button").click(function(event){
event.stopPropagation();
event.preventDefault();
log("clicked!");
});
Looking at your example page, there seems to be a lot code missing.
I would suggest something like:
$(".clear-button").on("click", function(event) {
event.preventDefault();
$(this).parent().parent().find(":checked").prop("checked", false);
});
When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4, you have to find that parent div.
An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on().
https://jsfiddle.net/Twisty/o4L504ya/
In my app, I used jQuery Data Table to show the results of a query made by form. I have now a new task: I must add, in this table, a column where for each row I have a button (or a link, no matter which of this 2).
The focal point is that when a user click this button or link, a popup must be open to allow the operator to modify some value in the db (so it's for this that I need a button for each row; every row may have a value to modify, or not).
The question is: how can I add this button/link and how can I force, after click, the popup opening?
You can do this like:
$('#data_table').DataTable( {
data: data
});
$(document).on('click', '#data_table tbody tr', function(){
// alert('hello');
$('#dialog').dialog();
});
Working Fiddle
Note: In this example I am using jquery ui dialog, you can use Bootstrap modal as well
Use bootstrap Modal. Bootstrap modal will allow you to do the operation you want
So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery
I am trying to hide the edit buttons from the table if the user does not have the access. However the problem I am having is that I can't seem to edit the data that I have appended from Firebase. The following code would remove all other buttons with that class on the page, but not the ones appended using the below function.
$(".editBtn").css("display", "none");
var currentGroupUsersRef = new Firebase(FB + "/groupUsers/" + currentGroup);
currentGroupUsersRef.on('child_added', function(snapshot){
$('#groupPage table').append('<tr><td>one</td><td><button class="editBtn">Edit</button></td></tr>');
});
I have tried replicating the problem in jsfiddle but can't replicate it without actually loading it from firebase for some reason.
If you look at your code snippet, it executes like this:
Hide all edit buttons
When new data arrives from Firebase, generate an edit button for it
The fact that your edit button doesn't hide comes from the fact that you dynamically create the button after the code that hides them has completed.
You'll either have to:
use a dynamic selector, which is jQuery's construct that matches dynamically created elements
hide each button as you create it
I'd opt for #2:
$('#groupPage table').append('<tr><td>one</td><td><button style="display: none" class="editBtn">Edit</button></td></tr>');
Try this
$(".editBtn").css("display", "none");
$(document).on('child_added', function(snapshot){
$('#groupPage table').append('<tr><td>one</td><td><button class="editBtn">Edit</button></td></tr>');
});
I have some divs which are structured like this:
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
<div>
<div><a>more Info</a></div>
</div>
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
.......
These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).
When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.This is my sample code http://jsfiddle.net/H5R53/16/In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it's working fine. Now my problem is, when I click on the same link again it doesn't show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div's( which are opened when click on moreInfo link) should be close. Anyone please help me.
If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.
If so,
JQUERY
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
YOUR JQUERY WITH THAT CONTROL ADDED
$('.moreInfLink').live('click',function(){
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
$(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});
And your Fiddle Updated!