I have a button with the class of
button.btn.btn-default.check-all
how do I find this button, get the text it says and change it with a find?
I tried something like this but not sure if it works
var r = $("button").find("check-all");
It appears that you have a button with multiple classes and you want to select the element based on all the classes. Simply use the following selector
$('button.btn.btn-default.check-all')
You can get the text by
$('button.btn.btn-default.check-all').text()
And can update by
$('button.btn.btn-default.check-all').text('your_updated_text');
You should do something like:
var element = $('button.btn.btn-default.check-all');
//save text in prevText
var prevText = element.text();
//now, change it!
element.text('text-changed');
Using class names to get an element might not be a good solution. My solution would be to use id attribute and use this id attribute to get the correct element.
See this fiddle
HTML
<button id="my-button" name="buttonName" onclick="change()">Hi</button>
and JS
alert(document.getElementById('my-button').innerHTML);
function change(){
document.getElementById('my-button').innerHTML='hello';
}
What I have done here is, used document.getElementById('my-button').innerHTML which gets the text of the button using document.getElementById(). The same thing can be used to set the text in a button.
This question lead to basic skills in jQuery. I truly recommande that you could find out jQuery Api documentation and read deeply into it. You can get a very good view of jQuery thus you can do much better and efficient in your work.
Here is the link that may help you with this question.
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/attributes/
You can use the jQuery :contains() psuedo selector to create a variable that will pinpoint the button with the specified text. It can be any text, but be cautious if you have buttons with similar text because the return is not an exact match (to avoid this only input/search text that you know is unique to the button).
var r = $("button:contains('check-all')");
To change the text with the newly created variable you can use the jQuery .text() method.
r.text('check-none');
Fiddle Example
:contains() jQuery
Related
I haven't found a concrete answer as to whether this is possible, but it seems like it should be...
I would like to serialize all the input elements contained in a div. I can't use a form, because it would be nested within another form. I would then get the values and post them via ajax.
Here is the jsFiddle example I am playing with:
http://jsfiddle.net/9uyz5/
If I change the root to a it works as expected.
Thanks for your help.
I've modified the jsfiddle from this other question:
https://stackoverflow.com/a/1186309/25020
you need to serialize all the inputs inside your container, not the actual container itself. so:
$('div :input').serialize()
Try this, to get all.
$('#divID *').serialize()
this also works with
$('div :input').serializeArray()
:)
For serializing the contents of the div with a button, this will be the more efficient way as it doesn't traverse through the entire dom.
$(this).closest('div').find("input,select,textarea").serialize();
make sure to attach this with the button event and make sure to include event.preventdefault with the button so that it does not submit the primary form if the div is inside it.
Based on this DOM tree below when a comment reply button is clicked I need to use $(this) and then navigate to the next comment textarea .task-modal-cmt-reply-textarea
I am using jQuery and tried to use .parent().parent().closest('.task-modal-cmt-reply-textarea') and a few other combination without luck so far.
Can someone show me an efficient way to get this element into a var?
What I am trying to accomplish...
I have a click even on a comment reply button which insert a reply form into the DOM below a parent comment when the reply button is clicked using...
$document.on('click', '.cmt-reply-btn', function(e) {}
In this click event the reply form is put into the DOM with...
$parentCmtDomNode.after(cmtReplyFormTemplateHtml);
After the form is in the DOM I try to attach a jQuery plugin to it for #mention style capability using...
$('.task-modal-cmt-reply-textarea').mentionsInput({});
The problem
The #mention library works for the 1st clicked on comment form but all other reply forms do not work
another way to get a reference to that element, would be to do this:
var el = $(this).parent().parent().next().find('.task-modal-cmt-reply-textarea').eq(0);
note that the eq(0) just gives a single object back instead of an array with one element, which may or may not be necessary depending on what you want to do with it.
You need to do another .parent(), the two parent() you did only bring you up to the level of class "Activity-item Activity-comment" with data-activity-id = 12. Do another parent and you should be fine.
try this
var textarea_value=$(this).closest('.Activity-item').next('.Activity-item').find('form .task-model-cmt-reply-textarea').val();
or if its related with data-activityid = "12" so you can use
$(document).on('click','.cmt-reply-btn',function(){
var textarea_value = $(form[data-comment-parent-id = "'+$(this).attr('data-activityid')+' .task-modal-cmt-reply-textarea"]).val();
});
A more efficient way would be to use the parents api from jQuery then followed by your .closests
.parents('div')
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.
Then add the following sub selector to your closest chain.
.closest('textarea[name=^"task-modal-cmt-textarea"]')
This looks for the closest textarea with the name starting with task-modal-cmt-textarea. This is more efficient than what you have as this will eliminate any lookups on non textarea elements then it will only filter out the textareas that have that particular name.
EDIT: Updated Answer to the OP's recent edit.
$('.task-modal-cmt-reply-textarea').mentionsInput({});
This will select all of the ".task-modal-cmt-reply-textarea" that are on the screen at the time, it will not account for future ones. To achieve what you are looking for you should put a sub selector on this chain to allow it to attach to the newest form that was created.
$('.task-modal-cmt-reply-textarea',$($parentCmtDomNode).next('textarea')).mentionsInput({});
This should be placed after the
$parentCmtDomNode.after(cmtReplyFormTemplateHtml);
Try this:
var txt_html = $(this).parents('.Activity').children("textarea:first").html();
var txt_val = $(this).parents('.Activity').children("textarea:first").val();
In the parents() function you need to use the closest parent class/ id.
var el = $(this).parents('.Activity-item').next().find('.task-modal-cmt-reply-textarea').eq(0);
I have a bunch of textboxes that are created dynamically one per click.
They all have the same name "discount[]", same id "discount" and have the same class "tinput".
Is there anyway that I can use to change the text in all of these textboxes with javascript or jquery?
I have another bunch of the dynamically created text boxes.
The id and name are unique but the class remains the same.
If it gets the job done, I can change the class name.
Anyhelp is greatly appreciated.
Regards,
You definitely shouldn't use an id more than once per document. If you need it for a <label> you might want to consider putting the input in the <label>.
You are using the class attribute the right way, though. You can do:
$('.tinput').val('New value for all .tinputs!');
If you can't put the input inside the label you can use use this. I made this demo for someone a little while ago. It might be helpful. It'll increment an id like "id-1".
http://jsbin.com/APegOMo/3/edit?html,js,output
same id "discount"
Please, don't do that! "id" is to identify a dom element. That hurts in my soul.
If every id is unique you could access them by $("#myid").val("my new val"). Just an example.
Regards, - Tobbo
here is a simple example that takes all elements with a particular class name and changes the .html, not 100% sure I understand what you're after though. if you need to do someting specific with each divs text you can iterate through them by id (and maybe class as well) and change each divs individual .html.
if you can share a stripped down example of your code or elaborate I'd love to try to help. good luck.
$(".changeDivs").html("adfasdf");
jsfiddle example >>
I want to change the type of an input on click of a button but it doesn't work. I tried this:
$('.addPhoto').click(function(){
$(this).siblings('.auto_image').prop("type", "file");
});
It doesn't do anything at all. I searched on google and came across this:
change type of input field with jQuery
It says it is possible to do it with straight DOM, but how would I select the class of a sibling with DOM?
You can replace the element all together but I don't think you can just change the type attribute see my example.
$('.addPhoto').on("click",function(){
$(this).off("click").replaceWith("<input type='file' class='addPhoto'/>");
});
or
$('.addPhoto').one("click",function(){
$(this).replaceWith("<input type='file' class='addPhoto'/>");
});
http://jsfiddle.net/ECzP4/
here is the jQuery documentation for replaceWith() http://api.jquery.com/replaceWith/
To get the dom object just take the first item from your jQuery collection:
var domObject = $(this).siblings('.auto_image')[0]
Although it doesn't seem to be able to change from text to file - http://jsfiddle.net/7HTgA/
So what I would recommend is having two inputs, and show/hide them as required rather than trying to change the type of a single input.
Adds all its siblings with the auto_image class with the type - file.
$(this).siblings('.auto_image').attr('type','file')
I know how to do the opposite. Getting a certain DOMElement for a jQuery element is easy. (Use the get() method)
But how can you get a jQuery element for a specific DOMElement?
Unfortunately this DOMElement does not have any attributes like class or id so constructing a selector is not really an option.
Lets say I have this html:
<div class="edit">Abcd<b><i><u>asdasd</u>adasda</i></b>sdfsdf<br>asd</div>
I am in the u-DomElement. How can I get this as a jQuery element?
Is there a smart way to do this?
EDIT:
I wanted to know if there is a gerneral way to do this. Not specific to the code shown above.
Like:
DomElement.toJQuery()
Is there anything like that? I am aware that this might not be possible.
Getting a jQuery object for a DOM object is as simple as jQuery(dom_node) (or $(dom_node)). See http://api.jquery.com/jQuery/
This is commonly used in event handlers, which are given the DOM node as this, so that you will often see $(this)
If you want to get just the Element use the below code. if you wanted to get the HTML of any element you might want to add the .html() tag to either of the examples
var myVar = $('.edit u');
or
var myVar = $(".edit").find("u");
Are you looking for this?
$(".edit").find("u");
hope this is what you are looking for,
$(DomElement)
you want a only 1 specific dom element i suggest you find a way to add an id to that element.
but to get an u element inside a edit class:
$('.edit u');
$('.edit').find('u');