Rectangle 27 86

Here is a simple JavaScript function that will return this information. Tested in Firefox, IE6, and IE7. I had to close and restart my browser in between every change to the setting under Control Panel / Regional and Language Options / Regional Options / Customize. However, it picked up not only the comma and period, but also oddball custom things, like the letter "a".

function whatDecimalSeparator() {
    var n = 1.1;
    n = n.toLocaleString().substring(1, 2);
    return n;
}
function whatDecimalSeparator() {
    var n = 1.1;
    n = n.toLocaleString().substring(1, 2);
    return n;
}

console.log('You use "' + whatDecimalSeparator() + '" as Decimal seprator');

This worked for me in Firefox and IE8, but not Google Chrome. I don't have Opera.

very clever

Function fails on locale's that use more than one character for their DecimalSeparator (e.g. ,,). Windows LOCALE_SDECIMAL allows a decimal separator to contain up to three characters. (Which is why it fails on my PC). Better to use the Accept-Language of the browser in that case. Which still doesn't account for the ability to specify their own DecimalSeparator e.g. \o/

@IanBoyd is right about locales with a string of more than one character as decimal separator, but n = /^1(.+)1$/.exec(n.toLocaleString())[1] would do it, and is easier than using the Accept-Language header.

html - With a browser, how do I know which decimal separator does the ...

html internationalization locale
Rectangle 27 19

Try adding a "debugger;" statement in the javascript you're adding dynamically. This should cause it to halt at that line regardless of breakpoint settings.

All I can find is this: code.google.com/p/fbug/issues/detail?id=1259 . By the way, I use script tag appending to the head to dynamically load scripts (but using a src attribute), and the code added this way is debuggable for me on all browsers, even if it's not loaded together with the initial page.

What's the exact code you're using to add the script tag? I'm having the same issue as the OP, which is making it impossible to debug dynamically loaded JS files in Chrome. Thx!

ajax - Is possible to debug dynamic loading JavaScript by some debugge...

javascript ajax
Rectangle 27 19

Try adding a "debugger;" statement in the javascript you're adding dynamically. This should cause it to halt at that line regardless of breakpoint settings.

All I can find is this: code.google.com/p/fbug/issues/detail?id=1259 . By the way, I use script tag appending to the head to dynamically load scripts (but using a src attribute), and the code added this way is debuggable for me on all browsers, even if it's not loaded together with the initial page.

What's the exact code you're using to add the script tag? I'm having the same issue as the OP, which is making it impossible to debug dynamically loaded JS files in Chrome. Thx!

ajax - Is possible to debug dynamic loading JavaScript by some debugge...

javascript ajax
Rectangle 27 10

A clean way that allow dynamically setting title or meta description. In example I use ui-router but you can use ngRoute in same way.

var myApp = angular.module('myApp', ['ui.router'])

myApp.config(
    ['$stateProvider', function($stateProvider) {
        $stateProvider.state('product', {
            url: '/product/{id}',
            templateUrl: 'views/product.html',
            resolve: {
                meta: ['$rootScope', '$stateParams', function ($rootScope, $stateParams) {
                    var title = "Product " + $stateParams.id,
                        description = "Product " + $stateParams.id;
                    $rootScope.meta = {title: title, description: description};
                }]

                // Or using server side title and description
                meta: ['$rootScope', '$stateParams', '$http', function ($rootScope, $stateParams, $http) {
                    return $http({method: 'GET', url: 'api/product/ + $stateParams.id'})
                        .then (function (product) {
                            $rootScope.meta = {title: product.title, description: product.description};
                        });
                }]

            }
            controller: 'ProductController'
        });
    }]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="meta.title + ' | My App'">myApp</title>
...

javascript - How to dynamically change header based on AngularJS parti...

javascript angularjs templates partial-views angular-routing
Rectangle 27 10

A clean way that allow dynamically setting title or meta description. In example I use ui-router but you can use ngRoute in same way.

var myApp = angular.module('myApp', ['ui.router'])

myApp.config(
    ['$stateProvider', function($stateProvider) {
        $stateProvider.state('product', {
            url: '/product/{id}',
            templateUrl: 'views/product.html',
            resolve: {
                meta: ['$rootScope', '$stateParams', function ($rootScope, $stateParams) {
                    var title = "Product " + $stateParams.id,
                        description = "Product " + $stateParams.id;
                    $rootScope.meta = {title: title, description: description};
                }]

                // Or using server side title and description
                meta: ['$rootScope', '$stateParams', '$http', function ($rootScope, $stateParams, $http) {
                    return $http({method: 'GET', url: 'api/product/ + $stateParams.id'})
                        .then (function (product) {
                            $rootScope.meta = {title: product.title, description: product.description};
                        });
                }]

            }
            controller: 'ProductController'
        });
    }]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="meta.title + ' | My App'">myApp</title>
...

javascript - How to dynamically change header based on AngularJS parti...

javascript angularjs templates partial-views angular-routing
Rectangle 27 17

I had the same problem with iframes created dynamically, and it turned out that setting border properties AFTER adding the iframe to the document has NO effect:

The following code shows a 3d border:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);

javascript - IE 8 iframe border - Stack Overflow

javascript html css iframe internet-explorer-8
Rectangle 27 17

I had the same problem with iframes created dynamically, and it turned out that setting border properties AFTER adding the iframe to the document has NO effect:

The following code shows a 3d border:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);

