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

jQuery Click - Doesn't work when page 1st loaded, but works if page is reloaded

I have an issue with the jQuery click function. I am trying to integrate jQuery Mobile Autocomplete into an C# MVC application.
It the following code doesn't work when the page first loads. However, it works if I reload/refresh the page.
HTML:
<ul data-role="listview" class="selectitems" data-filter="true" data-inset="true" data-filter-reveal="true" data-filter-placeholder="Search Ingredients...">
#foreach (var i in Model.ingredientList){
<li data-id="#i.id" data-unit="#i.useUnit.symbol">#i.title</li>
}
</ul>
Script:
<script src="/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
$(document).ready(function () {
$('.selectitems > li').on('click', function () {
$('input[data-type="search"]').val($(this).text());
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
$('#hdnIngredientID').val($(this).data('id'));
$('#txtUseQtyDetails').val($(this).data('unit'));
$('#hdnIngredientTitle').val($(this).text());
$('#txtQty').focus();
});
$('.ui-input-clear').on('tap', function () {
$('#hdnIngredientID').val('');
$('#txtUseQtyDetails').val('');
});
});
Any assistance would be appreciated.
UPDATE:
jQuery-mobile autocomplete hides the list items until user input happens using CSS "display: none;". Would this prevent the click function from being assigned? If so, how do I work around this?
FURTHER UPDATE:
Found that the "live" function is depreciated. Changed it to "on" instead. Unfortunately this didn't fix the problem :-(
Could it be because the "li" items are hidden by CSS when the page is loaded?
I've deployed it here:
http://rar_mobile_dev.runarestaurant.com/Ingredient/Create?recipe_id=15240
(username: test, password: test)

You could try using on() in stead of click.
$(document).on('click', '.selectitems > li', function(){
$('input[data-type="search"]').val($(this).text());
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
$('#hdnIngredientID').val($(this).data('id'));
$('#txtUseQtyDetails').val($(this).data('unit'));
$('#hdnIngredientTitle').val($(this).text());
$('#txtQty').focus();
});

Run a Javascript On Page Load

I would like to know how to run a javascript function on page load.. in my asp.net page. I do not want to do it in from my .cs file OnLoad, I want to keep it in the aspx page if at all possible.
I am new to javascript so any ideas?

<html>
<head>
<script type="text/javascript">
function loadJavaScript()
{
// add code here
}
</script>
</head>
<body onload="loadJavaScript()">
<h1>Java script on load demo</h1>
</body>
</html>
There is a nice example here
or
<script type="text/javascript">
$(document).ready(
function() {
//your code here
});
</script>

Add an onload event to the body html element.
http://www.w3schools.com/jsref/event_body_onload.asp

You can use the HTML body onload event.
or
Use a javascript framework like jQuery and use the $(document).ready() event. .ready()

You can use the RegisterStartupScript to register your javascript snippets from the code behind:
http://msdn.microsoft.com/en-us/library/bb310408.aspx

Jquery not working inside UserControl

i'm facing a problem tryin to execute a simples jquery inside my userControl. This jquery doesn't has anything with the pages that is goin to load my UC.
the code looks like it:
<script type="text/javascript">
function pageLoad(s, e) {
$(document).ready(function() {
tooltip();
});
}
</script>
i tryied to debug using firebug but not even the breakpoint is reach.. by some reason i think that the browser is just ignoring my script.
it's my first ask here.. sry anything.

you need to write just below lines because ready function get fire automatically when page get loaded with all controls
<script type="text/javascript">
$(document).ready(function() {
tooltip();
});
</script>

how about:
<script type="text/javascript">
$(document).ready(function() {
tooltip();
});
</script>