I am looking to return the element ID of the currently being hidden modal in bootstrap. I cannot seem to find a way to capture this via this code:
$(document).on('hide.bs.modal', function (e) {
// I want to know what the attr ID is of THIS modal being closed?
// I tried console.log(e) to see if I could find the reference but its not in the object?
});
The purpose is to have this for all modals, some modals contain input fields, if changed to a dirty flag I can alert the user that data loss may occur if they close this modal.
If you log the event you receive inside that handler function, you'll notice there is a target node on their that contains the actual modal. So getting the id should be as simple as:
var id = e.target.id;
have a look at the demo I set up:
http://www.bootply.com/JvORc5bWvD
On close you'll see the modal id in the console.
I can see here I was getting an empty target when I was stringifying the return. However, if I alert (e.target.id) it returns the proper id. Thanks!
Related
Fairly new to using JS and I have created an image that brinks up a popup modal upon clicking it. I am following an example on w3schools.com, but I wish they would explain this one aspect of their code. So the popup modal contains an "x" that upon clicking, will close out of the modal as it should. However, when they create the variable in JS for the cancel button, they have it followed by a 0 in brackets:
var closeButton = document.getElementsByClassName("close")[0];
^
^
My first question is, what do you refer to this part that contains a numeric value? Is this an array? And is this used to measure how many clicks are being recorded (i.e. upon clicking, this value will change to [1]?).
Furthermore, Is it possible for me to append another variable in place of that value? In other words if it possible for me to do the following?
var clicks = [0];
var closeButton = document.getElementsByClassName("close").clicks;
I would like to know this because I want to see that if the button is clicked, I would to use the same cancel button on other modals in the same website. By this, I mean that I would like change the click value back to [0], so it would work the same for other modals (as of now, the cancel button only works on the first modal, and it does not close out the other ones. I believe it is because I am not going back to [0]).
Apologies on not using the correct terminology; That is one of the main reasons why I am asking this. What is that value in brackets [0] referred to? Is it measuring clicks? And how can I keep changing its value so that it is back to [0] when I want to perform the same action on other modals? Any and all help would be much appreciated as I am quite new to this.
var closeButton = document.getElementsByClassName("close")[0];
"getElemetsByClassName" will return an Array. By using "[0]" at the end, it's just saying that I want to store on closeButton the first position of this array.
If there's only one ".close" on the page, the return will be ->> [element].
If there's more than one ->> [element, element...]
The function getElementsByClassName[name] returns an array of all elements having [name] as class name. Because there is only one element with this specific class name in this example (or they know they only need the first element of the array) the index [0] is appended, returning the first element of this array. Therefore it makes no sense to change the index except you create more elements using the class "close". Also, the index has nothing to do with the count of clicks or your user interaction anyways.
Hope this answers your Question ^^
The value in brackets is indicating the index of an array.
This statement:
document.getElementsByClassName("close")
returns an array of elements in your document with the class name "close". If there are multiple close buttons it would return an array of all of those elements.
Adding [0] to the end of that statement means you are selecting the element at the starting index of the array (the first element in the array).
You could change that to [1] and it would select the second element within that array, but this doesn't help you in this situation.
If you want to close multiple modals with the same close button and there is only one close button with the class name 'close' than you can always select that button with:
document.getElementsByClassName("close")[0]
I have a button with id btnGo wrapped in a form with id frmNewRequest. When I tried to use
$('#frmNewRequest').on('click', '#btnGo', (function(e){
//do something
}));
it was not working but when I changed to
$('#btnGo').click(function(e){
//do something
});
it was working. What is the different between the two ?
I have a DOM dynamically generated upon the click of btnGo, but when posted to codeigniter's controller, the newly DOM elements are not posted. Anyone now what's the problem ?
First snippet of code tries to click on form. where there is not method to click on form element. So, it will not work.
Whereas the second snippet you are clicking on button and button have a property to click So, it will work for you.
Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?
since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/
I'm putting together this basic script for a site: http://jsfiddle.net/mcgarriers/rVPnu/2/
It works great when I select the various numbers (it shows the relevant divs) but when I go back to click "Select" it still displays the <div>s. I'd like it if the user clicks "Select" that mySpecialElements is hidden again.
Can someone show me how to achieve this?
Many thanks for any pointers.
Fixed your script here: http://jsfiddle.net/rVPnu/6/.
if(!value) hideAll(elementsContainer);
You need to check that value is not empty in the doSelect method and hideAll if it is.
Just interchange hideAll(elementsContainer); and if (!targetDiv) { return;} in your doSelect function.
I have saved this in: http://jsfiddle.net/rVPnu/9/
Call hideAll(elementsContainer); before returning from doSelect method.
// do magic..
hideAll(elementsContainer);
if (!targetDiv) { return;} // didn't find the element, bail
Demo
Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?
Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");
look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.
SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}