I am new to Kendo UI library. When going through the tutorial i found the following declaration
<input id="JoiningDate" data-role="datepicker"/>
could you please explain ,what is the role of data-role attribute?
It is called declarative initialization.
Inside this attribute ,You are specifying the type of Widget you want to use (in this case it is a datepicker widget).
You can either use regular markup
<input id="JoiningDate" />
<script type="text/javascript">
$(document).ready(function ()
{
$("#JoiningDate").KendoDatePicker();
});
</script>
(or)
<input id="JoiningDate" data-role="datepicker"/>
<script type="text/javascript">
$(document).ready(function ()
{
kendo.init($("#JoiningDate"));
});
</script>
In summary:
"The value of the role data attribute is the name of the widget in lower case e.g. "autocomplete", "dropdownlist" etc."
You can find info here:
http://docs.kendoui.com/getting-started/data-attribute-initialization#example---initialize-a-kendo-ui-widget-using-a-data-attributes
Related
I have a category with "woocommerce columns-3" class and I want to change it to "woocommerce columns-4". How can I do it using javascript?
I've tried this code without sucess:
<script type="text/javascript">
document.getElementById("main").classList.add('woocommerce columns-4');
document.getElementById("main").classList.remove('woocommerce columns-3');
</script>
HTML
You must target the correct element to make it work. In your code you are trying to target an element with the id main.
I would recommend using document.querySelector()
So your code would be:
<script type="text/javascript">
// select element
var ourElement=document.querySelector(".elementor-widget-container .woocommerce.columns-3");
ourElement.classList.remove('columns-3');
ourElement.classList.add('columns-4');
</script>
I am learning Angular JS and I am stuck at a pretty basic step.
Here is my test code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
function enable()
{
$("#test_model").attr("data-ng-model", "test");
$("#test_bind").attr("data-ng-bind", "test");
};
</script>
</head>
<body>
<div data-ng-app="">
<div>
<input type=text id=test_model />
</div>
<div>
<p id=test_bind></p>
</div>
<button onclick=enable()>Enable</button>
</div>
</body>
</html>
Here, what I expect to happen is, when the Enable button is clicked, it should enable the bind, and so if anything is typed into the #test_model input, it should update #test_bind paragraph. But it is not working.
I can see with Firebug that the attributes (data-ng-model and data-ng-bind) are being updated when the Enable button is clicked, but it is not taking effect as it would if it were statically coded (hard-coding the model and bind parameters).
If I code it statically, then I notice that 3 new classes (ng-pristine, ng-untouched and ng-valid) are automatically added to #test_model and one new class (ng-binding) is added to #test_bind. So I changed my enable() function to this:
function enable()
{
$("#test_model").attr("data-ng-model", "test");
$("#test_bind").attr("data-ng-bind", "test");
$("#test_model").addClass("ng-pristine");
$("#test_model").addClass("ng-untouched");
$("#test_model").addClass("ng-valid");
$("#test_bind").addClass("ng-binding");
};
But still, not working.
What am I missing?
If you want to dynamically add Angular directives like ng-model, ng-bind etc.
you must create your own directive and use $compile.
You can use angular ng-show or ng-switch to switch showing DOM elements without bindings and elements with ng-model and other attributes that you need.
Is there a way to reveald a secon input in a form after the first input has been filled? For example if I have a text input asking how many kids are going on the trip, person responds and a second input appears asking age range...
A simple example:
jsFiddle Demo
HTML:
<input id="in1" type="text" /><br>
<input id="in2" type="text" /><br>
javascript/jQuery:
$('#in1').change(function(){
if ( this.value != '' ) $('#in2').show().focus();
});
Update:
Note that you must wrap the jQuery code in a document.ready wrapper:
$(document).ready({
$('#in1').change(function(){
if ( this.value != '' ) $('#in2').show().focus();
});
}); //END document.ready
This prevents the javascript from attempting to bind an event (the change event) to a DOM element (the #in1 element) before that element exists in the DOM. $(document).ready() ensures the DOM has been fully rendered before attempting to create the event bindings.
Usually, all (or almost all) of your javascript/jQuery code is written within the $(document).ready() wrapper.
Notes:
The above code example uses jQuery, so you should reference the jQuery library in the <head> tags, comme ca:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Note that if you use a CDN to load the jQuery library, as above, it is likely that jQuery is already pre-loaded from other websites visited previously.
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
http://phpacademy.org
Yes, it is possible.
You should look at either JavaScripts onchange() or jQuery's .change() event to control this action. And then of course hiding and showing certain elements.
I'm trying to do a fairly straightforward select on blur for a particular field box. I'm not certain why (for my example) I can't simply get the box to change background color on a blur action.
Here is my code:
in the haml html
:javascript
$("person_email").blur(function(){
$("person_email").css("background-color","#D6D6FF");
});
<input id="person_email" name="person[email]" size="30" type="text" class="MB_focusable">
in the html
<script>
//<![CDATA[
$("person_email").blur(function(){
$("person_email").css("background-color","#D6D6FF");
});
//]]>
</script>
jQuery selector is not correct.
If selector is an id of the element, put # before its name and if it is a class, put . before its name in the jquery: $('#person_name').(property)
You Should add # to selector $("person_email") => $("#person_email")
I have a form element that I want to address via javascript, but it doesn't like the syntax.
<form name="mycache">
<input type="hidden" name="cache[m][2]">
<!-- ... -->
</form>
I want to be able to say:
document.mycache.cache[m][2]
but obviously I need to indicate that cache[m][2] is the whole name, and not an array reference to cache. Can it be done?
UPDATE: Actually, I was wrong, you can use [ or ] characters as part of a form elements id and/or name attribute.
Here's some code that proves it:
<html>
<body>
<form id="form1">
<input type='test' id='field[m][2]' name='field[m][2]' value='Chris'/>
<input type='button' value='Test' onclick='showtest();'/>
<script type="text/javascript">
function showtest() {
var value = document.getElementById("field[m][2]").value;
alert(value);
}
</script>
</form>
</body>
</html>
Update: You can also use the following to get the value from the form element:
var value = document.forms.form1["field[m][2]"].value;
Use document.getElementsByName("input_name") instead. Cross platform too. Win.
Is it possible to add an id reference to the form element and use document.getElementById?
-- and in the old days (in HTML3.2/4.01 transitional/XHTML1.0 transitional DOM-binding) you could use:
form.elements["cache[m][2]"]
-- but the elements-stuff is, as Chris Pietschmann showed, not necessary as these binding-schemes also allow direct access (though I personally would prefer the extra readability !-)