javascript - IE 8 iframe border - Stack Overflow

javascript html css iframe internet-explorer-8
Rectangle 27 9

The output will also be different depending on the user's locale settings, even if Number.prototype.toLocaleString is supported by their browser, e.g. for me on en-GB, Number(1000000).toLocaleString(); gives me "1,000,000".

toLocaleString()
function localeString(x, sep, grp) {
    var sx = (''+x).split('.'), s = '', i, j;
    sep || (sep = ' '); // default seperator
    grp || grp === 0 || (grp = 3); // default grouping
    i = sx[0].length;
    while (i > grp) {
        j = i - grp;
        s = sep + sx[0].slice(j, i) + s;
        i = j;
    }
    s = sx[0].slice(0, i) + s;
    sx[0] = s;
    return sx.join('.');
}
localeString(1000000.00001);
// "1 000 000.00001"

ah! that will do the job! thank you

because am coming from python, i thought it was simple, the metho was to invert the stringm forat it, then re-invert it.... but it will make lot of lines! in python if you want to invert a string, you just make a negative step, "hello"[::-1] and the latest element is the negative one, for example the o will be "hello"[-1] really the world is hard from someone coming from python ;) thnk you again

'abc'.split('').reverse().join('') is 'cba', but you still would need to loop up over it like this. Just loop down instead. Further, 'abc'.slice(-1) is 'c'.

ah! i should take more courses about javascript, thank you again :)

I legit can't understand this code, one reason why I may not want to write a solution to do this myself.

javascript - toLocaleString() not supported in all browsers? - Stack O...

javascript formatting
Rectangle 27 9

The output will also be different depending on the user's locale settings, even if Number.prototype.toLocaleString is supported by their browser, e.g. for me on en-GB, Number(1000000).toLocaleString(); gives me "1,000,000".

toLocaleString()
function localeString(x, sep, grp) {
    var sx = (''+x).split('.'), s = '', i, j;
    sep || (sep = ' '); // default seperator
    grp || grp === 0 || (grp = 3); // default grouping
    i = sx[0].length;
    while (i > grp) {
        j = i - grp;
        s = sep + sx[0].slice(j, i) + s;
        i = j;
    }
    s = sx[0].slice(0, i) + s;
    sx[0] = s;
    return sx.join('.');
}
localeString(1000000.00001);
// "1 000 000.00001"

ah! that will do the job! thank you

because am coming from python, i thought it was simple, the metho was to invert the stringm forat it, then re-invert it.... but it will make lot of lines! in python if you want to invert a string, you just make a negative step, "hello"[::-1] and the latest element is the negative one, for example the o will be "hello"[-1] really the world is hard from someone coming from python ;) thnk you again

'abc'.split('').reverse().join('') is 'cba', but you still would need to loop up over it like this. Just loop down instead. Further, 'abc'.slice(-1) is 'c'.

ah! i should take more courses about javascript, thank you again :)

I legit can't understand this code, one reason why I may not want to write a solution to do this myself.

javascript - toLocaleString() not supported in all browsers? - Stack O...

javascript formatting
Rectangle 27 3

If you look at the example in the Google Documentation and the documentation itself, the setStyle function allows the colors of the polygons to be changed dynamically or based on their properties:

