I am using a "user control" which contains a button and other controls. I am using it in an aspx page. I want to diable the button using Javascript. By any chance, is it possible to achieve this?
Thanks
Lijo
I don't really get what you mean by 'disable', but to take it away you get the element in Javascript in an object and use:
element.style.display = "none";
That completely takes it away, to just make it invisible use:
element.style.visiblity = "hidden";
To get the element in an object, the easy way is once you know the value of the id attribute, say it's id="bla", you use
element = document.getElementById("bla");
You can also just use:
document.getElementById("bla").style.display = "none"; // etc
Of course, CSS is far simpler, use:
#bla {display:none;} /* etc, can also be with visiblity */
But I'm not really sure what you mean with 'disable', also, disabling with JavaScript is NOT a form of good security, JavaScript can be turned off, also, the source can be inspected to just work around it.
Edit: Some clarification: display:none; just treats it as if it isn't there at all. visiblity:hidden; makes it completely transparent, but other elements around it are still placed as if it were there.
Don't remove or hide the element as the other answers suggest. Form elements in HTML have a disabled attribute for a reason. With Javascript you would select the button element (however you are selecting elements) and set the disabled property like this:
buttonElement.disabled = true;
To reenable the button:
buttonElement.disabled = false;
Obligatory jQuery:
$(buttonSelector).attr('disabled', true); // Disable
$(buttonSelector).attr('disabled', false); // Enable
If you mean to set the attribute "disabled" it is possible
$(element).attr("disabled", "disabled"); // jQuery
element.setAttribute("disabled", "disabled"); // js
If you really need to remove literally you can use jQuery Remove
$(element).remove();
or do it by hand
var el = document.getElementById(id);
el.parentNode.removeChild(el);
if just hide is enough, I recommend doing this with CSS
Related
I want to make select tags editable on mouse over.
In my view I have few select options. I want to make them editable on mouse hover like this on the picture.
I had success on text fields but options are being a pain. As the options have Id and a Name property. So it should also keep track of Ids when a user makes a selection.
EG:
var ViewModel = {
selectedId = ko.observable(#Model.Id);
availableOptions = ko.observableArray(#Model.Options); // Options have {id, Name}
}
I am a newbie on KO. Anything will be a lot of help.
Thanks
Could not post picture sorry.But you guys get it :-)
I've seen so many posts and examples of people using a DDL placeholder like this...
#Html.DropDownList("lstUsers",(SelectList)ViewBag.UsersList, "--Select User--")
or
#Html.DropDownListFor(u => u.RoleID, Model.RoleList, "Select", new { #id="hi"})
I mean yea these work, but I want the placeholder to disappear after the ddl index changed, and all these do is place dummy text for the 1st index which can then be selected again.
I haven't been able to find an answer for the life of me. I've tried jquery
$("#tb2").attr("placeholder", "--Please Select--"
which works for a textbox, but not a DropDown. I'm using dynamically generated ddl's
Thanks!
That's not how the select element works. That "placeholder" is actually a full-fledged option in the select list. It's value is usually set to an empty string so that if it's still selected on POST, an empty string is posted and will caused an error if the field is expected to have a value. It doesn't just disappear automatically on it's own.
A textbox is entirely different. When placeholder text is placed inside a textbox, it is literally overwritten by user input, hence why it goes away. In HTML5 textboxes now have an actual placeholder attribute, which will show and hide a bit of text based on the focus of the input. The select element has no equivalent, though.
You could potentially do what you want with some additional JavaScript. You would just watch for a change event on the select and if it has a value (not the "placeholder"), then you could remove the first item from the select (which should be the placeholder):
$('#mySelect').on('change', function () {
if ($(this).val() != '') {
var firstChild = $(this).children().eq(0);
if (firstChild.prop('value') == '') firstChild.remove();
}
});
(I'm using jQuery here because doing the same in straight JavaScript would be much more arduous and since you're using ASP.NET MVC, it's a safe bet you're also using jQuery)
I am using MVC-Viewmodel, EF model first on my project.
I have 3 DropDonLista and a few TextBoxes in my View, User can select Values in the DropDownLists and Type inside the TextBoxes. I want that my "Next" button is disabled until values are selected and textboxes are filled then it gets enabled.
How can I easiest way accomplish this?
I've done this kind of things with C# Winforms and its pretty easy but in MVC I have no clue how I can do this.
Thanks in Advance!
You would need to use a client side scripting language like JavaScript. JQuery (a framework to make JavaScript easier to use) is now integrated in to MVC3+, so implementing it is much easier than it has been in the past.
You can target HTML DOM elements (HTML tags in your page, in layman terms) in jquery using "selectors" - i.e. if you want to access a HTML textbox called "test" in your form, and check the value, you can do the following:
var value = $("#test").val();
if(value == '') {
// do something
}
JavaScript syntax is strikingly similar to C#, but it works on the client side (it's processed by the browser), rather than the server.
you can use javascript/jquery to check if values are selected and textboxes are filled then enable the next button.
I have a view, say show.js.erb. And I have a link in another view such that
link_to "MyLink", my_object_path, :remote => true
successfully returns the show.js.erb view. My question is, from within that view, is there any way to access the element that triggered the AJAX call without having to resort to generating an id specific to individual elements a la ...
I want to be able to use this view callback to open a small dialog next to whatever element was clicked on, but I can't seem to find a way to access the triggering element.
I tried using $(this) but that doesn't work.
I'd like to do something along the lines of
$(this).after("some new html here");
My solution was to bind a pre-submit class to the element, in my case a popup modal window. It's a similar solution to the post linked to above in that it uses the pre-submit bindings, but tailored to use classes instead.
In public/javascripts/application.rb:
jQuery(function($) {
$(".poppable").bind("ajax:loading", function() { $(this).addClass("popped"); });
});
Then in my view for the popup content (e.g. app/views/mymodel/popup.js.erb):
var p = $(".poppable.popped");
p.removeClass("popped");
/* Do what I need to with p ... */
If this doesn't look kosher, I'm all ears but it works for now.
I have a page that displays a list with a of elements with a large number of elements, each of which has a boolean property, representing an Enabled and a Disabled state.
I need to provide the user with a link for each list item, and the link text must show the opposite status (so if the item is enabled, the link text must display 'Disable').
When the user clicks the link for a Disabled, the corresponding link text for the item must change to 'Enable' (and vice versa).
I would like to NOT reload the entire list for each click, just the text of the ActionLink itself, so my question is:
Is it possible to update just an ActionLink itself when the user clicks the link, or do I have do handle this using custom javascript?
As far as I remember, you can add HTML attributes to the "a" tag by newing up an anonymous class as the last param on most overloads.
Off the top of my head this can be written like the following:
Html.ActionLink("Name", "Action", "Controller", new { #class = 'updateId' });
(You may be able to do this with an ID which would be preferable over a class - if not just use a unique class name to avoid updating multiple items.)
Then you can use javascript to access the class "updateId" and change the inner html.
In the case of jQuery:
$("a.updateId").html("NewName");
This can be done with a custom user control contained within the element to update. A writeup of the solution can be found here. No custom client-side scripting is necessary.