Jquery ID selector when attribute name has a hash - javascript

I'm running into a problem, our internal framework has a system where if you have a form & the containing element his name starts with a hash-tag it will do something when processing these elements later on.
So I have for instance :
<label width='auto' for='x_test' >Test:</label>
<input type="checkbox" name="#x_test#" id="x_test" value="1" />
now using Jquery if I want to select this input, for instance to hide it:
$( "#x_test" ).hide();
This does not work unless I remove the hashtags from the name of the element.
But I'm doing a select by ID I'm not sure why this is such an issue.
Is this a known issue & is there something I can do?
We are on jquery-1.3.2
Thanks
UPDATE
Thanks for all the hints, it helped me a bit and I did learn some things from them but in the end the problem was bad existing code from someone else interfering with what I was trying to do.
We have a wizard en in each step it copies the inputs from that page to a hidden dynamic form for this wizard.
But they were also copying the id-attribute etc so this didn't respect the rule of unique id's anymore. Because of this JQuery / JQuery UI and all my JavaScript were behaving realy weird ofcourse. I ended up rewriting this wizard-thing so my JQuery etc do work.

To select by attribute:
$('[name="#x_test#"]').hide();
To select by id:
$('#x_test').hide();
or
$('[id="x_test"]').hide();
Check the below code (with jQuery 1.3.2).
The id selection applies a green colour, instead the name attribute selection applies a red colur:
$('#test').css({'color':'green'});
$('[name="#test"]').css({'color':'red'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="test">test id</div>
<div name="#test">name test</div>

Use attribute equals selector:
$("[name='#x_test#']").hide();

if usage of # will not be working for your framework, try attaching the id name to class and use class selector in jQuery
i.e Have
<label width='auto' for='x_test' >Test:</label>
<input type="checkbox" name="#x_test#" id="x_test" class="x_test" value="1" />
and then use
$( ".x_test" ).hide();

this will works fine for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<label width='auto' for='x_test' >Test:</label>
<input type="checkbox" name="#x_test#" id="x_test" value="1" />
<script>
$(document).ready(function () {
$( "#x_test" ).hide();
});
</script>

Try following
$("input[name='#x_test#']").hide();

Related

simple jquery + javascript not working: add ".has-error" not working and onclick event not defined

I am working with jQuery 2.1.4 and javascript to do a simple Bootstrap form validation.
I found 3 strange things.
I am sure my jQuery code is working in the onblur and onfocus event of <input> elements (as you can try in my fiddle), but I cannot see .has-error class style. I have introduced boostrap.css etc. in my <head> part, of course.
<form-group> is indenting my paragraph to very end of left side of screen and it hides part of it, I must be using it wrongly but I don't know why.
Cancelar button is not working. I have tried <s:url value="/listaReservas.jsp" /> and plain url like in fiddle, no avail. FF complains about cancelar not defined.
Am I allowed to define a pure Javascript function like I did (mixing Javascript with jQuery), or I must bind it like this: $('#xxxId').click(function(){});???
Thanks all.
.has-error works but you need to make some changes. First, the class should be added to parent node form-group and second, your <input> field should have the class form-control. The HTML looks something like this:
<div class="form-group has-error">
<label class="control-label" for="tarjetaId">No. Tarjeta:</label>
<div class="controls">
<input class="input-xlarge form-control" id="tarjetaId" name="usuarioCompra.numeroTarjeta" value="" />
</div>
</div>
And the JavaScript
$("#tarjetaId").blur(function(){
var cuenta = $("#tarjetaId");
if (cuenta.val().length != 20){
cuenta.closest('.form-group').addClass("has-error");
$("#comprarButtonId").prop('disabled', true);
} else {
cuenta.closest('.form-group').removeClass("has-error");
}
});
As for .form-group giving your layout a negative margin. You are using .row as its parent, which also has negative margin. So you are actually applying two layers of negative margins. Having <div class="row"> is redundant.
Lastly, declare
function cancelar() {
window.location = "/listaReservas.jsp";
};
in the global scope, which means outside of $(document).ready(). The HTML for the submit button should have onclick="cancelar()" instead of onclick="cancelar"

How to remove all elements in a div after a certain div

So I have a div that is drawing in dynamic elements at its bottom and I want to hide these elements, no matter what their IDs are using javaScript/jQuery. Basically my HTML looks like this:
<div class="right-panel">
<div class="info">Text</div>
<form id="the-form">
<input type="hidden" name="first-name" value="">
<input type="hidden" name="last-name" value="">
<input type="hidden" name="state" value="">
</form>
<script>javaScript</script>
<div id="dynamic-id-1">Advertisement 1</div>
<div id="dynamic-id-2">Advertisement 2</div>
</div>
I'd like to ensure that the "dynamic-id-1" and "dynamic-id-2" divs are always removed or hidden no matter what their ID's are (their IDs are subject to change). How do I target these elements without targeting their IDs?
Edit--I tried this, but my approach seems limited, and I couldn't get it to work with multiple divs, even when chaining:
$('#the-form').next().hide();
(Note: unfortunately they don't have a class, there are multiple divs, and the IDs are always completely different. I was hoping there might be novel way to target the last two divs of the wrapping div and hide them)
If the script tag is always before the div's that need removing you could do this -
$('.right-panel > script').nextAll('div').remove();
http://jsfiddle.net/w6d8K/1/
Based on what you tried you could do this -
$('#the-form').nextAll('div').hide();
http://jsfiddle.net/w6d8K/2/
Here are the docs for nextAll() - https://api.jquery.com/nextAll/
The simplest route would be to add classes to the dynamic elements. Something like:
<div class="removable-element" id="dynamic-id-1">Advertisement 1</div>
Then, you can do something like:
$(".right-panel .removable-element").remove()
If only one div at a time is generated dynamically. Add this to dynamic generation:
$('#the-form + div').hide();
Another method to achieve the same (not preferred) is:
$('#the-form').next('div').remove();
You are saying you don't want to target their "id", but is there some specific part in the id that will remain the same ?
like for instance "dynamic-id-" ?
If this is the case you can target them by using a "like selector". The code below would target all divs whose ID is starting with "dynamic-id"
$('div[id^=dynamic-id]').each(function () {
//do something here
});
Target the class instead of the dynamic ID.
<div class="element-to-remove" id="dynamic-id-1" />
<div class="element-to-remove" id="dynamic-id-2" />
$('.right-panel . element-to-remove').remove();

ColdFusion: Modify combobox options in cfgrid

I have a <cfgrid> with one <cfgridcolumn>. I'm using the values attribute for that column:
<cfform>
<cfgrid name="grdBrokers"
format="html"
bind ="cfc:CFC.Brokers.getGridData ( {cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onChange="cfc:CFC.Brokers.editGridData( {cfgridaction},{cfgridrow},{cfgridchanged})"
selectMode = "edit">
<cfgridcolumn name="name" header="Name" values="Item1,Item2" >
</cfgrid>
</cfform>
The values attribute causes a combobox to appear when the user edits a cell in the Name column:
I need to dynamically (without reloading the page) change the options list of that combobox. After much research (stackoverflow.com, raymondcamden.com, etc.) I concluded there are no ColdFusion methods for doing this, so I figured I'd use JavaScript. To locate the id for the combobox I viewed the HTML source for my page and found the following:
<form name="CFForm_1" id="CFForm_1" action="/index2.cfm" method="post" onsubmit="return _CF_checkCFForm_1(this)">
<div id="cfgrid1344103796431" style="border: 1px solid #cccccc; overflow: hidden;"></div>
<select id='cf_grid_select0' class='ygrid-editor'>
<option value='Item1'>Item1</option>
<option value='Item2'>Item2</option>
</select>
<div>
<input type="hidden" name="__CFGRID__CFForm_1__grdBrokers" value="" /></div>
</form>
So, the id I want is cf_grid_select0. However, this element isn't found by document.getElementById(). I have also inspected the page using FireBug and can't find the cf_grid_select0 element on the DOM tab. It's contained in document.body.innerHTML as raw HTML text, but not as its own element in the DOM.
Here is my code that attempts to find cf_grid_select0:
<script type="text/javascript">
function find( ) {
var cbxFind = document.getElementById( 'cf_grid_select0' );
if ( cbxFind ) alert( "Found!" );
else alert( "Not found!" );
}
</script>
<form>
<input id="btnFind" type="button" onclick="find();" value="Find">
</form>
When I click the Find button, I get a popup saying "Not found!".
My question is: using JavaScript or jQuery, how can I locate a <select> that my browser obviously knows about, but doesn't seem to be in the DOM? I suspect ColdFusion.getGridObject() might be what I'm looking for, but I can't find a way to select the combobox using that method, either.
Thank you!
UPDATE:
It appears that ColdFusion is using ExtJS to transform the <select> into a ComboBox after the page loads, apparently removing the <select> from the DOM. I am now researching how to locate a ExtJS ComboBox.
I would almost certainly use jQuery! Try this:
<script>
$(document).ready(function() {
var $mySelect = $("#cf_grid_select0");
alert("I found it..." + $mySelect.attr("id"))
});
</script>
Good luck.
NINJA EDIT
If you're viewing the real source then it IS in the DOM. If you're viewing a "generated" JS kind of source, then it is tricky, but I think jQuery can detect new elements added to the DOM anyway.

javascript change div html when click span

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure
Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.
I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>
Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.
Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});
Try this:
$('.table input:checkbox').not('div.checker input').uniform()

Categories