Sets the style for all features in the collection. Styles specified on a per-feature basis via overrideStyle() continue to apply. Pass either an object with the desired style options, or a function that computes the style for each feature. The function will be called every time a feature's properties are updated.

Something like this will set the object(s) with the "SD_NAME" property equal to "Gee" to be filled with green, everything else will be filled with gray:

map.data.setStyle(function(feature) {
  var SD_NAME = feature.getProperty('SD_NAME');
  var color = "gray";
  if (SD_NAME == "Gee") {
    color = "green";
  }
  return {
    fillColor: color,
    strokeWeight: 1
  }
});
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });

  // Load GeoJSON.
  // map.data.loadGeoJson(
  //    'https://storage.googleapis.com/mapsdevsite/json/google.json');
  map.data.addGeoJson(geoJsonData);

  map.data.setStyle(function(feature) {
    var SD_NAME = feature.getProperty('SD_NAME');
    var color = "gray";
    if (SD_NAME == "Gee") {
      color = "green";
    }
    return {
      fillColor: color,
      strokeWeight: 1
    }
  });
}
var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "letter": "G",
      "color": "blue",
      "rank": "7",
      "ascii": "71",
      "SD_NAME": "Gee"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [123.61, -22.14],
          [122.38, -21.73],
          [121.06, -21.69],
          [119.66, -22.22],
          [119.00, -23.40],
          [118.65, -24.76],
          [118.43, -26.07],
          [118.78, -27.56],
          [119.22, -28.57],
          [120.23, -29.49],
          [121.77, -29.87],
          [123.57, -29.64],
          [124.45, -29.03],
          [124.71, -27.95],
          [124.80, -26.70],
          [124.80, -25.60],
          [123.61, -25.64],
          [122.56, -25.64],
          [121.72, -25.72],
          [121.81, -26.62],
          [121.86, -26.98],
          [122.60, -26.90],
          [123.57, -27.05],
          [123.57, -27.68],
          [123.35, -28.18],
          [122.51, -28.38],
          [121.77, -28.26],
          [121.02, -27.91],
          [120.49, -27.21],
          [120.14, -26.50],
          [120.10, -25.64],
          [120.27, -24.52],
          [120.67, -23.68],
          [121.72, -23.32],
          [122.43, -23.48],
          [123.04, -24.04],
          [124.54, -24.28],
          [124.58, -23.20],
          [123.61, -22.14]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "o",
      "color": "red",
      "rank": "15",
      "ascii": "111"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [128.84, -25.76],
          [128.18, -25.60],
          [127.96, -25.52],
          [127.88, -25.52],
          [127.70, -25.60],
          [127.26, -25.79],
          [126.60, -26.11],
          [126.16, -26.78],
          [126.12, -27.68],
          [126.21, -28.42],
          [126.69, -29.49],
          [127.74, -29.80],
          [128.80, -29.72],
          [129.41, -29.03],
          [129.72, -27.95],
          [129.68, -27.21],
          [129.33, -26.23],
          [128.84, -25.76]
        ],
        [
          [128.45, -27.44],
          [128.32, -26.94],
          [127.70, -26.82],
          [127.35, -27.05],
          [127.17, -27.80],
          [127.57, -28.22],
          [128.10, -28.42],
          [128.49, -27.80],
          [128.45, -27.44]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "o",
      "color": "yellow",
      "rank": "15",
      "ascii": "111"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [131.87, -25.76],
          [131.35, -26.07],
          [130.95, -26.78],
          [130.82, -27.64],
          [130.86, -28.53],
          [131.26, -29.22],
          [131.92, -29.76],
          [132.45, -29.87],
          [133.06, -29.76],
          [133.72, -29.34],
          [134.07, -28.80],
          [134.20, -27.91],
          [134.07, -27.21],
          [133.81, -26.31],
          [133.37, -25.83],
          [132.71, -25.64],
          [131.87, -25.76]
        ],
        [
          [133.15, -27.17],
          [132.71, -26.86],
          [132.09, -26.90],
          [131.74, -27.56],
          [131.79, -28.26],
          [132.36, -28.45],
          [132.93, -28.34],
          [133.15, -27.76],
          [133.15, -27.17]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "g",
      "color": "blue",
      "rank": "7",
      "ascii": "103",
      "SD_NAME": "Gee"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [138.12, -25.04],
          [136.84, -25.16],
          [135.96, -25.36],
          [135.26, -25.99],
          [135, -26.90],
          [135.04, -27.91],
          [135.26, -28.88],
          [136.05, -29.45],
          [137.02, -29.49],
          [137.81, -29.49],
          [137.94, -29.99],
          [137.90, -31.20],
          [137.85, -32.24],
          [136.88, -32.69],
          [136.45, -32.36],
          [136.27, -31.80],
          [134.95, -31.84],
          [135.17, -32.99],
          [135.52, -33.43],
          [136.14, -33.76],
          [137.06, -33.83],
          [138.12, -33.65],
          [138.86, -33.21],
          [139.30, -32.28],
          [139.30, -31.24],
          [139.30, -30.14],
          [139.21, -28.96],
          [139.17, -28.22],
          [139.08, -27.41],
          [139.08, -26.47],
          [138.99, -25.40],
          [138.73, -25.00],
          [138.12, -25.04]
        ],
        [
          [137.50, -26.54],
          [136.97, -26.47],
          [136.49, -26.58],
          [136.31, -27.13],
          [136.31, -27.72],
          [136.58, -27.99],
          [137.50, -28.03],
          [137.68, -27.68],
          [137.59, -26.78],
          [137.50, -26.54]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "l",
      "color": "green",
      "rank": "12",
      "ascii": "108"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [140.14, -21.04],
          [140.31, -29.42],
          [141.67, -29.49],
          [141.59, -20.92],
          [140.14, -21.04]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "e",
      "color": "red",
      "rank": "5",
      "ascii": "101"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [144.14, -27.41],
          [145.67, -27.52],
          [146.86, -27.09],
          [146.82, -25.64],
          [146.25, -25.04],
          [145.45, -24.68],
          [144.66, -24.60],
          [144.09, -24.76],
          [143.43, -25.08],
          [142.99, -25.40],
          [142.64, -26.03],
          [142.64, -27.05],
          [142.64, -28.26],
          [143.30, -29.11],
          [144.18, -29.57],
          [145.41, -29.64],
          [146.46, -29.19],
          [146.64, -28.72],
          [146.82, -28.14],
          [144.84, -28.42],
          [144.31, -28.26],
          [144.14, -27.41]
        ],
        [
          [144.18, -26.39],
          [144.53, -26.58],
          [145.19, -26.62],
          [145.72, -26.35],
          [145.81, -25.91],
          [145.41, -25.68],
          [144.97, -25.68],
          [144.49, -25.64],
          [144, -25.99],
          [144.18, -26.39]
        ]
      ]
    }
  }]
};
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

