How can I get the control ID of a asp.net control while mouseover on a control dynamically. For example, I've page called "Default.aspx" which has 5 text boxes, two check boxes, 2 radio buttons. So, when I mouseover a specific control I should be able to get the currently hovered controls ID using javascript or jquery. I dont want to write code for every control, instead the javascript should be able to detect the mouseover event when the mouse is moved over any control and in the backend the controld ID should be returned.
Any solution ?
$("input").mouseenter(function(e){
e.stopPropagation();
$id=$(this).attr("id");
});
this will return the id of input control currently being hovered
I chuckle a bit when jQuery developers use jQuery in their handler function when it's the long way to get the answer. Here's a shorter/faster way:
$("input").mouseenter(function(e){
var id = this.id;
// do whatever you want with the id here
});
If you're truly trying to pass this to your back-end web server (a part of your question that was not clear to me), then you will need to initiate communications to the web server either using a posted form or an ajax call.
This might not be the best practices way, but I would set the onmouseover event to trigger a function that sets the value of a hidden field. In your JQuery read the value of that field and you will know which one they did the mouseover on...
$("input").hover(function(){
// hover on
var theId = $(this).attr("id");
if(theId) {
// do something
}
else {
// no id found
}
},
function(){
// hover off
});
I suppose you won't need to check if an id exists since it's a .NET control though
Related
I am wondering is there any solution to change or update the URL's query string part (visible in the browser's address bar) with some new values by clicking on some checkboxes through JavaScript or Jquery. I want to do this without any jQuery plugin.
When the user will click on any checkbox in a group then the data will be fetched from the database based on the user's selected value of checkbox. Along with it, the query string of URL will also be changed with new updated value. Note that the page will never be reloaded in this whole procedure. We can run through AJAX when checkbox is checked. How we can achieve this? A demo will be very much appreciated.
Yeah, this is a very common thing to do. window.replaceState is the function you're looking for. Alternatively you could also use pushState if you want to allow the user to be able to go back to the previous state of checkboxes, but that's more work and not always expected.
Then again, you actually need something to change one URL into another. Manipulating the URL as string is counter productive, so instead you can use a library like URI.js.
Use window.history like so :
window.history.pushState('page2', 'Title', '/new-uri');
For your case , you will have 2 nested functions: Event Listener which contains AJAX call + Callback of this ajax call :
$('[input]').change(function(){
if(this.checked){
//AJAX
$.get("URL",{},function(data){
//AJAX - Callback
window.history.pushState('page2', data.title, data.url);
});
}
});
I'm using jQuery Mobile enhanced GWT and have a checkbox. But when I set the GWT checkbox using a normal check.setValue(false); it sets the value, but does not change the jQM enhanced display.
I have tried various combinations of refresh and prop/attr but they all seem to either do nothing at all or fail with a message saying it's not initialised.
The code is various variants of $('input[name="gwt-debug-cwCheckBoxMonday"]').prop("checked", true).checkboxradio('refresh');
I gout it to work using $("input[type='checkbox']").checkboxradio("refresh"); but I want to only do it for a specific one, not every one.
I made a fiddle at http://jsfiddle.net/liftarn/38uch/ to illustrate the problem.
The HTML is from http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCheckBox
It is a bit tricky. First you have to get the input element. One way to do it is (where w is your CheckBox):
NodeList<Element> nl = w.getElement().getElementsByTagName("input");
Element e = nl.getItem(0);
Now you have the input element and can get the id using getId()
Then you just make a native function taking the id and the boolean value and do
$wnd.$("#" + id).prop("checked", false).checkboxradio("refresh");
This is a goofy question, so sorry about that.
I'm creating html elements dynamically from an ASP.NET server control. After an element is created, or all of the elments are created, is there a way to force an event to fire on one of them? I understand that it's coming from the server to the client, but I'm looking for a way around that. Is there anything in the document that can listen for html being added or anything?
I'm creating the controls like this:
protected override void RenderContents(HtmlTextWriter output)
{
// htmlString is a dynamically built string of html
output.Write(htmlString);
}
The elements are a series of cascading drop-downs of which the user has the ability to save the selected value. So, if I select the value of the item when I create it, there's no way to kick off the event, which calls out to the database for data to fill its dependent control. There's a "no postbacks" rule here (not my rule).
Any help would be appreciated.
You can output javascript as part of the rendering and bind events to the dynamically created controls.
jQuery makes binding events very easy.
If you want, fire a Function() from RegisterClientScriptBlock()
Example useage:
ClientScript.RegisterClientScriptBlock(GetType(), "sas", "<script> alert('Inserted successfully');</script>", false);
Or you can set up a live event on click etc on those new items.
$(document).on('click', '#exampleThing', function () {
// what you want to do
});
I have several field
$("#a1").change(function(){
console.log('fire'); });
but when value change not user event not work
form[0].val = 100;
event not work
how can i catch this change data ?
ps data changes from different places not my code suggestions like trigger('change') not good idea
I do not think that events will fire when you set the value in that fashion.
Does it work when you set the value of the element in the browser?
What you can do is call form[0].change(), and it should work.
Changing the value property will not fire the change event.
In fact, your code should be changing value and not val.
You could call it explicitly after updating it.
form[0].value = 100;
form.change();
But you mention that is not an option.
The only other way is to poll for changes.
You could define a way of working with the controls inside your form. Create a javascript function that external developers can call to set the value of a given field and make them use that method. Then you can fire change or do whatever you want to your hearts content.
I have a form and it has 4 input elements. if the user enters just two entries and clicks anywhere on the screen (out the form)...i would like to save the details..it is like auto-save.
I have id of my form..i want to compare with form id of the current control on the screen..so that i can ssave the data if both form ids are different..
could you please tell me how can i get the form id of current control location on screen (some times the control could be outside the forms..in that case form id of current cotrol location would null)... but how can i determine that in javascript.
please suggest...
Many Thanks in advance,
Jack.
That's an interesting question.
Well, if you didn't think a second (as I admittedly did), you would just hook on the blur event of the HTML <form> element in question.
<form onblur="autosave(this)">
However, the HTML <form> element doesn't support that event. Too bad.
I then thought about jQuery's new 1.4 focusout() event.
$('form').focusout(function() { autosave(this); });
Unfortunately that event get fired as well when you just jump (tab, click) to the next input field inside the same form. Not so nice, it'll probably be too expensive to autosave on every fieldjump. The same effect as with an $(':input').blur(function() { autosave(this.form); });.
I then tried the other way round using focusin():
$('form').focusin(function() {
$(this).addClass('focused');
});
$(':not(form)').focusin(function(e) {
if (!$(e.target).parents('form.focused').length) {
var form = $('form.focused').removeClass('focused');
autosave(form);
}
});
Strangely enough this works in IE only and not in the other browsers. It'll be another IE bug/quirk that focus is supported by all elements other than input elements.
Your best bet will probably be hooking on the click() event instead.
$('form').focusin(function() {
$(this).addClass('focused');
});
$(':not(form)').click(function(e) {
if (!$(e.target).parents('form.focused').length) {
var form = $('form.focused').removeClass('focused');
autosave(form);
}
});
This works fine. You can find here a live demo.
Note that I don't mean to push you jQuery (a JS library which insanely eases HTML DOM traversion and manipulation) through your throat or so, but I don't see nice ways in plain JavaScript to achieve this without writing 10 times as much as code here.