I am using datapicker jquery but it is not able to get Input Id in C#.If i give runat=server ,i can call the input id in c#,but it does not work in page. Can anyone help me for that, I am new to Dnn. Any answer would be appreciated. Thank you.
enter code here
<div class="demo">
<p>Date: <input id="datepicker" type="text" />
</p>
</div>
Use TextBox with DatePicker
<asp:TextBox ruat="server" ID="txtDate" ></asp:TextBox>
To access it use ClientID
<script type="text/javascript">
$(function() {
$("#<%= txtDate.ClientID %>").datepicker();
});
</script>
EDIT: Based on the comments
After defining your txtDate in aspx page with runat="server" you can access it in code behind like:
string value = txtDate.Text;
yep because when you add runat server the id get renamed by asp try using somethink like this
setting the client id mode static if you are using .net 4.0
or if you do not use .net 4.0 then try this
<p>Date: <input id="datepicker" ClientIDMode="Static type="text" runat="server" />
or if you do not use .net 4.0 then try this
$("#<%= datepicker.ClientID %>").datepicker();
You can use CssClass of textbox to get datepicker in following way:
<asp:TextBox ID="txtDate" runat="server" CssClass="DatepickerInput" />
You can use jquery code in following way:
$(document).ready(function () {
$(".DatepickerInput").datepicker({ dateFormat: 'dd/mm/yy' });
});
Related
I am using a tinyMCE with asp.net webforms.
It works fine with html textarea but I don't want that. I want to integrate it with asp:textbox but it doesn't work with that.
I have changed mode to multiline, provided columns and rows but nothing works with it.
Help please.
Code:
<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#txtBoxBody'
});
</script>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">
Body
</label>
<asp:TextBox runat="server" ID="txtBoxBody" TextMode="MultiLine" CssClass="form-control"></asp:TextBox>
</div>
Update: Textarea works fine but if i put runat="server" attribute in it then it stops working too.
Because the ID of the rendered TextBox isn't txtBoxBody if you view the page source you'll see it's something like Body_txtBoxBody depending on the structure of your code.
To get it to work you need to do something like this:
<script>
tinymce.init({
selector: '#<%=txtBoxBody.ClientID%>'
});
</script>
Alternate of #hugo's answer:
<asp:TextBox ClientIDMode="Static" runat="server" ID="TB" Enabled="true"></asp:TextBox>
<script>
tinymce.init({
selector: '#TB',
});
</script>
I have a JavaScript function as follows:
function getWindowSize() {
test.value = $(window).width();
test2.value = $(window).height();
}
window.onresize = getWindowSize;
And in the ASP.NET page:
<input type="text" id="test2" value="Test"/>
<input type="text" id="test" value="Test"/>
This populates the fields when the screen size changes. When I put the page elements to have runat="server" they don't populate the screen size and cannot capture it server side.
Any suggestions?
You need to use ClientID if you have server tag. You are not currently using getElementById but you should to get the DOM element for better browser compatibility. If you have framework 4 and above you can use ClientIDMode and do it without ClientID
Javascript
function getWindowSize() {
document.getElementById('<%= test.ClientID %>').value = $(window).width();
document.getElementById('<%= test2.ClientID %>').value = $(window).height();
}
window.onresize = getWindowSize;
HTML
<input type="text" id="test2" value="Test" runat="server" />
<input type="text" id="test" value="Test" runat="server" />
Since I cannot see the full code, I am going to assume ASP.NET replaces Id attributes with generated ones (something like _ctl$Container$test). As a workaround, if you use jQuery you can use CSS classes:
Javascript
function getWindowSize() {
$('.WidthValue') = $(window).width();
$('.HeightValue') = $(window).height();
}
HTML
<input type="text" id="test" value="Test" class="WidthValue" runat="server" />
<input type="text" id="test2" value="Test" class="HeightValue" runat="server" />
Are you using Masterpages? Because when adding ASP.NET form controls using masterpages they use a prefix to identity the controls:
<input id="ctl00_ContentPlaceHolder1_txtName" class="textfield" type="text" name="ctl00$ContentPlaceHolder1$txtName">
Where ctl00_ContentPlaceHolder1_ is the prefix of the masterpage.
This can be the cause why your javascript function doesn't populate the fields.
How do you identify your objects test and test2?
am trying to show a loading div on button click, but it is not working at the moment.
Javascript :
<script type="text/javascript">
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Div:
<div id="loading" class="Loading" runat="server" visible="false">
<div class="loadingImg">
<img src="../Images/loading.gif" alt="loading" />
</div>
</div>
Button:
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
the div is set to runat server so that I can change its visibility also through code.
Use the onClientClick for the asp button. Then make the jquery function that you ahve called BtnSend_Click
If you want to do it via Client side:
jQuery
function BtnSend_Click () {
$('#<%= loading.ClientID %>').toggle("slow");
}
ASP Button
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onClientClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
If you want to do it via the server:
C#
protected void BtnSend_Click(object sender, EventArgs e){
loading.Visibility = 'visible' //not sure on syntax to show it in code behind off the top my head
}
ASP Button
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
The ASP.Net AJAX library has an UpdateProgress control that sounds like it would fit your needs.
I've tried adding in a prevent default, as the code as described below would postback before the loading div was shown otherwise.
<script type="text/javascript">
$(document).ready(function (e) {
$('#<%= BtnSend.ClientID %>').click(function (e) {
e.preventDefault();
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Another thing I've noticed is you have set Visible="false":
<div id="loading" class="Loading" runat="server" visible="false">
This means the div doesn't exist as its not output from the server side. Look in the view source when the page loads, it wont be there and hidden, its just not there. Remove the visible="false" and use CSS to hide it to start off with.
<script type="text/javascript">
$(document).ready(function () {
$('input[name="time"]').ptTimeSelect();
});
</script>
the above script is working on this:
<input name="time" value="" /></td>
But not working on this...
<asp:TextBox ID="time" name='time' runat="server"></asp:TextBox>
Please use following code
<script type="text/javascript">
$(document).ready(function () {
var id='<%=time.clientid%>'
$('#'+id).ptTimeSelect();
});
</script>
and let me know if this does not work.
From what I remember of ASP.NET is that it modifies the ID and name of an element to ensure it's always unique. The end result of the <asp:TextBox> may be something like:
<input name="ctr_0102_time" />
The best bet is to check the element's source on the live page to determine what attributes it has. If it does have a random identifier then you should probably base it on a specific class:
<input class="time" />
<asp:TextBox CssClass="time"></asp:TextBox>
$('input.time') ...
The other thing that may cause this to break are post backs. Post backs in ASP.NET do not re-ready the document, they simply reload the page. Instead of using $(document).ready() use:
function pageLoad() { ... }
try this:
<script type="text/javascript">
$(document).ready(function () {
$('[id$=time]').ptTimeSelect();
});
</script>
I'm not able to access the variable in my .js file
the code i have at the top of the page is:
<script type="text/javascript">
privilage = '<%=Session["privilage"]%>';
</script>
then i want to access privilage in my .js file.
i just want to alert this at the moment. would i be able to do this?
thanks
You have to store session Value in HiddenField.
After that You can Access the HiddneFieldValue in your JS
<script type="text/javascript">
document.getElementById('hdnField').value = '<%=Session["privilage"]%>';
</script>
Just use:
var privilage = '<%=Session["privilage"]%>';
or try:
alert(privilage);
It will display your Session value
I use it this way.
<asp:TextBox ID="txtValue" runat="server" CssClass="txtValue" style="display: none;" />
Then I use jQuery to access the value.
<script>
var txtValue = $(".txtValue").val();
</script>
Or even on a control.
<asp:LinkButton ID="lnkPrint" runat="server" CausesValidation="true"
CommandName="Print" CommandArgument='<%# Bind("PrintData") %>'
Text="<img src='/images/print_on.png' onmouseover='cursor: pointer;'
class='PrintButton' />" ToolTip="Print" OnClientClick="if ($('.txtValue').val()
!= '1') { $('.txtValue').val('1'); alert('Warning: Please enable pop-ups for
this site!'); }" />
This method survives ajax and postbacks.
Cheers
use
<script type="text/javascript">
var privilage = '<%=Session["privilage"]%>';
</script>