javascript - Setting different fill colors for geoJSON objects in Goog...

javascript google-maps google-maps-api-3 maps
Rectangle 27 1

Current issue is described with comments by author of FullCalendar plugin: first link, second link

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Setting FullCalendar config values dynamically - Stack Ov...

javascript fullcalendar
Rectangle 27 1

I think you have to rely on JavaScript to give you the locale settings. But apparently JS doesn't have direct access to this information. I see Dojo Toolkit relies on an external database to find the locale information, although it might not take in account setting changes, for example. Another workaround I see is to have a small silent Java applet that query this information from the system, and JavaScript to get it out of Java. I can give more information if you don't know how to do it (if you want to go this convoluted route, of course).

[EDIT] So I updated my knowledge of localization support in Java... Unlike what I thought originally, you won't have directly the decimal separator or thousand separator characters directly, like you would do with line separator or path separator: instead Java offers APIs to format the numbers or dates you provide. Somehow, it makes sense: in Europe you often put the currency symbol after the number, some countries (India?) have a more complex rule to separate digits, etc.

Another thing: Java correctly finds the current locale from the system, but doesn't take information from there (perhaps for above reasons). Instead it uses its own set of rules. So if you have a Spanish locale where you replaced decimal separator with an exclamation sign, Java won't use it (but perhaps neither your application, anyway...).

So I am writing an applet exposing a service (functions) to JavaScript, allowing to format numbers to the current locale. You can use it as such, using JavaScript to format numbers on the browser. Or you can just feed it with some sample number and extract the symbols from there, using them locally or feeding them back to the server.

