So a project has been passed to me and there is a button on a Twitter bootstrap sidebar doing a search dynamically. I cannot figure out which calls the button is making, and I need to replicate its functionality with another button. (We want two buttons doing the same thing) is there a way to use jquery (find maybe?) to do this? I was trying something like this:
$side-bar.find('#newSearchButton').on('click', function(){
$side-bar.find('#oldSearchButton')._data.events.click[0].handler;
});
I know this is wrong, but I don't know what to do to make it work. I just want to be able to make the new search button perform the same search as the old search button.
Couldn't you use a function that when new button is clicked, clicks old button, hence doing the magic behind the old button.
$('#newSearchButton').click(function(){
$('#oldSearchButton').click();
});
You can set same callback to a list of objects. In your case, you can do:
$side-bar.find('.MyButton').on('click', function(){
// do something
});
Note that you have to include class="MyButton" to your buttons tags for this to work.
Related
Sorry if I'm unclear or the title is unclear, my main language isn't english. I was wondering if it's possible to send out a tweet without having to 'confirm' , i have a code that, when you press a button it tweets something, but a pop up opens, so i was really looking for something that can help me but I couldn't find anything related to this topic.
document.querySelector('#postInfo').addEventListener('click' , function(){
this.href = 'https://twitter.com/intent/tweet/?text=HEY';
});
The hey text is temporary, it'll come as some data from the DB.
You may be aware of this, but you actually are able to "programatically" click objects through your code. You will have to use a querySelector to first select the button you are trying to "click" and then you will need to use the .click() method on the object. If you are trying to remove the object or button altogether, you will first need to get the element then use element.parentNode.removeChild(element); to remove the element itself.
I have a single page app using Backbone, and whenever I over over something and then click the "back" button, the popover forever stays.
I want to destroy all instances of popover when a new instance is loaded.
Finding the popovers that are created through the data API is not difficult and has been covered in other answers like those of David Mulder and Amir Popovich. You just do:
$("[data-toggle='popover']").popover('hide');
Or you can use destroy if you need to or prefer to.
The challenge is to handle those popovers that are created dynamically.
Marking the Elements with Popovers
I would implement something like this. I'd override the default popover method and I'd try to perform this override as early as possible so that everything that needs a popover uses my override. What it does is just mark elements that use a popover with a class. Bootstrap does not mark them itself:
// Override popover so as to mark everything that uses a popover.
var old_popover = $.fn.popover;
function my_popover() {
this.addClass('marked-as-having-a-popover');
return old_popover.apply(this, arguments);
}
$.fn.popover = my_popover;
Then to clear everything before the unloading, I'd put in the code that detects the unloading the following:
$(".marked-as-having-a-popover").popover('hide');
Or it could use destroy rather than hide if testing shows that it works better for your use-case.
Now, the method above will work if the override happens early enough and you do not have a page where multiple jQueries are loaded. (Yep, this is possible.) I use something similar to deal with tooltips in one of my applications so I know the principle is sound. It so happens that in my app, all tooltips are created by my code so there is no risk of missing something.
Finding All Elements with Popovers, Even Unmarked
If you are in a situation where a popover can be created without being marked (I call this an "escapee"), then you need to query the whole DOM and find which elements have popovers. There is no shortcut here. You cannot rely on attributes like data-content because popovers can be created wholly dynamically (i.e. without any of the data- attributes). Also, all kinds of elements can get popovers, so you cannot reliably assume that only button elements will have a popover. The only surefire way to find everything that needs handling is to look at each element in the DOM and check whether it has a popover:
// Obviously this is quite expensive but in a situation where there *can* be escapees
// then you have to check all elements to see if they have a popover.
$("*").each(function () {
// Bootstrap sets a data field with key `bs.popover` on elements that have a popover.
// Note that there is no corresponding **HTML attribute** on the elements so we cannot
// perform a search by attribute.
var popover = $.data(this, "bs.popover");
if (popover)
$(this).popover('hide');
});
Again, destroy could be used rather than hide.
Proof of Concept
Here is a fiddle that illustrates the entire thing:
"Add a Dynamic Popover" simulates code that would add a popover when the override is in effect.
"Add an Escapee" simulates code that would add a popover and somehow manage to use the original Bootstrap code.
"Clear Marked" clears only the marked popovers.
"Clear All" clears every single popover marked or not.
try with this:
$('YOUR_ELEMENT_SELECTOR').popover('dispose');
reference url: https://getbootstrap.com/docs/4.1/components/popovers/
Its very simple, just you have to call one function popover() with argument "destroy" to destroy the popover. It will destroy all popovers which is created by $("[data-toggle=popover]").popover();
you can check documentation for more options and arguments of popover().
I suggest you to destroy popovers with having specific class name instead of using following code.
$("[data-toggle='popover']").popover('destroy');
The above code will destroy all popovers in the page. So instead of this, use class selector.
$(".YourClassName").popover('destroy');
If you have problems and need to remove all for sure:
$('.popover').remove();
will help (Popover automatic add this class, even for dynamicly created objects). It destroys all the popover DOM-Object incl. callbacks, etc.
But thats the rough way. Typically I displose all by popover class (clean way) and to be sure I do a hard clean up after. Works for me fine!
$('.popover').popover('dispose');
$('.popover').remove();
If you like to remove all execpt one, use a filter() with :not-Selector
$('.popover').filter(':not(#yourID)').popover('dispose');
$('.popover').filter(':not(#yourID)').remove();
popover adds also a id with a random number
#popoverxxxxx where xxxxx is a five digit number.
this helps sometimes to compare popovers. Of cause this could also be used to identify the popovers.
Something generic like this (assuming you're using data-bindings) should do the trick:
$('[data-toggle="popover"]').popover('hide')
or the more extreme call
$('[data-toggle="popover"]').popover('destroy')
though I doubt that would make sense often. Still to address the specific bug you're encountering you should create a minimal test case so that that bug itself can be addressed.
Oh and if you specifically want to check for open popovers you can use .data("bs.popover").$tip.parent().length (which is a bit of an hack), for example:
$('[data-toggle="popover"]:eq(0)').data("bs.popover").$tip.parent().length == 1
You can hide all popovers by using this:
$("[data-toggle='popover']").popover('hide');
You can destroy all popovers by using this:
$("[data-toggle='popover']").popover('destroy');
The difference between hide and destory is that when you hide a popover you do not need to reactive it, but when you destroy it you do.
Check out my JSFIDDLE and then:
Click on all popovers and then click hide. After clicking hide you can click on the popovers again.
Click on all popovers and then click destroy. After clicking destroy try clicking on the popovers again and see that nothing will happen since they are destroyed. In order to make them functional again, you will need to click on reactive and then try.
Popovers must be initialized manually, so you know exactly what you have to destroy because you did initialize it.
You should just call the destroy function with the same selector.
Or maybe I am missing something ?
I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks
If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.
I'd like to create a form where I have checkboxes, and when clicked, they open separate textareas for the user to enter more information in.
If I want to use Django's dynamically created form fields, is there a way that I can put a function call in for each checkbox.
You can dynamically add event handlers using JavaScript. You can add a script that, once the page is loaded, will find all checkboxes you want and add the handlers there. In jQuery, you can write something like this:
$(document).ready(function() {
$(".my_form input[type=checkbox]").change(function() {
//Some code here
});
});
Be careful, I have not tested the code above! But should be enough to get you started.
I'm pretty new to Jeditable and I was wondering if there is a way to generate and submit a custom form with multiple fields instead of just one field?
I've taken a look at this tutorial for some hints and I've made a bit of progress. I'm not sure if I'm on the right track though.
Here's one idea where you can save whatever has been edited in the form. Give the inputs in the form a certain class, call it "my_form". Create a button that initializes the my_form class with JEditable by creating a function called makeEditable(). Also make the Save button have a class which we'll call save_button.
$(function(){
function makeEditable() {
$(".my_form").editable('MyPhpPage.php', {
// YOUR CUSTOMIZATION
submit : '<button class="save_button">Save</button>',
});
makeEditable();
});
You can finally send all the modified data with with a "Submit" button of class "save_button", and that's accomplished with $('.my_form').find('.save_button').click();.
This may be not robust enough for your form as you might want to create constraints such as require all of them to be non-empty. You then just need a bit more JQuery code to do so.