I have a little problem. I have a select of an html page, when I select it often happens that the selection of the mouse remains locked and when I move my mouse I select all the content of the page.
How can I avoid this?
I have a table that contains the rows and cells.
In the cell I have a DropDownList that load on the server (I'm using ASP.NET) unseen. The DDL is rendered in an HTML Select.
When I click the cell with iquery.show () I display the select and to make it selectable I jquery.focus ().
When I click the select button to bring out the option, sometimes (not always) the mouse I select all in the browser.
On the page I have some javascript functions
$(".ddlClassAttivita").on("click", (function (events) {
//Mycode
}));
$(".ddlClassAttivita").on("change", (function (events) {
//Mycode
}));
I apologize for the English but I'm using translate
Related
I am looking for a solution for my website. I have a form where a customer selects their device (eg iPhone 6s, Samsung GS6), but I would then like the data from that drop down box to transfer over to the next drop down box so they can select an available repair. If you need an example, go to my website (www.warerepair.uk/booking.html)
Looks like you want cascading drop-down then in that case you have to on first drop-down change event get first's drop-down selected value and using that value load second drop down.
Please see the below code
$('#firstDropdownID').on('change', function () {
var searchVal = ($(this).find('option:selected').val());
//Using this searchval load your second dropdown
});
I had a gridview in a webform, with javascript for scrolling the selected item into view; worked fine.
Then I moved the gridview to a user control, got it to work except for the scroll into view.
Here's how the scrollintoview works, or used to work.
On gridview.itemselected, a unique value from the selected row is stored in a hidden field.
$(document).ready on the main page calls a javascript "scrollintoview" function.
The scrollintoview function gets the value from the hidden field, finds that value in the gridview, identifies the vertical location of that value, does a scroll to the appropriate vertical position, and sets the background-color of the gridview row to light yellow.
Again, that worked fine when the gridview was in the main form.
Now, with the gridview in the user control, the javascript executes correctly (I can watch it during debug), but when the gridview appears on the page, it has not scrolled.
So, maybe somewhere in the sequence of events, the gridview is being rendered after the scrollintoview has taken place?
Any suggestions on how to get this to work would be appreciated. Thanks!
This can be tricky. The way I've done it is to place the gridview in a div which looks like this:
Then in function setScrollValue the hiddenfield value is set to divGvMD.scrollTop.
When the page refreshes divGvMD.scrollTop is set to the hiddenfield value.
I have a rich:datatable in which every row contains a selectOneCheckbox. A javascript function is bound to checkboxes and deselects the current selected checkbox when another one is checked (so, only a checkbox per time can be checked within a page). The datatable uses a rich:datascroller for scrolling through result pages.
How can I deselect a row before scrolling to another page?
Example: I am at page 1 and select the checkbox for row1, then I press "3" on the scrollbar: the selection for row1 remains, but I would like to remove it before showing page 3*strong text*.
Thanks! :)
The rich:datascroller tag has an "onclick" attribute where you can make a call to your js function:
<rich:datascroller id="myscroller" onclick="unselectCombos()" />
I think this will work.
$("#county_id").change(function() {
$("#vice_county_id").html("<option value=\"\">-- Select One --</option>");
var co_id = $(this).val();
if(co_id != 0) {
$.getJSON('./php/includes/vice_county_web_service.php?co_id=' + co_id,function(data) {
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
});
});
}
});
Hi Guys,
I have the above code for loading options in one drop down based on the selection in another. It works fine but to finish this up I am trying to get it to be sticky. I.e. if the form is posted and county has a value already selected then the vice county pre loads with the relevant options. Basically fire the .change functionality on load. I have tried the .load and triggerhandler functionality but it does not seem to work. Any Ideas?? Thanks.
As far as I am aware, in order to prepopulate a form, you'll need to use server-side code. You say that the user posts his code somewhere, but you don't say how the form post is being handled.
I use ASP.net where I work, so I would have a server-side property for the value of each drop-down list. Then, when the page renders, I print the value of the property to my JavaScript code. You'll need to make your JavaScript code add the attribute selected='selected' to the option that you want to be selected when the page loads.
Update:
It sounds like you're saying that you select drop-down 1, and then the options for drop-down 2 are automatically populated. It sounds like the problem is that drop-down 2 cannot be preserved after the postback because its options are populated after the page loads (via AJAX). I believe that the solution to your problem is going to be to set the selected attribute inside code that runs when you successfully get the drop-down options via AJAX.
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
//Check if the option being added was previously selected.
});
Use the Cookies to store the value of the drop down change event.
and when the form loads use the same cookie to retrieve the value and display the user what ever he selected.
But maintaining cookie for this task is not recommeneded.
You can use the JSTL if its a JSP page.
Cookie creating guidlines
http://www.quirksmode.org/js/cookies.html
I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax