Tag Archives: Quick

Quick N Dirty – Enable CORS in WordPress 4

Hello again, another Quick n Dirty here, this time for wordpress (on Windows).

Specifically, if you are using the JSON API for wordpress and you find that you’re getting the following error from a JSON call.

 XMLHttpRequest cannot load http://blog.somedomain.com/wp-json/posts. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.somedomain.com' is therefore not allowed access.

If you have a site which is on a different domain, a standard install of the json plugin will not allow you to communicate with your wordpress site via json.

The solution is to add a header to the wp-json plugin code. Bear in mind that an update to the plugin will most likely mean you will need to reapply this fix.

Open up the wp-content/plugins/json-rest-api/lib/class-wp-json-posts.php

At around line 190, add the header, as below, underneath the “Last- Modified” header;

 $response->header( 'Last-Modified', mysql2date( 'D, d M Y H:i:s', get_lastpostmodified( 'GMT' ), 0 ).' GMT' );
 
 $response->header("Access-Control-Allow-Origin","*"); 

For other REST end points, open up the appropriate class file and add the line in what looks like a similar place. I have faith in you!

🙂

Until, next time.

Quick n dirty – Angular Directives

Going to be doing a few of these Quick n Dirty tutorials over the coming weeks, showcasing bite size quick how-to’s on useful web tech and IT.

First up, some Angular click bait help for those who want to get stuck into the popular Javascript framework.

The Angular mantra is all about not touching that DOM with your controller, and the best way of following that rule (and create re-usable controls) is by separating as much as you can in Directives.

Directives are components which have their own scope and can be slotted into any page to show content, either by using your very own tag, or including them as an attribute.

Firstly, create an angular app.

<html ng-app="QADApp">
<head><title>QAD Angular directives</title></head>
<body>
<!-- (A) html goes here -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script>
var QADApp=angular.module("QADApp",[]);
// (B) your directive script goes here

</script>
</body></html>

Now, lets plan our Directive quickly.

It will show a message, based on a value.  Done.
🙂

We will use the Element style of directive by using the following HTML. note how we separate our name by the camel case in the directive configuration.

<my-message-is-shown value="bye"></my-message-is-shown>

..alongside an “E” setting in the directive’s restrict object parameter..

<script>
var QADApp=angular.module("QADApp",[]);
QADApp.directive("myMessageIsShown",[function(){
return{
   restrict:"E",
   scope:{
          value:"@"
   },
   template:"<div ng-if=\"value=='hello'\">Howde</div> <div ng-if=\"value=='bye'\">See ya</div>"
 }
}]);
</script>

I generally place the template text in a function, so the code’s readable, but that isn’t quick, or dirty!

The full page, just to show you don’t need a controller either.

<html ng-app="QADApp">
<head><title>QAD Angular directives</title></head>
<body>
<!-- stuff goes here -->
<my-message-is-shown value="bye"></my-message-is-shown>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script>
var QADApp=angular.module("QADApp",[]);

QADApp.directive("myMessageIsShown",[function(){
 return{
   restrict:"E",
   scope:{
     value:"@"
   },
 template:"<div ng-if=\"value=='hello'\">Howde</div> <div ng-if=\"value=='bye'\">See ya</div>"
 }
 
}]);

</script>
</body></html>

The value attribute can be called anything as it is in its own scope, so I could have done the following;

scope:{ value:"@greeting"}

and changed the attribute name to greeting and it still would work.

Have a look at the Angular directives guide for more information.

Angular Directives

You can create a directive in a separate module and then inject it into the original module like below. I won’t show the whole script, you should be able to work it out. 🙂

var QADApp=angular.module("QADApp",["QADDirectives"]);

See you next time!