I did a small style changing app using Jquery in Asp.Net 3.5 .I am having IE7.
When i click on button the paragraph color should change.
Problem is ,the color is changing,it is not stable.Means just like blinking.
Please find the code below
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
$("p").css("background-color", "Yellow")
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<p>This Should be in <br/>
yellow</p>
</div>
</form>
</body>
</html>
Its because ASP.NET changes the ID attribute to be something it can resolve.
If you are using ASP.NET 4, set the ClientIDMode to AutoID.
If you are using anything else, change your selector to use "#<%= Button1.ClientID %>"
Also, return false to prevent the form from being postbacked.
try this :
$("#<%=Button1.ClientID %>").click(function() {
$("p").css("background-color", "Yellow")
});
When the Button renders on the client it won't have id = "Button1"
Change:
$("#Button1").click(function() {
to
$("#<%=Button1.ClientID%>").click(function() {
$("input[id$='Button1']").click(function() {
button click stuff here.
});
Related
This is the sample code that i am learning from w3schools. This time i have given the id too to the button. Please help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn("slower");
$("#div3").fadeIn(3000);
});
});
</script>
<title></title>
</head>
<body>
<h2>Try jQuery</h2>
<br /><button>Click me</button>
<br /><br />
<div id="div1" style="width:80px;height:80px;color:green"></div>
<div id="div2" style="width:80px;height:80px;color:yellow"></div>
<div id="div3" style="width:80px;height:80px;color:blanchedalmond"></div>
</body>
</html>
$("#hide").click(function () ...
this line of code basically means "when an element with id 'hide' is clicked, do something". So your button is missing that id
<button id="hide">Click me</button>
Just copy and paste it. It works. Tested.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-1.11.2.js"></script>-->
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();
});
});
</script>
<title></title>
</head>
<body>
<h2>Try jQuery</h2>
<p>This will get hide</p>
<button id="hide">CLick Me</button>
</body>
</html>
As others have mentioned your script is looking for something with the ID attribute 'hide' as indicated in your jQuery $('#hide').
There are many different ways to select everything in your dom. Have a look at the jquery documentation. http://api.jquery.com/category/selectors/ The simplicity of selecting dom elements is what makes jQuery so powerful in my opinion.
Select by ID:
$('#id')
You can select every even row in a table.
$('table tr:even')
You can select the 14th div element in the dom.
$('div:eq(14)')
You can select all elements with a given class.
$('.class')
Here is a JSfiddle with the code in a working fashion.
http://jsfiddle.net/5v94cnrr/
It looks like the button is ID 'hide' and it will hide all P elements on click. Typically you'd use a class called hide and hide all element with class hide on click of the button or some other action.
You have not set #hide for anything. If you need it on a button, do:
<button id="hide">CLick Me</button>
You want to hide p tag elements on onclick of button.
So firstly, you have to provide id for this button because you are making click function on button.
Try this:
<button id='hide'>Click Me</button>
I have a basic div that I want to .toggle() OnClientClick of an asp:button. It works as far as the code goes but I think that the OnClick event handler on the server side is causing the div to reset after it is clicked. Basically what happens is the div disappears for about .01ms and then reappears right away. Here is the simplest code example of my problem.
Here is an example of what happens:
Default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
function ToggleMe() {
$('#toggleMe').toggle();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="toggleMe">
<label>Hello World</label>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="ToggleMe();"/>
</form>
</body>
</html>
Default.aspx.cs
using System;
namespace WebApplication2
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
int i = 5;
}
}
}
I have tried .removeClass, .addClass, .css... I don't think it's as much an issue with the jQuery that I am using as it is with the postback that happens on the button click.
I am running Chrome to test this if that matters.
Thanks in advance for your time and help!
The javascript part of your HTML executes in the user's browser. The protected void button1_click method executes on the server. What is happening is that the user's browser will toggle the div correctly, causing it to disappear. Unfortunately, the HTML of the ASP.NET button will then resubmit the page, meaning the browser refreshes the HTML from your server. The server has no concept of the toggle happening because the javascript did not execute there, and while int i is set to 5, the div gets re-set to being visible after the page refreshes after going to your server. Your options are:
1) don't use any server side logic for the button click, and get rid of
<asp:Button ID="Button1" ... />
and replace it with
<input type="button" onclick="ToggleMe();">your text</input>
and handle all of your client side logic in your javascript. If you need to set int i = 5 on the server, use JQuery.Ajax to talk back to the server.
2) use only server side .NET to do this. This is implemented like so:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Testing</title>
</head>
<body>
<form id="form1" runat="server">
<div id="toggleMe" runat="server">
<label>Hello World</label>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
And
protected void Button1_Click(object sender, EventArgs e)
{
int i = 5;
toggleMe.Visible = !toggleMe.Visible;
}
when u click the aspx:Button, it submits the page. it is much easier if you use regular html button
<input type="button" onclick="ToggleMe()">Button</input>
and please add a "return false;" statement to your code below
function ToggleMe() {
$('#toggleMe').toggle();
return false;
}
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.
I am assigning some text to Label after button click as follows:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Hello";
}
After some amount of time, say 30seconds, I would like to clear the Label text.
Can any one help me?
I tried the following script, but it doesn't work for me.
$(document).ready(function() {
$('#Label1').fadeOut(3000, function() {
$(this).html(""); //reset the label after fadeout
});
});
My design
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function() {
$('#<%= myLabel.ClientID %>').fadeOut(3000, function() {
$(this).html(""); //reset the label after fadeout
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label id="myLabel" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
</html>
If this is Asp.Net WebApplication I think you should use
$(document).ready(function() {
$('#<%= Label1.ClientID %>').fadeOut(3000, function() {
$(this).html(""); //reset the label after fadeout
});
});
In order to run some code after specified time you need to wrap the code in ready handler in
setTimeout(code, timeInMsAfterWitchToRunCode)
call. What you are doing is fading out immediately over a 3 seconds time. 3000ms that you are passing is parameter to fadeOut function telling it how long fading out should take.
Here you have working example:
http://jsfiddle.net/VPrEZ/3/
Note that in case of ASP.NET app you should use:
$('#<%= Label1.ClientID %>')
to select label. That is because you don't know the id of the control until runtime when control has runat="server" attribute set.
Be warned, that if you don't clear label's text on next postback you will got the same message again with each and every following postback. In my opinion it's better to show label text with client-side code rather to clear it. Or you may just clear label text each time in Page_Load.
i want to include facebook comment box in facebook application built in asp.net
i have already tried facebook comment plugin but somehow it does not work and gives all.jss errors can anyone suggest working sample
for example my current one looks like.
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head runat="server">
<title></title>
<%-- <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript" />--%>
<%-- <script type="text/javascript">
FB.init("163659850382295", "xdreciever.htm");
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div id="fb-root">
</div>
<div class="fb-comments" data-href="http://aspspider.ws/prashantkurlekar/likeTest.aspx"
data-num-posts="10" data-width="500">
</div>
</form>
</body>
</html>
It looks like you are using the original Comments box, which has been replaced by a newer version. I would view the current documentation and see if the errors disappear.