@PhiLho: would be nice to know. This webapp is a kind of a help system, so any ugly hack will do, it doesn't need to be elegant as long as it runs on IE, Firefox and Opera.

html - With a browser, how do I know which decimal separator does the ...

html internationalization locale
Rectangle 27 4

This is one way to dynamically load and execute a list of scripts synchronously. You need to insert each script tag into the DOM, explicitly setting its async attribute to false:

script.async = false;

Scripts that have been injected into the DOM are executed asynchronously by default, so you have to set the async attribute to false manually to work around this.

<script>
(function() {
  var scriptNames = [
    "https://code.jquery.com/jquery.min.js",
    "example.js"
  ];
  for (var i = 0; i < scriptNames.length; i++) {
    var script = document.createElement('script');
    script.src = scriptNames[i];
    script.async = false; // This is required for synchronous execution
    document.head.appendChild(script);
  }
  // jquery.min.js and example.js will be run in order and synchronously
})();
</script>

<!-- Gotcha: these two script tags may still be run before `jquery.min.js`
     and `example.js` -->
<script src="example2.js"></script>
<script>/* ... */<script>
  • The WHATWG spec on the tag is a good and thorough description of how tags are loaded.

It is working now, upvoted. BTW, the last closing script is missing the backslash.

javascript - inject a script tag with remote src and wait for it to ex...

javascript javascript-events
Rectangle 27 4

This is one way to dynamically load and execute a list of scripts synchronously. You need to insert each script tag into the DOM, explicitly setting its async attribute to false:

script.async = false;

Scripts that have been injected into the DOM are executed asynchronously by default, so you have to set the async attribute to false manually to work around this.

<script>
(function() {
  var scriptNames = [
    "https://code.jquery.com/jquery.min.js",
    "example.js"
  ];
  for (var i = 0; i < scriptNames.length; i++) {
    var script = document.createElement('script');
    script.src = scriptNames[i];
    script.async = false; // This is required for synchronous execution
    document.head.appendChild(script);
  }
  // jquery.min.js and example.js will be run in order and synchronously
})();
</script>

<!-- Gotcha: these two script tags may still be run before `jquery.min.js`
     and `example.js` -->
<script src="example2.js"></script>
<script>/* ... */<script>
  • The WHATWG spec on the tag is a good and thorough description of how tags are loaded.

It is working now, upvoted. BTW, the last closing script is missing the backslash.

javascript - inject a script tag with remote src and wait for it to ex...

javascript javascript-events
Rectangle 27 9

With your configuration jQuery uses jsonp to transport the data. This works by dynamically inserting a script element and setting the URL to the specified value. The data returned by the server is then evaluated as JavaScript - usually calling the provided callback. If the server returns a 404, the contents is obviously no JavaScript and the callback is never called. Some browsers support error handlers on the script tag, which are called in these situations. Unfortunately IE doens't support this. The best way to detect an error is to rely on a timeout.

In your case you should specify an additional timeout option, which causes the error handler to be called if the callback wasn't called in time (which would be the case for a 404 response).

$.ajax({
  url: 'http://my_url',
  timeout: 2000, // 2 seconds timeout
  dataType: "json",
  success: function(data){
    alert('success');
  },
  error: function(data){
    alert('error');
  },
  complete: function(data) {
    alert('complete')
  }
});

