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/
Related
I'm trying to nest a dropdown inside an element which already has a click event bound to it.
I have disabled bubbling on the dropdown and created a clickhandler to trigger it manually by calling $(...).dropdown()
When I try to trigger a dropdown the dropdown box requires two clicks at a minimum before it begins to work.
When you use $(...).dropdown('toggle') it works on the first click but after that the functionality is broken.
Here is a JSFiddle that exactly mimics my structure.
JSFiddle
Just add this function in your script it's work fine
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
I update your jsfiddle click here
situation
I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.
the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked. the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows
collapse with glyphicon
I am using the below jQuery to toggle the icon
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
so far I have this all working as shown with this fiddle http://jsfiddle.net/vgfb74u0/
Problem
the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.
I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.
I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!
You need to manually bind events to any dynamically created element, or let jQuery do that for you.
Changing
$('#tog').on('click', function() {});
To
$('html').on('click', '#tog', function() {});
Will tell JavaScript to delegate the event to any #tog that's created inside the <html> element.
The problem is the event handler is lost when the table is re-rendered.
The fix is to attach the handler in a different way: $('.table').on('click', '#tog', function() {...}
See the updated jsfiddle
I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.
I'm looking at the airbnb.com website and the form that allows me to create a new room has buttons that change when clicked.
Here is what it looks like before I click 'Apartment'
Here is what it looks like after I click 'Apartment'
Is this something that I can get from a jquery library or use from bootstrap or do I have to make this myself?
I'd like to replicate this in my site..
Maybe something like this can be useful... It is only an idea, because you didn't post any code :)
$('#btnGo').click(function(e) {
e.preventDefault();
// set css classes and text of button
$(this)
.removeClass('btn-primary')
.addClass('btn-danger disabled') // with *disabled* I'm sure that the button is not clickable
.text('WAIT');
and after your event, e.g. you can return to initial condition...
$('#btnGo')
.removeClass('btn-danger disabled')
.addClass('btn-primary')
.text('GO');
where for example id='btnGo' can be one of your buttons..
I have the following code, I want a user to be able to copy or paste into a text field,
basically imitating a ctrl+c or ctrl+v
My problems are:
how to make sure the context menu only appears in text fields
how to paste the text into the region.
I have been through the docs and so far I have this NOT working:
var menu = Ti.UI.createMenu();
menu.addItem('Copy', function() {
var data =$.("#this").val()
Ti.UI.Clipboard.getData('text/plain',data);
});
menu.addItem('Paste', function() {
var data =Ti.UI.Clipboard.getData('text/plain');
$.("#this").val(data)
});
function showrightmenu(){ Ti.UI.getCurrentWindow().setContextMenu(menu);}
I could call this using oncontextmenu= "showrightmenu()" but now, how to paste something in this line:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
AM GROPING IN THE DARK. I'm a newbie to TideSDK, this is my first project.
Question 1
I'm new to TideSDK as well and might be wrong, but as far as I can tell from the API documentation, context menus are bound to a window, and displaying different context menus when right clicking different parts of the window would require you to each time change the window's context menu...
Example:
//Create different menus
var context_menu = Ti.UI.createMenu();
var copy_menu = Ti.UI.createMenu();
//Add menu items etc.
...
//Change context menus on click events depending on clicked element
$('#some-element').mousedown(function(event){
if(event.which==3){//detect right click
editor_window.setContextMenu(context_menu);
}
});
$('#text-field').mousedown(function(event){
if(event.which==3){//detext right click
editor_window.setContextMenu(copy_menu);
}
});
This way, when you click the element with id some-element, the first context menu is shown, and when you click the #text-field element, the second context menu is shown.
Note that this won't work if one element is inside the other, because then both events are fired.
Question 2
In this code you supplied:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
You want to use Ti.UI.Clipboard.getData and not Ti.UI.Clipboard.setData, since you want to get the text stored in the clipboard and then put it into the text field. Also, you might want to change $.(#this) to $("#this") or $(this).
This should work:
$("#some-element").val(Ti.UI.Clipboard.getData('text/plain'))
Remark
You seem to be confused about how to use jQuery. To select an element, you use $() and not $.(). Also, with $("#example") you select the DOM element with the id example. $(this) is used inside a function called when an event is fired, and refers to the element on which the event was fired. $("#this") is not the same as $(this). Hope that helps a bit...