I created ASP.NET user control with javascript function :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="TestControl.ascx.cs" Inherits="BingTranslator.Web.WebUserControl1" %>
<script type="text/javascript">
function example() {
alert('<%=ExampleButton.ClientID%>');
return false;
}
</script>
<asp:Button ID="ExampleButton" runat="server" Text="Example"/>
I want to call "example" function when user move mouse to button, so I added attribute for button:
ExampleButton.Attributes.Add("onmouseover", "example()");
It works well, but when I need two controls on same page I got a problems. ASP.NET generates code with two functions with same name, what is wrong:
<script type="text/javascript">
function example() {
alert('TestControl1_ExampleButton');
return false;
}
</script>
<input type="submit" name="TestControl1$ExampleButton" value="Example" id="TestControl1_ExampleButton" onmouseover="example()" />
<script type="text/javascript">
function example() {
alert('TestControl2_ExampleButton');
return false;
}
</script>
<input type="submit" name="TestControl2$ExampleButton" value="Example" id="TestControl2_ExampleButton" onmouseover="example()" />
And always onmouseover event on any button will call second function. I am able resolve this issue by adding java script code with client Id directly to attriburte onmouseover.
ExampleButton.Attributes.Add("onmouseover", "[Here will be javascript code]");
But it is not very harmonious solution as for me. Please advise, how I can better resolve such issue.
P.S. There will be much more Javascript code, I added two string upper just for example.
I found a solution in another site which allows you to use external file
if (!Page.ClientScript.IsClientScriptIncludeRegistered("key"))
{
string url = ResolveClientUrl("~/Scripts/file.js");
Page.ClientScript.RegisterClientScriptInclude("key", url);
}
You need to register your scripts with ClientScriptManager - this way they can be registered once, regardless of how often the control has been added to the page:
// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;
// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
String cstext1 = "alert('Hello World');";
cs.RegisterStartupScript(cstype, csname1, cstext1, true);
}
You need to use this.id
$(document).ready(function () {
load_v<%= this.ID %>
});
function load_v<%= this.ID %>(fromclick) {
alert('anything');
}
So that even if you need two or more same controls in the same page they will have different ids.
Hope this Helps! cheers :)
Related
I have a label whose id is lblppb and have assigned an IMG tag as a string as below:
lblppb.Text = "<a href='//media.mercola.com/themes/mercola/images/view-all-health-topics.jpg' target='_blank' id='BannerLink1'><img alt='Banner' src='../Desert.jpg' height='250' width='300'onclick='alert('Hello..!!')'></a>";
This label is in div and it is showing the specified image from src, but when i click on that image i want to generate an alert...
HELP..!
THanks in advance..
They seems to be no space between the image width and the onlick event call
width='300'onclick='alert('Hello..!!')'. You have to space them as per below and then try it again.
width='300' onclick='alert('Hello..!!')'
Alternatively, since your are curious in displaying pop alert message. the the code below should get you going
<html><head>
<script type="text/javascript">
<!--
function validate()
{
alert( "Please provide your Profile Picture!" );
return( true );
}
</script>
</head><body>
lblppb.Text = "<a href='//media.mercola.com/themes/mercola/images/view-all-health-topics.jpg' target='_blank' id='BannerLink1'>
<img alt='Banner' src='../Desert.jpg' height='250' width='300' onclick="return(validate());"></a>";
</body></html>
Give me a shout if you still need further help. Sectona...
First of all I always prefer to use external script rather using static inline scripts. Inline scripts are less maintainable and in case of testing it becomes worst. But when you switch to external script it gives you the reliability to have your code in a separate module that is much more testable.
If you have option to modify your img tag I would surely tell you to do as follows :
Add id attribute in your img and keep everything same. I have named it(id) bannerImg
lblppb.Text = "<a href='http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg' target='_blank' id='BannerLink1'><img alt='Banner' id='bannerImg' src='https://lh5.googleusercontent.com/-WsZ4Q7Y156A/AAAAAAAAAAI/AAAAAAAAABM/vN1-gy0xZQU/photo.jpg' height='250' width='300'></a>";
Now add the following script in your page's head section or any external .js file,
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#bannerImg").click(function () {
alert("Hello..!!");
});
});
</script>
Note : Remember you must include jQuery before using the script.
Or,
when onclick event is fired, call a function and get your stuff done.
<script type="text/javascript">
function alertMe() {
alert("Hello....!!!!");
}
</script>
lblppb.Text = "<a href='http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg' target='_blank' id='BannerLink1'><img alt='Banner' id='bannerImg' src='https://lh5.googleusercontent.com/-WsZ4Q7Y156A/AAAAAAAAAAI/AAAAAAAAABM/vN1-gy0xZQU/photo.jpg' height='250' width='800' onclick='alertMe();'></a>";
I am having a user control file without its codebehind file in dotnentnuke.
In which i have put a form in which i have one textbox and one Linkbutton.
I want to pass that textbox's value when i press the button as querystring to access it in another page.
For that i have written following code but it does not work.
<asp:TextBox ID="txtemail" runat="server" class="txtbox" placeholder="Enter Email Here"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" class="lbsubscrb" runat="server"
PostBackUrl="~/Portals/_default/Skins/Gravity/Dummy.aspx?add=<% txtemail.Text %>"
ForeColor="White">SUBSCRIBE</asp:LinkButton>
All answers are appreciated...
It sounds like you really just need your own custom module, instead of trying to take an existing module, without the source code, and make it do something completely different?
That being said, if you really want to take that existing module and make it do that, jQuery is likely going to be your method of choice.
Basically you wan to hijack the click event for the button and send it elsewhere, something along the lines of the following code. I actually wrote most of this last night for another module I was working on (newsletter subscriptions, by the way) but have removed some of my logic to make it simpler for what you are trying to do
EDIT: replaced the txtbox class below to match your textbox's class
<script language="javascript" type="text/javascript">
/*globals jQuery, window, Sys */
(function ($, Sys) {
$(document).ready(function () {
var originalHref = $('.lbsubscrb a').attr('href');
$('.lbsubscrb a').removeAttr("href");
$('.txtbox').focus(function () {
if($('.txtbox').val().indexOf('#')<1)
$('.txtbox').val('');
});
$('.txtbox').bind("keypress", function (e) {
if (e.keyCode == 13) {
$('.lbsubscrb a').click();
}
});
$('.lbsubscrb a').click(function () {
//check if they hit enter in the textbox and submit the form
if (validateEmail($('.txtbox').val())) {
//
//TODO: Add your jquery for the redirect call here.
//
//uncomment this line to actually use the original submit functionality
//eval(originalHref.replace('javascript:', ''));
//if postback is wanted uncomment next line
//$('.lbsubscrb a').removeAttr("href");
} else {
alert('something wrong with your email');
}
});
});
}(jQuery, window.Sys));
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>
I have a FB login button and want to bind it to a function but I can't seem to get it work:
<div class="fb-login-button" id="auth-loginlink"></div>
This is the line that I am trying to bind it to my fb-login-button
$("#auth-loginlink").click(function () { grantPermission(); });
<script type="text/javascript">
function grantPermission() {
window.FB.login(function (response) {
// ... login stuffs
}
</script>
It will work if I use a normal hyper link like:
Login
Please kindly advice what am I doing wrong. Thanks.
If it's really a button might as well use the button tag:
<button class="fb-login-button" id="auth-loginlink">Login</button>
Put your javascript inside the script tag, and return false in the handler:
<script type="text/javascript">
$("#auth-loginlink").click(function () { grantPermission(); return false; });
function grantPermission() {
window.FB.login(function (response) {
// ... login stuffs
}
</script>
... also might be a good idea to do $("#auth-loginlink").button() but not totally necessary.
Note: If your html is actually below your javascript code the above will not always work.
I am using a javascript to zoom an image on my asp.net web page. I want to put 2 buttons on it like "Zoom" "Cancel Zoom" and accordingly activate/deactivate the javascript functionality. Right now I have a css class on which the javascript operated to produces the zoom effect. The image is like:
<a id="big" href="source of image" class"classforzoom">
<img id="small" src="some small image on page" />
</a>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some code here
};
$(".jqzoom").jqzoom(options);
});
</script>
How do I programmatically do this on the onClick events on the 2 buttons?
This is what I am using in the head tag of my page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Related toggleclass() method:
toggleClass: function(F,E) {
if(typeof E!=="boolean") {
E = !o.className.has(this,F)
}
o.className[E?"add":"remove"](this,F)
}
Deactivate
$("a#cancelzoom").click(function(event)
{
$('.classforzoom').unbind();
event.preventDefault();
});
Activate
$("a#zoom").click(function(event)
{
$('.classforzoom').jqzoom(options);
$('.classforzoom').bind();
event.preventDefault();
});
Did you check out the jQuery click method and then use the unbind method to remove an event from an object?
Also since you say you are using a css class for the zoom effect check out the toggleClass() method.
I have inline script such as this, which toggles between an edit and a display divs. If it is inside the the UpdatePanel it requires two click before it works. If I remove the UpdatePanel it works fine with a single click.
Edit
Can anyone help please?
Thanks
EDIT:
Edit function:
function edit(e, id) {
var editdiv = $('#' + id).find('.edit');
var cntdiv = $('#' + id).find('.content');
if (editdiv.css('visibility') == 'hidden') {
editdiv.css('visibility') == 'visible'
cntdiv.css('visibility') == 'hidden'
cntdiv.hide();
editbox.show()
}
else {
editdiv.css('visibility') == 'hidden'
cntdiv.css('visibility') == 'visible'
cntbox.show();
editbox.hide()
}
stopEventBubble(e); // Code to cancel event bubbling;
}
Are you using the ScriptManager to register the edit function?
protected void Page_Load(object sender, EventArgs e)
{
string jsEdit = #"function edit(event, id) {}";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "editFunction", jsEdit);
}
If your code is in an external file, you can register it with the ScriptManager or the ScriptManagerProxy in the aspx for your page:
<ScriptManager runat="server" id="ScriptManager1">
<Scripts>
<asp:ScriptReference path="~/js/edit.js" />
</Scripts>
</asp:ScriptManager>
EDIT:
alright, I know what the issue is now. You aren't setting the css visibility to begin with. So either you need to set the css visibility or you can modify your edit function to follow the following logic:
function edit(e, id) {
var editdiv = $('#' + id).find('.edit');
var cntdiv = $('#' + id).find('.content');
//I reversed it to look for visible instead of hidden. The main problem with this approach and your other approach is that the original value is inherited.
if (editdiv.css('visibility') == 'visible') {
editdiv.css('visibility') == 'hidden'
cntdiv.css('visibility') == 'visible'
cntbox.show();
editbox.hide()
}
else {
editdiv.css('visibility') == 'visible'
cntdiv.css('visibility') == 'hidden'
cntdiv.hide();
editbox.show()
}
stopEventBubble(e); // Code to cancel event bubbling;
}
The other option will require you to set the following in you "edit" and "content" divs.
<div id="edit" style="visibility:hidden"> ... </div>
<div id="content" style="visibility:visible"> ... </div>
If you need further help, I'll need to see your aspx code concerning the UpdatePanel, edit, and content.
Try this:
Edit
Edit
As Chris said:
If you are injecting the function when you click the Edit link the function won't exist the first time you click an Edit link.
What you could do is add the function inside a <script> tag in the <head> section of the markup:
<head>
<script>
function edit(event, id) {
// Your code here
}
</script>
</head>
Or in a separate .js file.