I have a block of code with various tags but all within a set of div tags. I need to be able to search everything within the div block to replace a string with another. Here is the block.
<div class="form-group field-thoughts-cmh0-thought required">
<label class="control-label" for="thoughts-cmh0-thought">cmh0.</label>
<input type="text" id="thoughts-cmh0-thought" class="form-control" name="Thoughts[cmh0][thought]">
<button type="button" class="entAdd"> Add Above </button>
<button type="button" class="entDelete"> Delete </button>
<div class="help-block"></div>
</div>
What I'm trying to do is replace all of the 'cmh0' instances with another string. I know I can do this one by one, but there is a very good chance the above block is going to change and change multiple times as time goes on. Consequently, I'd like an elegant way to select and replace all of the 'cmh0' instances within the main div block.
How would I do this?
Thanks in advance.
You can do this with a quick select and replace:
var container = $('div[class*="cmh0"]').parent();
container.html(container.html().replace(/cmh0/g, 'someotherclass'));
the class*= reads as, "select any element where the class contanis"`.
Then just replace the html and reapply it.
jsFiddle
Related
Jquery get values from dynamically generated input texts
This is an example of what I am trying to achieve. Let me put the html code and describe afterwards
<div class="col-xs-3 ">
<label for="pointMap[0]-value">firstkey</label>
<input type="text" id="pointMap[0]-value" name="pointsValueMap[firstkey]" value="value1">
</div>
<div class="col-xs-3 ">
<label for="pointMap[1]-value">secondkey</label>
<input type="text" id="pointMap[1]-value" name="pointsValueMap[secondkey]" value="value2">
</div>
I would like to have all the values of however many of these kinds of input type text id (pointMap[i]-value). Please also suggest if there is a better way than having them an array when collected. My mind is blank on what should I be looping against, in a for loop, I am unable to find a terminating condition (size of these input texts).
Since you are using jQuery. You can use the attribute contains selector. There is whole list of such selectors in jQuery.
You can store values of such inputs in an array like this
var inputStore = []; //Where you want to store the values
$("input[name*=pointsValueMap]").each(function(){ //Will check for inputs with name containing pointsValueMap
inputStore.push($(this).val())
});
I am having a difficult time targeting the closest div sitting on top of my button element. The markup is here:
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text"
maxlength="50"
tabindex="1"
name="kennel-1"
id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
When .duplicateKennel is clicked, I want to grab the .kennelEntry element, so that I can add a new element directly underneath.
For full disclosure, the goal here is when button is clicked, I can duplicate that entire .row, to build a dynamic form where user can create as many entries and those are saved in my backend. When duplicated, I just need to alter the label and name properties for the label and input. I'm just having a hard time targeting the closest kennelEntry to the button being targeted.
You can use jQuery's .prev() for that :
$('.duplicateKennel').on('click', function(){
$(this).before($(this).prev().clone());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row kennelEntry">
<label for="kennel-1">Name of Kennel</label>
<input type="text" maxlength="50" tabindex="1" name="kennel-1" id="kennel-1" />
</div>
<button class="duplicateKennel">New Kennel</button>
i am loading handlebar templates in the two div locations(like add and edit tabs both are jsps) from the same page. so i have duplicate elements in the DOM object, since it is a template which is coming from server location. you can see the sample code below
<div id="add">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
<div id="edit">
<div id="exploding">
<input type="text" name="city" id="city"/>
<input type="text" name="state" id="state"/>
...
</div>
</div>
I can't modify the div container ids i.e exploding since some javascript functions attached to it based on that id to explode address field.
here the problem is if i made any changes to the edit tab, address "exploding" div, it is effecting in add tab address "exploding" since ids are repeated. i have tried jquery detach method to remove the dom elements, but didn't get proper result. Its a web application based on spring boot.
is there any possibility to load jsps dynamically through jquery, i have tried load method as well, but the call is going through controller. I didn't feel it as better option.
Thanks & Regards
krishna K
I have a "search as you type" control developed by another developer who is no longer there. Basically the control at the beginning looks like below:
<div id="someID">
<input type="text"/>
</div>
When the user searches for something. Each result is added as a new div element below the original div, like below:
<div id="someID">
<input type="text"/>
</div>
<div><span>result1</span></div>
<div><span>resul2</span></div>
I want to add the ability to move between these divs with up and down arrows, then clicking enter to choose the div, instead of using the mouse, knowing that I don't know the exact number of divs beforehand. I read some questions on stackoverflow, but they seem to expect the exact number of divs. Any solution or guidance is appreciated.
Thanx.
What I'm trying to accomplish is add a tooltip to a container div that wraps an input I'm disabling. Basically, a tooltip on disabled. Seeing that I can't do it on the disabled input I'm doing it on the container element.
I'm trying to add the tooltip to the container dynamically using this:
$('.input-group date').tooltip({'container':'body','placement':'top', 'trigger' : 'hover', 'title':'maximize'});
But it's not working.
On document.ready I do this:
$('[rel="tooltip"]').tooltip() // Opt-in for tooltips
And the element itself looks like this:
<div class="input-group date" rel="tooltip">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<button class="input-group-addon" id="dp1Icon" onclick="return false" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></button>
</div>
What am I doing wrong? I think I have all the correct elements in place. Is there an easier way to assign a tooltip to a container element when its child input is disabled?
Am I making this more complicated?
This:
$('.input-group date')
means "select all <date> elements that are descendants of elements with the input-group class".
Given that you said your markup was:
<div class="input-group date" rel="tooltip">
you presumably instead want:
$('.input-group.date')
i.e. "select all elements that have both the input-group and date classes"
TL;DR: Use a dot instead of a space in your selector
I ended up with using the show.bs.tooltip handler and testing if the component was disabled; if not, I'd prevent the default action a la:
// Set the tooltip for a start date that can't be edited (when mtg is in progress)
$(".form-group.startDate").on("show.bs.tooltip",function(e){
if ( !$("#dp1").is(":disabled") )
e.preventDefault();
});