The timeout not resolved solution. Call nothing after pass :(

Same here, mine just triggers the error everytime although it gets the data.

Not sure what this answer is doing all the way down here on -1.

javascript - How to callback a function on 404 in JSON ajax request wi...

javascript ajax jquery http-status-code-404
Rectangle 27 12

The reason is due to a bug with locales that have the language-country format. The good news is that it has been fixed already. This was reported in Github with Issue 13164 and fixed with pull request 229.

If you want to grab the latest code with the fix, update the gem like this:

gem 'i18n', github: 'svenfuchs/i18n'
bundle install

Will this somehow break the normal bundle mechanism? Do I have to do this, or will the error go away automatically after some time when I do bundle update?

Your gem will be updated to whatever is the latest commit in the master repository, you'll keep on getting the latest code always. If you feel like a future update might break things, you can do it just once to get the relevant bug fix, and then delete the github part in the Gemfile.

Probably the error will go away after a bundle update, provided you don't have a version lock or the likes. I don't know when this could be, most likely until a new version of the gem comes out.

localization - Rails I18n validation deprecation warning, after settin...

localization ruby-on-rails-4 rails-i18n
Rectangle 27 12

The reason is due to a bug with locales that have the language-country format. The good news is that it has been fixed already. This was reported in Github with Issue 13164 and fixed with pull request 229.

If you want to grab the latest code with the fix, update the gem like this:

gem 'i18n', github: 'svenfuchs/i18n'
bundle install

Will this somehow break the normal bundle mechanism? Do I have to do this, or will the error go away automatically after some time when I do bundle update?

Your gem will be updated to whatever is the latest commit in the master repository, you'll keep on getting the latest code always. If you feel like a future update might break things, you can do it just once to get the relevant bug fix, and then delete the github part in the Gemfile.

Probably the error will go away after a bundle update, provided you don't have a version lock or the likes. I don't know when this could be, most likely until a new version of the gem comes out.

localization - Rails I18n validation deprecation warning, after settin...

localization ruby-on-rails-4 rails-i18n
Rectangle 27 1

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports common CSS and JavaScript pre-processors like Sass and Webpack. Using method chaining, Elixir allows you to fluently define your asset pipeline. It's more like micro framework for setting out the work flow and the second npm install requirejs means that npm will install .js where npm install laravel-elixir-requirejs is the js package specifically load js for elxir framework which is an component of laravel.

Thx for the answer! :) May I ask that which one should I use (requirejs or laravel-elixir-requirejs) ? what is the best practice?

That's the choice you have to made.the best practice is to use laravel-elixir-requirejs.But the choice is your's

Laravel 5.4 require.js and laravel-elixir-requirejs - Stack Overflow

laravel requirejs php-7 laravel-5.4 laravel-elixir
Rectangle 27 1

Have you tried setting onSubmit function dynamically like this (keeping your div tag as is with data-callback="onSubmit"):

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    var that = $(this);
    if(Abayo.validate(that)) {
      window.onSubmit = function(){ // defining onSubmit function dynamically here
        Abayo.submit(that); // you can access `that` here
      };
      grecaptcha.execute();
    }
})

Note: I don't have a sitekey handy to verify this code. So consider this as an approach rather than working code sample.

It calls the function, but for some strange reason, it calls the function BEFORE executing the grecaptcha call. I guess the Google data-callback var does not call the data-callback as a function...

Ok. In that case you can try this changed approach. Instead of setting data-callback dynamically, let it remain static but define onSubmit function dynamically.

javascript - Passing variables in invisible reCaptcha callback - Stack...

javascript jquery html recaptcha
Rectangle 27 30

Here is an adapted solution that works for me which doesn't require injection of $rootScope into controllers for setting resource specific page titles.

<html data-ng-app="myApp">
    <head>
    <title data-ng-bind="page.title"></title>
    ...
$routeProvider.when('/products', {
    title: 'Products',
    templateUrl: '/partials/products.list.html',
    controller: 'ProductsController'
});

$routeProvider.when('/products/:id', {
    templateUrl: '/partials/products.detail.html',
    controller: 'ProductController'
});

And in the run block:

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.page = {
        setTitle: function(title) {
            this.title = title + ' | Site Name';
        }
    }

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.page.setTitle(current.$$route.title || 'Default Title');
    });
}]);

Finally in the controller:

function ProductController($scope) {
    //Load product or use resolve in routing
    $scope.page.setTitle($scope.product.name);
}

The title set in ProductController ($scope.page.setTitle) is being overridden by $rootScope.$on('$routeChangeSuccess'. Setting a default title in $rootScope.$on('$routeChangeStart' is safer in this respect.

@mr-hash: here is small adjustment I suggest, perfect for existing angular projects with many routes, but without titles. It'll generate title from controller's name, if no title is defined on the route: $rootScope.page.setTitle(current.$$route.title || current.$$route.controller.replace('Ctrl', ''));

this.title = title.replace('<', '&lt;').replace('>', '&gt;').replace(' & ', ' &amp; ') + ' | Site Name';

I got undefined error so I changed the last bit to: $rootScope.page.title = current.$$route ? current.$$route.title + ' | Site Name' : 'Site Name';

javascript - How to dynamically change header based on AngularJS parti...

javascript angularjs templates partial-views angular-routing