I am trying to pass data to client-side by initializing window.INITIAL_STATE, however, this keeps giving me the "Expression expected" error which I am not sure how to fix
<script>
window.__INITIAL_STATE__ = <%- JSON.stringify(initialState) %>;
</script>
You need to wrap the expression in quotes as follows,
<script>
window.__INITIAL_STATE__ = '<%- JSON.stringify(initialState) %>';
</script>
I would recommend you to change the approach and put JSON.stringify into
<script id="__INITIAL_STATE__" type="application/json">
{JSON.stringify(data).replace(/</g,'\\u003c')}
</script>
and on the client side just do
const state = JSON.parse(document.getElementById('__INITIAL_STATE__').textContent)
according to chrome devs it is faster solution and you dont get any surprises related to quotes.
Faster apps with JSON.parse (Chrome Dev Summit 2019): https://www.youtube.com/watch?v=ff4fgQxPaO0
Related
Im trying to use angular in my wordpress plugin, I included it like this:
wp_register_script('jquery-custom', ("http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"), false);
wp_enqueue_script("jquery-ui-custom");
wp_register_script('angular', ("https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"), false);
wp_enqueue_script("angular");
It seems like it is included but I still get "angular is not defined" in my console when I try to use it
I found the problem,
Angular was loaded after my code as wp_enqueue_script includes it at the end of the file.
This it is kinda a dirty solution but I resolved it by simply including the angular.min.js in the html way.
wp_register_script('jquery-custom', ("http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"), false);
wp_enqueue_script("jquery-custom");
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<?php
Hopes that you guys are fine. I'm recently started to learning AngularJS and it was going good. I'm creating controller and using it in my webpages these are working perfectly. But now I'm at a stage there I'm creating controller with app but it's not working Properly I'm following W3schools and I also copied codes from there but even then too it's not working I just tried a lot of time but I don't getting the problem exactly. So if look it and give me a solution then i will appreciate it.
Update of this Topic: Oh Yeah ! I got the Matter.. The problem was I used first a app module on my body tag and that was administrator so I'm trying to use it now on a div under body.. but this tag isn't getting privilege with the tag i used on body so because of it conflicting Now It's clear to me..... I hope it will help many beginners.
Here is those codes:
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
Oh Yeah ! I got the Matter.. The problem was I used first a app module on my body tag and that was administrator so I'm trying to use it now on a div under body.. but this tag isn't getting privilege with the tag i used on body so because of it conflicting Now It's clear to me..... So if you use any app module on your body then you can't use any other app module on div or anywhere under body so while you need many app module please take care about it. otherwise you will messed your important time also like me. and thanks everyone for helping me.
I have an appengine Python application. It includes the simpleauth library. I am viewing the application in Google Chrome.
After I load a page in the application, some text that looks like (for example) "#.UhJcZ2TwKa4" is appended to the end of the URL.
What is this and where does it come from?
Upon edit, maybe it's one of my javascript includes that is doing it. Here are all my javascript includes:
<script type="text/javascript" src="/static/js/tinymce/tiny_mce.js"></script>
<script type="text/javascript" src="//use.typekit.net/dvk0ttp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
Thanks in advance,
Aaron
Looks like you're using AddThis APIs and you have enabled address bar tracking which appends those "strange" characters to the page url.
Those parameters are used to collect data if someone copies the URL somewhere else
If you don't want this feature, you can disable it, editing the javascript config variable for the APIs (See attached link for the tutorial)
data_track_addressbar = false;
Source: AddThis Support
Inserting:
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
before closing the tag cleans the URL
This is the corect resource: Removing all hashtags/anchors from your URLs
I am facing below exception in IE-8 when I am loading the angular related page. It works fine in other browsers. Any specific reason?
SCRIPT5022: Argument 'module' is not a function, got undefined
angular.js, line 975 character 5
I had this same issue (when on IE < 9) and it took me forever to track it down...
angular.module('app', ['app.directives', 'app.filters', 'app.services', ]);
Note the trailing comma after 'app.services'.
I get errors like that when I try to inline end the script tag causing IE to not load all my scripts. Check if you have end tags for all your script includes.
To illustrate:
<script src="js/services.js"></script>
<script src="js/controllers.js"/> <!-- THIS IS A PROBLEM FOR IE -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
On IE9 this will result in:
SCRIPT5022: No module: myApp.filters
angular.min.js, line 17 character 195
Not entirely the same, but I can't test it on IE8. On Chrome however, this works perfectly. The weird thing about this, is actually the thing it can't seem to find, is in the script following the one with the inline ending. I can't really explain that.
Now, when I close the script tag like this:
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> <!-- THIS WORKS -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
It works like a charm.
To sum it up, AngularJS tries to find your module called 'module', but is not able to find it. Probably due to a script that is not loaded. Try to find a script tag which closes inline, and end it as descibed above.
Hope that helps.
Another thing that might cause this is using keywords for object properties. I had three modules with the error above:
statistic.import = !statistic.import;
default: $scope.newGrid.default
$scope.data = JSON.stringify({export: exportParams})
The offending properties being import, default and export.
I don't know if you're still walking around same problem, but i've found up a possible cause:
when you declare any angular module you must inject dependences some like this:
angular.module('MyStore', ['ng','ngRoute']);
if you need invoke that module from another place to perform any action you probably mismatch if you attempt to inject dependences again... then you must call it by its name like this:
angular.module('myStore')
otherwise you will exploit your brain looking for the solution.
I hope it helps!
We are working on a website like www.justdial.com .
We want to provide AutoComplete feature.
This autocomplete feature should be inline with the performance of justdial's.
We are using Indexes, please suggest more ways to provide superfast autocompletion.
I do not have much experience in the subject, but I have just implemented JQuery autocomplete with a medium sized list ~(1,000) entries, partial matches is enabled and it is still astoundingly fast. The only trick I've used is creating seperate js files for the lists and calling them first from the html. I also refrain from using the jquery on ready, so the complete list is bieng uploaded immediately. The actual calls to autocomplete are done on page ready. JQuery AutoComplete
Unfortunately I can't add the actual code because the data is sensitive, but its on the lines of..
<html>
<body>
Some HTML
<script type = "text/javascript" src = "collection.js"></script>
<script type = "text/javascript" src = "jquery.min.js"></script>
<script type = "text/javascript" src = "autocomplete.js"></script>
</body>
</html>
Collection .js would look something like
var collection = ["1","2","3", ... "1000"];
and AutoComplete.js would look like
$(document).ready(function(){
$("#form").autocomplete(collection, { matchContains:true });
});
I don't know what built in optimization Jquery has,but it seems pretty fast to me.
I believe even the Google "Suggest" feature used javascript, so it would just be a matter of keeping the lists sorted and dividing them efficiently? Maybe Huffman Coding could help?