I have a node add form with a field that has an 'add more' button. This particular field needs to be populated dynamically. Why doesn't it work to trigger a jquery click on the 'add more' button ($('#edit-field-roof-area-und-add-more').click();)? If I do that in the console, it returns an empty array.
What is the simplest way to create one or two fields in a node add form that I can add an unlimited amount to dynamically from the client side (the values come from a JS application.)
found it!! jQuery('#edit-field-phone-no-und-add-more').trigger('mousedown') Also, the ID changes each time the button is clicked.
when adding nodes you might want to look into using context in your handler:
$('#edit-field-roof-area-und-add-more', 'body').click();
since the elements i dynamically created after the DOM is loaded.. try that, since the body tag is already present in the DOM when the page loads
and/or provide a jsfiddle or codepen example to better help you more...
EDIT:
you could also try this jQuery trigger():
$('#edit-field-roof-area-und-add-more', 'body').trigger("click");
or jQuery triggerHandler():
$('#edit-field-roof-area-und-add-more', 'body').triggerHandler("click");
the difference between the two is that triggerHandler does not bubble up the DOM
also do have an example jsfiddle or codepen.. of your click event handler you are trying to trigger?
Related
I have a table with 3 action buttons and a select element, the data in the table changes after selecting an option in this select (action buttons remain the same, with different attributes values, obviously), after I "clean" (with .html("")) the table and show the new data, action buttons stop working (they preserve the same class as in the table original state), I found a few solutions but I don't know how to implement in my project, because I'm using jquery.
For example, I want to try the answer in this question, but the example he gives is pure JS, not jQuery.
possible solution
Is it really the problem that buttons preserve the same class? If it is, how to remove the event listener from the original elements? I'm using jQuery to manage click events.
Just after I posted this question I went to try out the given solution in the link of "possible solution", I copied and pasted the code after the click event handler from jQuery (you know, $(document).on("click"), etc).
Maybe this question would be useful for people who has the same problem but doesn't know exactly what to search to get a solution. I had the same issue.
PS: Problem solved. Thx all you guys.
I need to change radio button to checkbox when page loading.
I can not make the checkbox directly, so I have to find a way to solve this.
I've tried How can I change a checkbox for a radio button using jQuery?, but got errors like replace is not a function or undefined.
$(':radio').attr('type','checkbox')
No need to iterate with "each". The selector selects all radios.
JSFiddle
The answer to this question depends a lot on where and when you can insert a script. If the script runs before the element is loaded into the page, then you will not be able to find it because it does not yet exist. However, if you are able to load the script inside the body either before or after the element has loaded, you can run a function with the body onload event (if before the element is created) or you can run it as the page is loading if the element has been created. Not withstanding the question of what code you need to garner a DOM reference to the element, the rest is easy. You just change the attribute on the element in question.
$("#foo").attr("type", "checkbox");
Just change the type of your inputs.
$(':radio').each(function(){
$(this).prop("type","checkbox");
});
So i am having trouble sending the value of the textareas that are dynamically generated and have summernote applied to them.
Here is a link that will reproduce the problem:
http://jsfiddle.net/jk6pjnt7/1/
so basically, i am trying to add a new textarea dynamically when i click the "add Step-textarea" because i don't know how many "step" the user will need. the problem is that when i submit the form, i won't get the value of the new textarea. they will have a blank value.
If i do the same and i remove summernote plugin form the process everything works fine.
I have this small pice of coed that prevents the form from submitting and will display what would be submitted in the console, so you might need to open your devtools to see the debugging info.
$('form').submit(function () {
//console.log($(this));
console.info($('form').serializeArray())
return false;
});
Since the DOM is being dynamically changed, we cannot 'watch' these new elements in the typical way. In jquery what we use is called delegation and in particular jQuery.fn.on. We bubble up from the dynamically altered container (in this case, being <form>) to an element that will exist and guaranteed not to change. In this specific case in particular, your line $(next_input).val(''); I changed to $(next_input).html(''); as we're dealing with delegated textarea's which work a bit differently from input boxes in the way they take data.
Here is the fixed code: http://jsfiddle.net/jk6pjnt7/3/
I'm currently trying to write what I feel like should be a very simple chrome addon using jquery. I have a tool I use for work that our IT department has stopped supporting Chrome with, because they have enough on their plate troubleshooting IE. Their solution however, was simply to remove the old onClick functions and added the property disabled="diabled" to all of our buttons.
My simple work around for this is using jquery to remove the disabled properly and append the onClick functionality. I've gotten this to work in a few instances, but the problem I'm running into is with new instances of buttons created using ajax forms.
Here's the code I'm currently trying to work with:
function restoreFunctionality() {
$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
}
RestoreFunctionality();
Now, this works fine for the initial load, however I'd also like this to work for every button that is to be created in the future. To do this, I added:
$("#RestoreDefaultsButton").on("restoreFunctionality", function(event) {
$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
});
This, however, does not work for me but also does not provide any sort of console error message telling me why it won't work. I can't seem to find an example of what I want. I see examples in the jquery doc where it can be called by clicking somewhere or something like that, however what I want is for it to just simply "work". Just look for new instances of that button ID and make the changes.
Is on() not the function I want to use in jquery 1.11.1? Am I somehow using this incorrectly? Any guidance to point me in the right direction would help.
Edit for clarification:
I am not trying to edit the same button multiple times in multiple locations. I am trying and willing to create code individually for each button that comes up, given I know the ID of each one.
Here is an example of something I have that is currently working:
The line of code for the button reads:
<input type="button" name="RestoreDefaultsButton" value="Submit"
id="RestoreDefaultsButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle">
The code that I am using and that actually works just fine is now:
$("body").on("click", "#RestoreDefaultsButton", restoreDefaultFunctionality());
and restoreDefaultFunctionality() is simply:
$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
Again, the above code works just fine. What I seem to have trouble with is that not all of my buttons are present on load, I may click a link that loads a model on the same page/url with a form that has additional buttons. That button might read:
<input type="button" name="OpenToolkitButton" value="Submit" id="OpenToolkitButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle">
Which is almost exactly the same as the original example, it's just been loaded after the script ran for the first time.
What I am looking for is a solution to make all individually specified buttons that I need, when they occur, to have that disabled removed and a specific onclick function added.
It appears that you have several things wrong and you are using .on() incorrectly.
First, ids in your document must be unique. You cannot have multiple DOM elements with the same id. That is both illegal HTML and will not correctly work with selectors. So, if you're trying to detect future "#RestoreDefaultsButton" objects in addition to the one you already have, you will have to change that because you can't have more than one and still have selector code work correctly. Usually, you want to use a class name instead of an id when you want to find multiple objects of the same type.
Second, your use of .on() is simply not correct. .on() allows you to register a callback function that will be called when a certain DOM event is triggered. So, when you do this:
$("#RestoreDefaultsButton").on("restoreFunctionality", fn);
You are asking for jQuery to call your function when the single "#RestoreDefaultsButton" object triggers the "restoreFunctionality" DOM event. Since "restoreFunctionality" is not a built-in DOM event, the only way that could ever trigger is if you triggered the event yourself.
The usual solution to modifying newly created objects that are inserted into the DOM is to go find the code that creates those objects and insert a function call (to call your own function that can find and "patch up" the newly created DOM objects right AFTER the newly created DOM objects have been created.
The newest browser versions allow you to register a callback to be notified when certain types of objects are added to the DOM so you could get notified automatically. These notifications are call MutationObservers (doc here). Unfortunately, those events are only implemented in the latest browsers (IE11) so you generally can't solely rely on them for a general web page.
Your click handler assignment could probably be solved with delegated event handling. In delegated event handling for dynamically created objects, you find a persistent object (that is not dynamically created) that will be in the parent chain of your dynamically created element and you bind the click event handler to that parent. Since click events "bubble" up the parent chain, the click event will be seen by the parent. Using the delegated form of .on() that works like this:
$("static parent selector").on("click", "dynamic element selector", fn);
You can then handle the event without worrying about the timing of when the dynamic element is created/destroyed, etc...
You can read more about delegated event handling in these references:
Does jQuery.on() work for elements that are added after the event handler is created?
jQuery .live() vs .on() method for adding a click event after loading dynamic html
jQuery .on does not work but .live does
Are you triggering the "restoreFunctionality" event after your ajax forms are built?
$("#RestoreDefaultsButton").trigger("restoreFunctionality");
Forces it to be synchronous if you have more to do after the call and before you finish the function
$("#RestoreDefaultsButton").triggerHandler("restoreFunctionality");
I have a search page that loads results. Each row has a Delete button next to it which I want to fire a particular JavaScript function on my page using some parameters specific to that row.
Is it best to put the function call directly into the HTML being generated, e.g. onclick="deleteFunc(<params from results array>);" or should I instead attach the jQuery click events? I've been opting towards the latter, but in this case I'm not sure the best way to do that.
Can I somehow attach events to some HTML even if it is not yet added to the page? If not, I'll have to add all the results to the page, including the array index of each row from the search results, then attach the click event to the button while accessing that row's parameters from the original array using the index I stored in a hidden HTML field. This seems like a lot of work re-correlating everything, when there is a point at which I build the HTML where I have all the parameters that particular row's delete button needs.
Assuming I use jQuery's click events, is there some danger in running out of memory? I may have a thousand rows coming back. If so, what happens when it runs out of memory?
Another option would be to serialize each array row's JSON into a hidden field next to the delete button, which I could then retrieve later. Seems like that would be more memory efficient, but also seems ugly.
Think the .live() JQuery method may work for you.
Attach a handler to the event for all elements which match the current selector, now or in the future.
You can add events to dynamically added elements using the .live() method.
$('.element').live('click', function() {
// do some stuff.
});
Yes you can attach events to HTML elements even before they exist using live method
$('.selector').live('click',function(){
alert('Do something here!');
});