Sorry to bother you again on this problem.
The solution I accepted from James Johnson didn't actually work because, it prevents me from entering any data into the textbox which is not what we want.
We would like to diplays the message as a help info only. In other words, we would just like to advise the the user to tick the checkbox if s/he wishes to receive an email.
Below is what I have come up with based on the reference hel from Rob.
This works. The only assistance I would like to get your help on is to get the message to open up in a a new window. THe sample message I am using is Focus Fire.
Can you please help?
THis is the latest code:
<head>
<style type="text/css">span id='1' {display:none;}</style>
<script type="text/javascript" src="jqueryMsg.js"></script>
</head>
<asp:TextBox ID="chck1" runat="server" Width="75px"></asp:TextBox>
<span id='1'>focus fire</span>
<script type="text/javascript">window.onload = (function () {
try{ $("input:text").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000); });
}catch(e){}});</script>
Add the ClientIDMode-attribute to you text box so that JavaScript can access it via the ID without fiddling with the ctrwhateverstrangeidaspnetproduces:
<asp:TextBox ID="instruct" runat="server" Width="75px" ClientIDMode="static">
And then handle the Click-Event (this example is using jQuery, you can use raw JavaScript as well):
$(document).ready(function() {
$('#instruct').click(function() {
alert('.click()-handler called.');
});
});
You could wrap the textbox in a SPAN, and add a onmouseover event to the span.
<span onmouseover="alert('This is a TextBox');"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></span>
Look into the onFocus() event handler for JavaScript which will execute a provided function when focusing on the desired textbox, as this method will work if the user clicks or tabs to the desired textbox.
Or you can use focus() in jQuery:
$('#instruct').focus(function(){
// Insert desired response here
alert('Your instructions');
});
One way is to add it in your codebehind in the Page Load event such as:
instruct.Attributes.Add("onclick", "yourJavascriptFunction();")
The reason for adding in the Page Load event is added Attributes are lost during postback.
Or you could use the onFocus event instead (in case the user tabs to the textarea instead of clicking on it, I'm assuming you want to display your message then as well):
$('textarea').focus(function(){
alert('hi');
}):
Related
Assume there is a regular html input field
<input id="inputEl" type="text">
When I click on it with my mouse, it starts being 'editable' (an editing line at the beginning starts blinking) - just like every input field.
Using jQuery, I am trying to simulate that so without me clicking on it with mouse, it gets on that editing state.
I have tried:
$('#inputEl').click()
$('#inputEl').keydown()
$('#inputEl').focus()
$('#inputEl').focusin()
$('#inputEl').blur()
$('#inputEl').select()
$('#inputEl').trigger('input')
But none seems to do the trick.
What is the proper way of achieving this?
.focus() would be the correct method here, the problem you are facing could be related to other issues.
At least it is working here
http://jsfiddle.net/KN6rs/
The focus() function doesn't work on console because:
$.focus() not working
I tried
setTimeout(function() { $('.js-search-field').focus() }, 3000); works on SO
$(document).ready(function() {
$('#inputEl').focus();
});
This is your solution. You just need to do it when the DOM is loaded. $(document).ready takes care of that.
Looks like you want to simulate click event. You can do it via jQuery using trigger(), like this:
$("#inputEl").trigger("click");
Here is an example:
$("#inputEl").trigger("click");
function wasClicked() {
console.log('Click event was successfully simulated')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputEl" type="text" onclick="wasClicked()">
Or if you want just to focus on this input, here it is:
$("#inputEl").focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputEl" type="text">
I have a page with a button named "projects",a div id="main"> and a label inside it. The main text of the page is written in the label. When I press the button, the text changes, using the label.text = .. inside the button_Click event inside C#. This is the button:
<asp:Button ID="projects" runat="server" OnClick="projects_Click"/>
What I want to do is to add a fading effect when changing the text. I saw that the easiest way was to use jQuery. I added this:
<head>
<script type='text/javascript'>
$(function () {
$("#projects").click(function (e) {
e.preventDefault();
$('#main').fadeOut(1000);
$("#main").fadeIn(1000);
});
});
</script>
</head>
What happens now is that if I press the projects button, the text only fades out and then it fades in, but it's not changed, projects_Click isn't executed. If I remove e.preventDefault(); , the text changes but there is no fading effect. How can I make them work together? Old text fades out, projects_Click is executed and fadeIn comes into action.
If you can move following part(mentioned in your question) to JS , then it will work..
When I press the button, the text changes, using the label.text = .. inside the button_Click event inside C#.
Lets say that text is XYZ, then you can do it like this.
$(function () {
$("#projects").click(function (e) {
e.preventDefault();
$("#main").html("XYZ");
$('#main').fadeOut(1000);
$("#main").fadeIn(1000);
});
});
And if that is calculated on server side, then move those code block to a webmethod and do a ajax call in .click event and in success handler set text and do animations.
Tutorial for above - http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx
OR
I have one more suggestion .
Define a javascript function in aspx. Like following.
function animate(){
$('#main').fadeOut(1000);
$("#main").fadeIn(1000);
}
In button click handler, after setting label text, use following line to initiate animation on page load ( after page postback / button click event handler completes).
Page.ClientScript.RegisterStartupScript(this.GetType(), "scr", "<script>animate();</script>");
NOTE - you can not simultaneously use server side code to set some text or do preventDefault to set animation in JS. This will make you in catch 22 situation.
The text is too large to be put inside the script.
Since it was made for one key, I eventually had to make it work for every each key on the page.
I did this:
<head>
<script type='text/javascript'>
$(function () {
$('#main').hide;
$("#main").fadeIn(1000);
});
});
</script>
</head>
This function executes every time the page reloads and since this is a one page site with only the main text changing in the middle, it is executed on every button click.
Aspx changes the text, jQuery immediately hides it and it fades it in slowly. There is no fade out, but this method works great also and thinking about it, I like it better.
I've seen a lot of posts on this issue but none of the solutions worked. The following..
<script type="text/javascript">
$(document).ready(function() {
$("a.login_linkedinbutton").click(function(){
$("#signup-form").submit();
return false;
});
});
</script>
is what I have in the body tag of a page. Also in the body is the form, the html of which in IE shows up like this..
<form accept-charset="UTF-8" action="/auth/linkedin" class="well form-inline" id="signup-form" method="post">
<a class="login_linkedinbutton" href="#">Login using Linkedin</a>
</form>
in IE8, when the link within the form is clicked, the jquery is not getting triggered. It's working in Chrome and Firefox. I've tried:
1) Using the live event to bind the click action
2) Moved the jquery out of the page and into rails assets
Any ideas what else to try?
Use <input type="submit" value="Login using Linkedin">
Why create problems by using a non-standard element and then trying to recover from it?
If you want it to LOOK like a link, just style the button. But why do it? It's poor user experience to suggest the user to go to another page while they're submitting a form. Most users avoid clicking links when they have a form filled because they're afraid of loosing what they just typed.
If you insist using the link, you could try this:
var onLinkedInLogin = function(e){
e.preventDefault(); // stops the link processing
$("#signup-form").submit();
// add return false; if you want to stop event propagation also
// equivalent to calling both, e.preventDefault() and e.stopPropagation().
};
$(document).on('click', 'a.login_linkedinbutton', onLinkedInLogin);
The reason I'm suggesting using .on() instead on .click() is that I guess that on IE, the a.login_linkedinbutton is not present in the DOM when you call the .click().
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.
Probably a simple noob error but I cannot figure it out. I have a submit button and after the user clicks it I want it to disappear and be replaced with "Thanks for submitting your info".
Here's what I have:
<script>
$(document).ready(function() {
$('#emailsubmit').onClick(function() {
$(this).replaceWith('<p>Thanks for signing up!</p>');
)};
)};
</script>
<input id="emailsubmit" name="submit" type="submit" value="Send " />
Looks ok to me, but on click, nothing happens. Any advice would be greatly appreciated.
The name of the function is click, not onClick, and you have a couple of syntax errors to boot.
$(document).ready(function() {
$('#emailsubmit').click(function() {
$(this).replaceWith('<p>Thanks for signing up!</p>');
});
});
You best use click instead of onClick
You're confusing inline, DOM-zero events (onClick) with jQuery's alias event methods.
jQuery has a click method (short for on('click...) but no onClick() method. This would throw an error, meaning you should always consult your browser console before anything else.
$('#emailsubmit').on('click', function() {...
The method is named click not onClick.
Also, removing the submit button will keep the form from being posted. Hide it instead:
$(this).hide().after('<p>Thanks for signing up!</p>');