w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements)
OK, here's my solution, although it's more a template. Fiddle (check the console log to see the result) I've wrapped the foo directive in a fooParent directive, like so: <div foo-parent> <div foo run="3"></div> <div foo run="1"></div> <div foo run="2"></div> </div> The fooParent directive exists pretty much to do three things: Expose a function to foo items so they can be added to a general list Maintain a list of foos, which will be sorted during post-linking Process each foo in the run order specified. It looks like this: app.directive('fooParent', function() { var foos = []; return { restrict: 'A', controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $t

Categories : Javascript

How to write an Angular directive for input and contenteditable
In your directive, you can make use of the element parameter of the linking function to identify the tag on which the directive is applied. You can then use that in your IF condition as follows: ctrl.$render = function() { var tagname = element["0"].tagName; if(tagName === "INPUT") element.val(ctrl.$viewValue); else element.text(ctrl.$viewValue); }; After, this you can simply attach the directive to the input and the div tags as an attribute to the tags to identify the tag to which the directive is applied.

Categories : Angularjs

AngularJS iterate over $dirty elements
I wrote a filter (with some help from the community) to do that a while back and it has served me pretty well. /* App Module */ angular.module("dirtyFilter", []). filter("returnDirtyItems", function () { return function (modelToFilter, form, treatAsDirty, removeTheseCharacters) { //removes pristine items //note: treatAsDirty must be an array containing the names of items that should not be removed for (var key in modelToFilter) { //delete the item if: // * it exists on the form and is pristine, or... // * does not exist on the form try{ //console.log("checking " + key + " for pristine and found it is " + form[key].$pristine); } catch(err){ //console.log("key " + key + " did not have an elemen

Categories : Angularjs

Putting elements into a ContentEditable div that cannot be removed
Not entirely sure what you are trying to achieve but looks like you can use JQuery's draggable functionality. Here is a link. http://jqueryui.com/draggable/ Play with the demo first to see if it what you want. If it is then great as it is easy to do with JQuery.

Categories : Javascript

Which elements can be safely made contenteditable?
This question has no meaningful answer. It will vary from browser version to browser version and with the rapid development of both Chrome and Firefox any answer will be out of date before the bytes have dried. Using new/experimental features in HTML (or any other standard) should only be done as an enhancement of existing or complementary solutions. One day we will be able to use contentEditable at will, but it's a ways off. Either you'll have to support the same/similar features in some other way (don't think there is a polyfill for contentEditable) or restrict what browsers your users can use (easier in a backend app such as a CMS or admin panel). But setting up a table for what elements works how with contentEditable on every browser/version combo is a herculean task. It would also

Categories : HTML

Elements in
  • in contenteditable sometimes don't receive keypress event
  • Taking the ContentEditable off the #foo continued to broadcast events from #test just fine http://jsfiddle.net/Maslow/wCs8J/2/ Perhaps it's a browser specific problem?

    Categories : Javascript

    jquery won't select all elements except title inside contenteditable div
    While it isn't the most robust answer, you can grab the index of the h2 closing tag </h2> and add the length of the tag (5) to get the rest of the content using substring(). var page_body_location = $(".class2").html().indexOf('</h2>')+5 var page_body = $(".class2").html().substring(page_body_location) jsFiddle here.

    Categories : Jquery

    HTML5 draggable elements within contenteditable div - stops working after first drop - why?
    Apparently Chrome has a bug (not a surprise - contenteditable is the most buggy feature in all browsers). Your code works perfectly fine on Firefox, but for some reason element inserted into editable with insertHTML command cannot be dragged any more. I tried few hacks, but only one worked - inserting other element and then replacing it. So instead: document.execCommand('insertHTML', false, content); Use something like this: var spanId = 'temp-' + (new Date()).getTime(); // Insert span with zero-width space (so it isn't visible and it isn't empty). document.execCommand('insertHTML', false, '<span id="' + spanId + '">u200b</span>'); // Replace that span with our dragged content. $('#' + spanId).replaceWith(content); You can try this here: http://jsfiddle.net/gXScu/5/. I

    Categories : Javascript

    Using the same directive on multiple elements
    You need to give your directive an isolated scope. Right now, multiple instances of the directive are sharing the same scope, so updating your model is not working as expected. Take a look at docs.angularjs.org/guide/directive require: '^ngModel', restrict: 'A', scope: { ... }, link: function (scope, elm, attrs, ctrl) { ....

    Categories : Angularjs

    AngularJS: Use directive elements in Controller
    I think you shouldn't rely on events, but add a controller property to the directive object and declare the directive's controller there. Something similar to this (didn't tried it): .directive('page', function () { return { restrict: "E", transclude: true, template: '<div ng-transclude></div>', controller: function ($scope, $element, $attrs, $transclude, otherInjectables) { // Add ng-click="goToPage(n)" directives on your HTML. Those should be inside of the <page> element for this to work. $scope.goToPage = function (page) { if (page === 1) { window.scrollTo(100, $element[0].offsetTop - 110); } else { window.scrollTo(0, $ele

    Categories : Angularjs

    AngularJS Custom Directive For Validation - Input depending on another
    Ok, discovered the answer in the AngularJS google group, just needed to add a watch on adult value: scope.$watch('pax.adults', function(value) { ctrl.$setValidity('children', ctrl.$viewValue <= value); }); The corresponding jsFiddle: http://jsfiddle.net/4vfBf/

    Categories : Validation

    Angular directive is not working when used with two HTML elements?
    A very wilde guess : you should isolate the scope of you directive. Since both instances of this directive are using the same $scope they're probably conflicting : http://www.egghead.io/video/fYgdU7u2--g

    Categories : Angularjs

    angularjs same directive (outside click) for multiple elements
    Florian's answer is correct for creating an isolated scope for the directive see: http://docs.angularjs.org/guide/directive (it should be scope: true according to the docs). From your code I'd guess there is something else in your code that may be causing it as you have show:datePickerModel.showFilterList whereas everywhere else you have showFilterList. Probably the problem is that showFilterList is being created in the parent scope by something else. Try recreate your problem in a codepen or a fiddle, it gives us some code to help you with and often I've found that redoing my problem in a clean environment can lead me to find the issue anyway.

    Categories : Angularjs

    AngularJS: Linking to elements in a directive that uses ng-repeat
    $watch should be able to achieve what you want to do: link: function(scope, elem, attrs) { var init = function() { // your initialization code }; var ulElem = elem.children()[0]; // ul element var unreg = scope.$watch(function() { return ulElem.children.length === scope.domains.length; // check if all "li" are generated }, function() { // at this point, the ul is rendered init(); unreg(); // unregister the watcher for performance, since the init function only need to be called once }); } I have created a plunk to demonstrate this solution.

    Categories : Javascript

    How can I get a handle on ng-repeat children elements in my custom directive?
    To achieve reordering, you have several options: Manipulate DOM. IMHO, this is the least preferred way, it's not very angular. Re-order the array ([1, 2, 3]) which is used in ngRepeat in your linking function. Use orderBy filter (doc) I've created a plunk to demonstrate 2 and 3, hope it can help. http://plnkr.co/edit/vrgeBoJZiG6WMu4Rk46u?p=preview

    Categories : Javascript

    How to use compile function in AngularJS directive to ng-repeat elements from a service
    You are using ngRepeat on chat.messages but never assigning chat to be part of $scope. controller: ['$scope', '$element', '$attrs', '$transclude', function ($scope, $element, $attrs, $transclude) { $scope.name = 'MyName'; $scope.text = ''; $scope.chat = chat; //<--this so you can use ngRepeat $scope.sendMessage = function () { chat.sendMessage($scope.name, $scope.text); $scope.text = ''; }; }], updated fiddle.

    Categories : Angularjs

    Adding ng-change to child elements from linking function of directive
    You make your life harder than it is. you do'nt need to do all the angular compile/eval/etc stuff - at the end angular is javascript : see your modified (and now working) example here : if (shouldRun) { iElement.find(':input[ng-model]').on( 'change', function () { this.form.submit(); }); console.log("Done"); } http://jsfiddle.net/lgersman/WuW8B/1/ a few notes to your approach : ng-change maps directly to the javascript change event. so your submit handler will never be called if somebody uses cut/copy/paste on the INPUT elements. the better solution would be to use the "input" event (which catches all modification cases). native events like change/input etc will be bubbled up to the parent dom elements in the browser. so it would have exactly the same to attach the chang

    Categories : Angularjs

    Data validation of all elements in wpf
    I think the best way is to declare a custom attribute and decorate the properties you wanna validate with it, and then use Reflection to iterate through those properties based on whether they have that custom attribute.

    Categories : Wpf

    Transclude in Angular directive putting elements inside a single 'span'
    It turns out this works with restrict: 'A' <table envtable> <tr> <td>OS</td> <td>{{env.osName}}</td> </tr> <tr> <td>OS Version</td> <td>{{env.osVersion}}</td> </tr> </table> Demo

    Categories : Javascript

    Validating individual elements using jQuery Validation
    Quote OP: "... I also needed input validation for elements which are not inside a form ... so my question is, is it possible to validate such individual elements which are not inside form elements using jQuery Validation" No. It is not possible to validate any input elements not contained within <form></form> tags using the jQuery Validate plugin. All input elements must be contained within form tags and .validate() attached to the form element to initialize the plugin. There is no other way. This is by design. See: documentation... "Validate forms like you've never been validating before!" Quote OP: "if no, then how can I validate them without writing my whole new validating functions?" Why would you need to re-write anything? Simply wrap your input e

    Categories : Javascript

    jQuery form validation not detecting elements
    $('input[name^="cmp_"]').each(function() { $(this).rules("add", { minlength: 50, required: true, digits: true }); }); try this.

    Categories : Jquery

    validation of hidden elements zend form
    you can't perform validation on non visible elements because they're not even submitted with the form. Maybe you use hidden inputs instead and perform some filling when the form submit event occurs

    Categories : PHP

    How do I take a JS array that has some elements that are also arrays and make ALL array elements top level elements
    You don't need the second step to have an array of arrays, just join then split it by the comma: var array = ["item1", "item2", "item3, item4", "item5", "item6"] console.log(array.join(',').split(',')); Example fiddle

    Categories : Javascript

    ASP.NET validation fails - displayed elements change visibility
    From another stackoverflow issue (http://stackoverflow.com/a/11723794/704879): "This is the problem: When a validator is loaded on the page it creates a bit of javascript to support the clientside validation. When you place a validator inside an usercontrol that isn´t visible by default, and this usercontrol is in an updatepanel, it does not create that javascript properly. This is the solution: Outside the updatepanel, I did above, create a dummy validator with a dummy textbox using a dummy validationgroup like so:" Credits go to the original poster of the solution (Anton Belev).

    Categories : Javascript

    adding validation rule(s) to dynamically added elements
    You are calling $("#myForm").validate() twice. Once without options and subsequently with options. You can only call it once (initialization) and all subsequent calls are ignored. So simply remove the second one and place all the options into the first one. $(document).ready(function(){ var wrapper = $("#wrapper"); var addForm = $("#add-form"); var index = 0; $("#myForm").validate({ errorPlacement: function(error, element) { error.insertAfter(element); }, rules: { email: { // <-- does this input exist on DOM ready? required: true } } //rules }); //validate() .... However, the rules declaration would be invalid if

    Categories : Jquery

    jQuery validation for HTML elements with language support (Japanese)
    You can use a regular expression. var datePattern = /^([0-90-9]{1,2}[./.]){2}[0-90-9]{4}$/; datePattern.test('26.06.2013'); // true datePattern.test('1/1/1969'); // true I haven't checked if using unicode characters in a regex like this works in all browsers. In case it doesn't, you could always escape them: var datePattern = /^([0-9uFF10-uFF19]{1,2}[./uFF0E]){2}[0-9uFF10-uFF19]{4}$/;

    Categories : Jquery

    Force ng-dirty in angularjs form validation
    Let's start by adding angular to your jsfiddle by wrapping it in <div ng-app>...</div> http://jsfiddle.net/yq4NG/1/ By default the required field will be validated on input (dirty). If you want to have them validated on submit before any input (pristine), then you can run a function on your submit button that will check for pristine fields and dirty them. That is what i have done in the example: http://jsfiddle.net/yq4NG/6/ You could probably build a reusable solution using custom formatters and validators but this is a simple on off solution. EDIT: Simpler again using just classes: http://jsfiddle.net/yq4NG/8/ EDIT [as suggested by @XMLilley in the comments]: Because angular doesn't provide a $setDirty() method that's equivalent to $setPristine() we're triggering th

    Categories : Javascript

    In Firefox SPAN elements cannot be dynamically added to elements with -column-width values
    Solved it. As I suspected, its a matter of forcing Firefox to redraw elements. The problem is fixed after adding the following line to the addSpan( ) function. document.getElementById("content").innerHTML = document.getElementById("content").innerHTML;

    Categories : HTML

    Do elements with "position: absolute;" behave as block-level elements?
    A <div> element is not inline while a <span> element is. Here's the definition of absolute from position: absolute - The element is positioned relative to its first positioned (not static) ancestor element. So the answer to your questions is yes: span elements with display: block display as somewhat block-level elements. Let me know if you still need clarification.

    Categories : CSS

    Dynamically adding elements to jQuery Mobile , when these elements are retrieved Asynchronously?
    Try to populate your list where you're building your albums arrays. var myList = $("ul"); // better save this in a var for (i=0; i<response.data.length; i++) { myList.append('<li><img src="' + response.data[i].cover_photo + '" /><h2>' + response.data[i].name + '</h2></li>').listview('refresh'); } Also, it seems you won't need these data arrays anymore unless you plan to do some additional things with it.

    Categories : Jquery

    alternative to a for loop for replacing a subset of elements in a matrix with elements in a vector in R
    The items you are comparing are of different classes: character and Dates. (I get an entire matrix filled with 1's.) Try this: mydates <- as.Date(mydates) # then the comparisons will more sensible It get to a vectorized answer I resorted to the use of outer and rearranged the logic a bit to create a matrix with the "new" values, and then set the failing items back to strating value of 1: myarray2 <-matrix(mycons, nrow=length(dates), ncol=length(mydates), byrow=TRUE) myarray2[ outer(dates, mydates, "<=") ] <- 1 myarray2 I tried using mapply thinking I could do something like to pass "parallel items" from two sequences but there is no way that I could get the "i" indexing to take hold. mapply(function(x,y) {myarray[i , ] <- y[x>dates]} , mydates,

    Categories : R

    String gsub - Replace characters between two elements, but leave surrounding elements
    You can do it using this character class : [^/] (all that is not a slash) and lookarounds mystring.gsub(/(?<=start/)[^/]+(?=/end)/,"7")

    Categories : Ruby

    Add validation rules using jquery validate plug-in on dynamically generated elements
    check this: html: <form id='form' method='post' > <div id='details'> </div> <a id='Add' href='#'>Add</a> <br /> <input type='submit' /> </form> js: $(document).ready(function() { $('#form').validate(); var i = 0; $('#Add').click(function() { var input = "<input type='text' class='item' name='item"+ i++ +"' />"; $('#details').append(input+'<br />'); $('#details input:last').rules('add', { required: true }); return false; }); }); on jsfiddle

    Categories : Jquery

    jQuery add elements after every input
    after accepts a function as parameter, so that you can refer to your input element : $("#step1 .left input").after(function(){ return "<div class='form_valid' id='form_valid_" + this.id + "'></div>" });

    Categories : Jquery

    Getting sum out of an input array's elements
    You can do this by converting each element value into integer and then perform sum math. Example var add = 0; $("input").each(function() { add += Number($(this).val());//for integer //add += parseFloat($(this).val());//for float or decimal }); $("#total").html("Sum of all textboxes is : " + add);

    Categories : Javascript

    Comparing class member array elements and main elements
    Your canswers member is not a valid declaration. It is likely using an extension provided by your compiler to support the C flexible array member. This will act like a 0 sized array, and your access to the canswers variable are thus reading and writing beyond the object boundary, resultig in undefined behavior. You should either declare canswers with the right array size, or allow it to be a vector<char> or array<char, 20> instead. For vector<char>: class TestGrade { public: void setKey(char []); void grade(char []); std::vector<char> canswers; void display(); }; If you use vector<char>, you would need to change how you implement setKey(). void TestGrade::setKey(char answers[]) //setting values from "key" array in main { canswers.clear

    Categories : C++

    extract elements from list of lists with variable number of elements and NAs R
    So this can be marked as answered: SimonO101's solution (checking for NA values): lapply(mytestlist, function(x) { if( all(is.na(x)) ){ c(a=0,b=1,c=0) } else { x$nums } }) My solution (checking for named list elements): lapply(mytestlist, function(x) { if('nums' %in% names(x)) { x$nums } else { c(a=0, b=1, c=0) } })

    Categories : R

    Removing elements that have no attributes, child elements, or text during transform
    This should do the job: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> <xsl:output indent="yes" method="xml" omit-xml-declaration="yes"/> <xsl:strip-space elements="*"/> <!-- Elements/attributes to remove. Note that comments are not elements or attributes. Since there is no template to match comments they are automatically ignored. --> <xsl:template match="@*[normalize-space()='']|info|@file_line_nr|@file_name"/> <!-- Match any attribute --> <xsl:template match="@*"> <xsl:copy> <xsl:apply-templates select="@*"/> </xsl:copy> </xsl:template> <!-- Match any element --> &l

    Categories : Xml

    Backbone Collection Set method remove existing elements and then add all elements
    From the docs The set method performs a "smart" update of the collection with the passed list of models. If a model in the list isn't yet in the collection it will be added; if the model is already in the collection its attributes will be merged; and if the collection contains any models that aren't present in the list, they'll be removed. It is also a good idea to provide `idAttribute' to the model so that the collection identifies that based on the id. Otherwise the collection would not know if the model is a new one or not. So after setting the id and using set, you can see that is performs a smart update $(function () { var MyModel = Backbone.Model.extend({ // This attribute should be set as a default defaults: { Name: '' },

    Categories : Backbone Js

    What best way to populate java list with separate elements and elements from other lists?
    You could at least introduce a loop: List<WebElement> containers = Arrays.asList(inetConnection, wiredConnection, phonesConnection, usbConnection, wifiConnection); List<WebElement> list = new LinkedList<WebElement>(containers); for (WebElement e : containers) list.addAll(e.getExpectedElements());

    Categories : Java



    © Copyright 2017 w3hello.com Publishing Limited. All rights reserved.