The runat="server" is breaking my jquery. I have two input, but for testing purpose added runat="server" in only one of those. Actually , I need to add on both.
Below you can find JS script to trigger the datetimepicker:
note: dateTo has runat="server" set and tried to change the way JS trying to get its ID, but still not working.
<script>
$(function(){
$("#dateFrom").datetimepicker();
$("#<%=dateTo%>").datetimepicker();
});
</script>
Here you can find the HTML input using runat="server" or not into asp.net code.
<tr>
<td>
<input type="text" id="dateFrom" name="dateFrom" value="" class="dateFrom" />
</td>
<td >
<input type="text" id="dateTo" name="dateTo" runat="server" value="" class="dateTo" />
</td>
</tr>
Does anybody has any idea,hint.....?
thank you
Use ClientID to get the generated Id of a server side control:
$("#<%=dateTo.ClientID%>").datetimepicker();
ASP.NET will generate a specific id attribute that is different from the id attribute of the server side control, so you need to use the generated value in order to access it from jQuery.
Since you're supplying class names, I suggest simply using those.
$(function(){
$(".dateTo, .dateFrom").datetimepicker();
});
Alternatively, you could give any "date" field on your form a class of "date" and use that:
$(function(){
$(".date").datetimepicker();
});
This is a common pattern for client-side validation, and also allows you to provide context clues through styling with CSS.
If you're using .NET 4 you can set the ClientIDMode attribute to Static. This will prevent the framework from changing the element's ID:
<input type="text" id="dateTo" name="dateTo" runat="server"
ClientIDMode="Static" class="dateTo" value="" />
ASP.NET will treat the inputs as server-side controls when runat=server is added, and this will result in transformed identifiers of those inputs so that they start with a container prefix (something like ctl00_), hence 'breaking' your jQuery selectors.
If you're using .NET 4 then you can disable these transformations by altering the ClientIDMode. Otherwise you will need to include the prefix in your selectors, or refactor your selectors to be independent of ID and somewhat distinct for selection by other means.
Use this to get correct client id for server controls
$('[id$=dateTo]').datetimepicker();
Related
i tried onkey_up to copy one textbos data to another textbox on an user control ascx file but when i run its not wroking.is it because of i wrote onkey_up function on .ascx , i should write on master page?
function sync() {
var TextBoxA1 = document.getElementById('TestAmountTextBox');
var TextBoxA2 = document.getElementById('TestAmountTextBox_2');
TextBoxA2.value = TextBoxA1.value;
}
html inpoutbox :
<input type="text" runat="server" id="TestAmountTextBox" class="form-control currency-input" placeholder="From " aria-label="From Transaction Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="7" onkeyup="sync()"/>
<input type="text" runat="server" id="TestAmountTextBox_2" class="form-control currency-input" placeholder="To " aria-label="To Transaction Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="13" />
By default, adding a textbox to a usercontrol will force ASP.NET to render a unique ID. Something like "usercontrolId_textboxId". You can find the actual ID, by viewing HTML source.
There are a few options to get around ASP.NET generated IDs:
Option 1:
You can turn off ASP.NET autogenerated IDs, by setting ClientIDMode="Static" E.g:
<input type="text"
runat="server"
id="TestAmountTextBox"
ClientIDMode="Static"
... [the rest of the attributes]
There are alternative properties in ClientIDMode that can be used. Also it can be turned off completely in web.config.
If ClientIDMode is set to Static, then ASP.NET will throw an error if the same ID is reused. For example using the usercontrol on more than once on the same page.
Option 2:
Bind the ASP.NET ID to the JavaScript code, using ClientID, For example:
function sync() {
var TextBoxA1 = document.getElementById('<%= TestAmountTextBox.ClientID %>');
var TextBoxA2 = document.getElementById('<%= TestAmountTextBox_2.ClientID %>');
TextBoxA2.value = TextBoxA1.value;
}
This will only work if the JavaScript is placed on the usercontrol.
Option 3:
A third option is to replace getElementById with getElementsByClassName and add another class to the textboxes.
I have a search input tag that is being added by a jQuery plug-in:
<input type="search" />
Note that this does not have an ID, CLASS, or NAME. I need the search input tag to look like this:
<input type="search" name="myname" />
A simple solution is for me to update the jQuery plug-in. However, I do not want to do this as it will cause challenges when I upgrade this plug-in in the future.
This JavaScript works properly and adds the name attribute:
$(document).ready(function() {
document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});
The problem is that the "[0]" in this function relies on the search input being the first input field in the form. I do not think this solution is sustainable.
There are other inputs in the form. This is the only one with the type attribute equal to "search." Is there a way to identify it by this attribute? Or, is there another solution you propose?
Thank you for your time!
You can use the document.querySelector:
document.querySelector("input[type='search']")
Below is an example (you can inspect the output to see name attribute):
document.querySelector("input[type=search]").setAttribute("name", "myname");
<input type="search" value="foo" />
<input type="bar" value="bar" />
You can target a selection by anything. So, the selector input[type="search"]' will work.
If you want to apply this to all input's of type search, this is good enough, and you get all of them in here:
$('input[type="search"]')
This works without jQuery too:
document.querySelectorAll('input[type="search"]')
A more targeted approach would be
document.querySelectorAll('div.filter input[type="search"]')
All is in the question, I want to disable and enable a rich:calendar on the client side (using a javascript fonction for example).
xhtml elements:
<rich:calendar id="calendar" ... />
<h:selectBooleanCheckbox id="checkbox" onclick="change('checkbox', 'calendar')" ... />
JS Function :
function change(checkbox, calendar){
if(jQuery('#'+checkbox).is(':checked')){
// Enable calendar
jQuery('#'+calendar).removeAttr('disabled');
}
else{
// Disable calendar
jQuery('#'+calendar).attr('disabled',true);
}
}
jQuery('#'+checkbox) returns an input input#checkbox
but jQuery('#'+calendar) returns a table table#calendar.rich-calendar-exterior and not the components to disabled.
How to disable the input and the icon of the rich calendar using JQuery (or javascript) ?
Edit :
<rich:calendar id="calendar" /> generates html :
<span id="calendarPopup">
<input type="text" class="rich-calendar-input" id="calendar" name="calendar"
style="vertical-align: middle; width: 130px">
<img alt="" class="rich-calendar-button" id="calendarPopupButton"
style="vertical-align: middle" src="/project/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.iconimages.CalendarIcon/DATB/eAE7fv4Kw6znAA4mA-w_.jsf">
<input type="hidden" autocomplete="off" id="calendarInputCurrentDate" name="calendarInputCurrentDate" style="display: none" value="11/2011">
</span>
I can't find a solution using only jQuery implmentation, so I choose to bind the checkbox value and the disabled calendar attribute on the same boolean :
<rich:calendar id="calendar" disabled="#{!checkboxValue}" />
<h:selectBooleanCheckbox id="checkbox" value="#{checkboxValue}">
<a4j:support event="onclick" reRender="calendar"></a4j:support>
</h:selectBooleanCheckbox>
There is ajax (I do not want to) does anyone have another solution without ajax ? Without other solution, I'll choose this one as the accepted answer...
I know this post is very old, but nonetheless I will contribute to it, because I just had the same doubt.
I was able to do it with JQuery. Looking at the generated HTML output I could see that it creates several components. Here's my <rich:calendar>
<rich:calendar id="cal" value="#{myManagedBean.date}" >
As you can see the id is cal. But it's internal <input>'s id is actually calInputDate, so that's the one that I disabled via JQuery, like this:
$('#mainForm\\:calInputDate').prop('disabled', true);
And just use the same logic to enable it again.
$('#mainForm\\:calInputDate').prop('disabled', false);
It works :-)
I have Entries I want to comment on them . So I created a Repeater with a TextBox and a
Button inside it . How can I get the id of the button and textbox for specific row by
Jquery ?
<ASP:REPEATER runat="server">
<ItemTemplate>
...
// Entries: bind data from DB
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" />
</ItemTemplate>
</ASP:REPEATER>
Thanks .
Your big problem is that your asp repeater control is going to generate ids like this ct100_repeater_txt1 which isn't going to help you get that comment associated with its corresponding db row
The common way I have found to accomplish this (which is a pretty standard way I believe) is to assign the elements id with the row id from the database, or if you have no control over the id, to create a custom attribute.
Pseudo code I have used looks something like this: (I'll try and make it language/platform agnostic so you can learn the concept, as opposed to only the language)
<repeater template>
<textbox id="txt1" dbid='<% eval database id>'/>
<button id="btn1" dbid='<% eval database id>'/>
</repeater template>
that should generate code that looks like:
<input type="textbox" value="" id="ct100_txt1" dbid="14" />
<input type="button value="submit" id="ct100_btn1" dbid="14" />
<input type="textbox" value="" id="ct100_txt2" dbid="12" />
<input type="button value="submit" id="ct100_btn2" dbid="12" />
<input type="textbox" value="" id="ct100_txt3" dbid="39" />
<input type="button value="submit" id="ct100_btn3" dbid="39" />
Then in whatever language you want you can read from that attribute:
Button.Click{
get attribute dbid of button clicked;
save text of textbox of same dbid to a database;
}
Many cheers! Hope that works for ya
EDIT
In response the the comment "where do id save the dbid?!" I'm assuming in a database :) How should you save it? There are lots of ways. Here's one you could try with jquery:
create a javascript function to save answers that takes a parameter. when you bind the dbid to the control, bind it into an onclick function and pass that id to the function. The function then gets the text where the dbid matches and saves the comment and id to a database.
<textbox dbid="14" />
<input onclick="doStuff(14)" />
<script>
function doStuff(var id){
var comment = $('textbox[dbid=id]').value();
ajax(your url and arguments);
};
</script>
Without more information this is the best I can offer you:
for html like this (which is how asp.net will render your button/textbox):
<div id="row1"><button type="button">Click Me!</button><input type="text" name="tb_info" /></div>
<div id="row2"><button type="button">Click Me again!</button><input type="text" name="tb_info" /></div>
You could select the button and textbox for specific row by using the following jQuery:
$("#row1 > button, #row1 > input")
I want to set the value of a hidden field, using JQuery.
Hidden Field:
<input id="chag_sort" type="hidden" name="chag_sort">
My JQuery:
$("#input[name=chag_sort]").val(sort2);
What am I doing wrong? I should also mention in console that sort2 does in fact have a value: DESC.
The selector should not be #input. That means a field with id="input" which is not your case. You want:
$('#chag_sort').val(sort2);
Or if your hidden input didn't have an unique id but only a name="chag_sort":
$('input[name="chag_sort"]').val(sort2);
Drop the hash - that's for identifying the id attribute.
If you have a hidden field like this
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("VertragNr") %>'/>
Now you can use your value like this
$(this).parent().find('input[type=hidden]').val()