jQuery dynamic DOM elements are not posted in PHP - javascript

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.

Related

get bootstrap modal element id on hide.bs.modal

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!

Call javascript from appended text (order cart)

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/

Events javascript does not work after loading content into div with Ajax.

I have a table on my site, whenever you click on the first checkbox, all others are selected and are also performed other actions that does not matter.
Once the site opens, these data are loaded directly on the page with PHP.
http://i.imgur.com/GRIFbzN.png
Just above, I have a 'select' field with some options, whenever you change the option, you made ​​an ajax request that returns other data, but with the same structure in HTML with the same checkbox and others like elements.
This data is loaded into the table, but after loading the javascript events does not work anymore. How to solve this?
HTML: http://pastebin.com/jU5nZURs
Javascript: http://pastebin.com/XT1ty019
Thanks!
Events are bound to existing DOM nodes.
When you replace / remove the nodes, the events bound to them go away, too.
You need to run this again after you load new content:
$(".checkData").on( "click", countChecked );
$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
countChecked();
});
p.s.
Put it in a function so you don't duplicate code.

How do I get a button to trigger a javascript function?

I have a C#/.NET web application I am working on. On one of the pages I have a table of values generated from a database. I need each value to be clickable so that when you click a value it filters data in a separate table next to it.
So what I decided to do was to make each value into a button:
<input type="button" id="exampleID" class="exampleClass" value="#Model.Data.Value1" />
In my Javascript I have this:
$(".exampleClass").click(function () {...
The code inside the function isn't relevant to the question because it isn't getting called when I click the button. Each button has a unique ID that I am using in my function and I gave them each the same class so that I can catch when any of them are called and then use their unique ID to determine which was clicked. I have set a breakpoint inside the function using Firebug but it's not getting tripped when I click the button. I am stumped as to why this isn't working.
Could be any number of things: are you attaching the click event in the ready method? Is jQuery even loaded on the page? Have you tried refining the selector? For example, $('input.exampleClass').click(). It has to be some dumb mistake.

Accessing onchange using the jQuery plugin DropKick dropdown list

On my page, I have a form with three <select> drop down lists. All these lists use DropKick to make them look nice.
With DropKick added, the DDLs are no longer conventional lists and so cannot be accessed as such.
From what I've found, you can only call onchange by setting a class on the <form> tag and then using the following script:
function submitIt(){
alert('test');
}
$('.deviceChosen').dropkick({
change: submitIt
});
This works, and alert shows. But also doesn't work for a couple of big reasons.
The first <select> field is the only field that gets shown as a result. And everything else on the web page after that element gets removed from the page.
So what I have is three DDLs and I want to be able to set up a function that gets called when the deviceChosen id DDL gets changed. I don't want an onchange event for the other two lists.
Is this something that is doable?
I've tried things like the below, but it just will not work.
$('#deviceChosen').on('change', function() {
alert('dsf');
});
I couldn't get this working, so I ended up using selectBox instead
http://labs.abeautifulsite.net/jquery-selectBox/
I am able to makeit work, you can use the below mentioned code for sample purpose.
$("#ID_OF_SELECT_TAG").dropkick({
change: function (value, label) {
//Logic that you want to apply onchange event.
}
});
Thanks

Categories

Resources