Develop Reference

How to add jquery to asp.net page and format gridview columns

I have seen multiple articles/questions about formatting a gridview rows using jquery.
However consider this my first attempt to write a jquery and use it in an asp.net page.
I manage to do the following, but it doesn't do anything to the gridview. What have I done wrong?
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
Within body section, after GridView1 is created:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#<%=GridView1.ClientID%> td:nth-child(odd)").css("background-color", "#FFCCCC");
$("#<%=GridView1.ClientID%> td:nth-child(even)").css("background-color", "#99CCFF");
});
</script>
I also have this jquery saved as jqueryColumnColours.js in the scripts folder. So the second question, how can I use .js file without really writing the above function within aspx page?
EDIT:
$(document).ready(function () {
$("#GridView1 td:nth-child(odd)").css("background-color", "#FFCCCC");
$("#GridView1 td:nth-child(even)").css("background-color", "#99CCFF");
});

Include the latest jquery like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
and add the script tag just before closing body section,
</form>
<script type="text/javascript">
$("#grid td:nth-child(odd)").css("background-color", "Tan");
</script>
</body>
I hope it helps!!!
EDIT by bonCodigo:
The only change that works for my page was having http:// instead of //
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>

call the jquery function in c# using javascript

Java script code:
<script type="text/javascript">
$(document).ready(function () {
$("#visualization").css('display', 'none');
});
</script>
<script type="text/javascript">
$('#info a').click(function drawVisualization() {
$("#visualization").css('display', 'block');
});
</script>
On load i am hidden the div and i want show the div by clicking the button
asp.net code:
<asp:Button ID="Button1" runat="server" Text="Button"
onclick='blue' />
c# CODE:
protected void blue(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
string.Format("<script type=\"text/javascript\">drawVisualization();</script>"));
}
i am fairly new to the coding;can anyone help me to solve this issue. After invisibling i am not able to show the visualization(div)

There's a much easier way to do this, which doesn't involve an entirely unnecessary post-back to the server. Something like this:
$('#<%= Button1.ClientID %>').click(function () {
$("#visualization").show();
});
This would assign a JavaScript click handler to the client-side rendered output of Button1. Of course, Button1 still causes a post-back, but since it doesn't need to do anything server-side it doesn't even need to be a server-side control. Make it something like this:
<input type="button" id="button1" value="Button" />
Then adjust the jQuery selector to use the client-side id:
$('#button1').click(function () {
$("#visualization").show();
});
If all you're doing is showing/hiding page elements, and you're already using JavaScript to do it, server-side code is entirely unnecessary.

you can use it like
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","$('#visualization').css('display', 'block');",true);

<asp:Button ID="Button1" runat="server" Text="Button"
onclick='display()' />
<script>
function display()
{
$("#visualization").show();
}
</script>

$(document).ready(function () {
$("#visualization").css('display', 'none');
$('#Button1').click(function(){
$("#visualization").css('display', 'block');
});
});

I would just do it all on the client. Something like this would work.
$("#Button1").on("click", function(e){
$("#visualization").show();
});
If there's no reason to do a postback, you can do e.preventDefault(); after the call to .show();

Instead of Creating a Button OnClick event you can write a simple jquery or javascript to get the desired output
There are various ways to solve the above problem.
1)You can write OnClientClick attribute of Button control in asp.net and pass the value as
the javascript function name that you have created in the above code as drawVisualization()
and another important thing is that you will have to remove the runat="server" attribute because it causes the postback(means your page again reloads which will cause the div to hide)
2)You can create a jquery button click event
for eg:
First of all just create a simple function
function drawVisualization() {
$("#visualization").css('display', 'block');
});
and then the button click event
$('#button1').on( "click", function() {
drawVisualization(); //call the function that you have created to show the desired output
});

Accessing Asp.Net Session variables in JS

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>

How to get input id of datepicker in c#?

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' });
});

How can I use C# code in asp.net to pass a parameter to a JavaScript function?

<% string s=LinkButton_ID.Text; %>
<asp:LinkButton ID="LinkButton_ID" runat="server" Text="LinkButton_Text" onclientclick="JscriptFunction(...)">
</asp:LinkButton>
I want to send the "s" as parameter to JscriptFunction. I try JscriptFunction(<% s %>); but doesnt work. Do you have any suggestions? thank you

Try this:
JscriptFunction('<%= s %>');
Don't forget to quote the text value in your JS function call.
EDIT:
I didn't notice that your call to JscriptFunction is inside your server tag. If you don't have access to jQuery, the easiest way to pass the client-side text of the button is probably this:
onclientclick="JscriptFunction(this.innerHTML)"
Here's an example working on jsFiddle.
You can also pass the client-side ID of the control and manipulate the value using JavaScript. Make sure you have ClientIDMode="Predictable" or ClientIDMode="Static" set on the control if you do it this way.

You'll need to declare your code section to be javascript, and then you need to output the asp.net/c# value as a string. The easiest way is something like:
<script type="text/javascript">
var s = <% Response.write(LinkButton_ID.Text); %>;
//do your other javascript stuff
</script>
or
<script type="text/javascript">
var s = <%= LinkButton_ID.Text %>;
//do your other javascript stuff
</script>
If you needed to do more logic around this, you could also stick a literal control there and output to it in the code-behind:
<script type="text/javascript">
var s = <asp:literal id="litMyValue" runat="server">;
//do your other javascript stuff
</script>

Simple way u can pass/ instead you can use it in the function itself
like
<script>
function JscriptFunction()
{
var s = <%= LinkButton_ID.Text %>;
// do what you want here.
}
</script>
<asp:LinkButton ID="LinkButton_ID" runat="server" Text="LinkButton_Text" onclientclick="JscriptFunction();"></asp:LinkButton>