I want to be able to create modal dialogs, with, for example
close: function() {
$(this).remove();
}
default option, without need to specify those on dialog creation, but somehow override those parameters on one place.
Is this possible?
I, too, needed to override default options and took me a while to figure out for jQuery UI 1.8:
$.extend($.ui.dialog.prototype.options, {
modal: true,
resizable: false,
draggable: false
});
The above code will allow you to drop anything on top of the dialog options. The above method should work for most UI components (it will also let you prototype over the functions that exist, or add to).
You should create an abstration that calls the jQuery dialog function then.
Basically, instead of creating the options literal everyplace you want to use the jQuery dialog, create a function which creates the options that you want and then call the jQuery dialog function from that.
Then, in all areas of your code, call the function you wrote that encapsulated the code.
This process is known as encapsulation and applies to most (if not all) software development languages. One of the major benefits is that it makes your code easier to maintain.
Dialog and other widgets in jQuery UI define a hash with their default values. You can override these after jQuery UI has been loaded.
Search through the javascript for the line where the defaults are set:
$.extend($.ui.dialog, {
version: "1.7.2",
defaults: {
...
As an example, in your javascript, you can turn autoOpen off with:
$.ui.dialog.defaults.autoOpen = false;
Or you can merge a hash of options:
$.extend($.ui.dialog.defaults, {
autoOpen: false,
title: 'Default title'
})
Related
i have the DatePickerFor and i want to make it readonly I want to force user to pick dates ,not being able to type them.
<td>#(Html.Kendo().DatePickerFor(model => model.DateRecherche).Max(DateTime.Today))</td>
Thanks.
Is it in their docs:
//DISABLE inputs
$("#datepicker").attr("readonly", true);
$("#monthpicker").attr("readonly", true);
So you will need a little bit of javascript along with your view code to implement this behavior
Adding the attribute readonly to an input tag will make it read only. You can do this with jQuery like this:
$(function () {
$('.k-datepicker input').attr('readonly', 'true');
});
Sorry to ask such a basic question on JQuery mobile, but I am not so clear.
With a single page model (split an app into multiple pages), all scripts are loaded at the landing page. However, UI elements (e.g. buttons) may not appear until several pages deep into the clicks. Where and how do I bind event that are not yet loaded? Or how do I bind event as the pages are loaded? $(document).bind("pagecreate", function(){}) is just going to run on landing page, but I suppose I need to bind after the widgets have appeared.
I bind it like this:
$(document).bind("pagecreate", function(event, data) {
$('#btn_newuser2').on('vclick', function(event) {
// do something here.
});
});
You are safe binding event handlers for all DOM elements in the pagecreate event, if you use delegation:
$(document).on("click", "#my_button", function()
{
// handler
});
In this example the click event is binded to the whole document, but the second parameter is a selector for a child element. As stated in the docs:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future
I'm trying to dynamically add checkbox and label elements to the document. Checkbox element has Knockout's data-bind attribute to bind its value to an observable value in the ViewModel. However when I try to style the checkboxes with jQuery Mobile by executing
$('input[type="checkbox"]').checkboxradio();
data-bind attributes will be removed. If I leave out the above line, data-bind attributes are properly set and the binding works.
Is there a way to have both jQuery Mobile styling and Knockout bindings at the same time?
I'm using jQuery Mobile RC1 and Knockout 1.2.1.
I have also encountered this problem. Unfortunately, all the suggestions here either did not work for me or had other issues. So I have created a simple custom binding that works in all versions of KO (including the latest v3):
ko.bindingHandlers.jqmChecked = {
init: ko.bindingHandlers.checked.init,
update: function (element, valueAccessor) {
//KO v3 and previous versions of KO handle this differently
//KO v3 does not use 'update' for 'checked' binding
if (ko.bindingHandlers.checked.update)
ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
else
ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates
if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
$(element).checkboxradio('refresh');
}
};
Should be used like this:
<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>
See a complete working example here:
http://jsfiddle.net/srgstm/ub6sq/
See: https://gist.github.com/1006808
Then you can do something like the following:
var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
your options..
});
Hope this'll help!
There is a problem with using knockouts default checked binding with styled objects like jQuery mobile does. It has the same issues that jQueryUi's Button/Buttonset functions. There is a label over the checkbox that indicates what is happening and it doesn't get updated properly via standard knockout checked binding.
It is discussed at http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.
To use knockout directly with these styled objects from jQuery Mobile, the demonstrated code will have to be modified to handle the different DOM context. I'll post an update to the code when I can get some free time to do it.
EDIT
In Google Groups - Knockout, luv2hike posted a solution. You can see it working at http://jsfiddle.net/luv2hike/nrJBC/. Looks like a working fix for your problem.
I created a simple binding that works with jQuery Mobile 1.2.0 and Knockout 2.2.1 and works with default jQuery mobile checkboxes. This binding has no dependency on custom icons or JQuery Mobile's CSS styles. It also allows the use of regular checkbox markup in your HTML (<input type="checkbox" ... />) as opposed to using an alternate markup element like a div.
Here's the fiddle: http://jsfiddle.net/thedude458/52baX/
Note: Presently, the example only supports a single checkbox, not a list, as that is all I currently have a need for. It also assumes that the bound property is an observable.
Here is my heavily commented code on a custom handler I built for jQueryMobile checkboxes:
ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {
// set the dom element to a checkbox and initialize it (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio();
checkbox.attr('type', 'checkbox');
// register change event to update the model on changes to the dom
ko.utils.registerEventHandler(element, "change", function() {
valueAccessor()(
// off because it is before the ui has refreshed
$(this).siblings('label.ui-checkbox-off').length > 0
);
});
},
update: function(element, valueAccessor) {
// update the checked binding, i.e., check or uncheck the checkbox
ko.bindingHandlers.checked.update(element, valueAccessor)
// and refresh the element (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio('refresh')
}
};
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 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