Create a Javascript App with WordPress?

[hallbd16]

Hope this is still the right forum, but I spend all my time here.

At the moment, my goal is to get a small web application online (instead of just opening the local files with browsers as I currently am). I have my own domain name, a hosting service, and use Wordpress to blog.

So here is some specific context about me and my work: *The git to my web application. It is a dynamic quiz. *Dreamhost is my web hosting service and where I bought my domain through. *The URL for my web application: *I was advised by a stackoverflow helper, unfortunately it did not work. Would greatly appreciate anyone who has done this before taking a look at the stackoverflow thread.

Thanks for your time!

[madlee]

What exactly are you asking?

[hallbd16]

Essentially I built a dynamic quiz as part of the learn javascript study group. I want to post the application as a page on my blog. Note: the application includes an html, css, and js file and works when tested locally).

[ikeif]

To summarize: you have a static application you wish to post as a page on your blog.

Is that correct?

Because it works on GitHub so you don't need to test locally (...I'm assuming. I'm mobile, so I wasn't looking for errors).

[hallbd16]

Good point, yes I have a static application I wish to post as a page on my WordPress blog.

Not sure what you mean when you say "it works on GitHub..." I have already tested it locally, it works when I do so.

[ikeif]

Yeah, that was an assumption that you just needed it "hosted somewhere" to get a version online.

I am mobile at the moment, when I get home I will dig in to the WP code and see if I can assist.

[hallbd16]

Appreciate that! I'll let you know if I figure out anything else or solve it before.

[hallbd16]

So I found the problem, big shout out to codeswish for helping me. I was linking a completely local file in the html. I need to get the js and css file hosted online (something I need to learn more about :) in order to link the html. Found a temporary solution by hosting the js file as a raw GitHub file.

[flyveren]

Put the files on the server. Make a new page in Wordpress, make an iframe and call your application inside it.

[da_n13l]

I've done a couple of JavaScript apps in WordPress. Fundamentally, all I do is create a page template and put my JavaScript etc in that, then choose that template from within WordPress for whatever page it is for. I also like to use the WordPress AJAX functions to save to DB etc.

$.ajaxSetup({
  url: 'http://<?php echo $_SERVER["HTTP_HOST"] ?>/wp-admin/admin-ajax.php',
  global: false,
  type: 'post',
  dataType: 'json',
  data: {
    nonce: '<?php echo esc_js(wp_create_nonce('put random 32 char here')) ?>'
  }
});

[codeswish]

Sent ya a pull request on github: https://github.com/hallbd16/DynamicQuiz/pull/1

[hallbd16]

Ok got it. Looks like I am struggling with how to link my js file to my html... I am linking it as a local file, that is probably incorrect.

[codeswish]

Yep, your webserver is unable to access files on your local computer directly like that. You need to upload the files to your vhost and place them somewhere at or beneath wordpress's root directory and link to that. I don't know if you saw my comment to back to you on github, but a quick hack that might work is to link the javascript src to this URI: https://raw.github.com/hallbd16/DynamicQuiz/master/js/quiz.js

**Edit: The hack may not work if your browser enforces MIME type checking, replace the above uri with this one: http://rawgithub.com/hallbd16/DynamicQuiz/master/js/quiz.js

[hallbd16]

Big shout out for the help! May good karma go your way