We Keep Coding

Roku remote in javascript

I am get errors in the web console for my roku remote control script. The javascript is as shown here:
<script>
function rokuSend(RokuAccess) {
xhr = new XMLHttpRequest();
xhr.onload=function() { alert(xhr.responseText); }
xhr.open("POST", RokuAccess);
xhr.send();
}
function rokuKeySend(keyVal) {
rokuSend("http://" + document.getElementById('RokuIP').value + ":8060/keypress/" + keyVal);
}
I supply the IP address for the Roku using:
<form id="Roku"><input type="text" id="RokuIP"></form>
When ever I press a key on my web based remote it send a command, to simplify things I will be using the SAME function to send key presses as well as other commands. So one of the functions called "rokuKeySend()" simply constructs the proper string that is needed to send a command issued by a key press. The second function "rokuSend()"sends the command to the Roku. Later additional commands will be sent to collect data from the Roku so I will create more functions that use "rokuSend()". For now I use the following buttons (these will later be replaced with images), for now they work fine as proof of concept:
<button type="button" onclick="rokuKeySend('Back')">Back</button>
<button type="button" onclick="rokuKeySend('Home')">Home</button>
<button type="button" onclick="rokuKeySend('Up')">Up</button>
<button type="button" onclick="rokuKeySend('Left')">Left</button>
<button type="button" onclick="rokuKeySend('Select')">Select</button></td>
<button type="button" onclick="rokuKeySend('Right')">Right</button>
<button type="button" onclick="rokuKeySend('Down')">Down</button>
<button type="button" onclick="rokuKeySend('InstantReplay')">InstantReplay</button>
<button type="button" onclick="rokuKeySend('Info')">Info</button>
<button type="button" onclick="rokuKeySend('Rev')">Rev</button>
<button type="button" onclick="rokuKeySend('Play')">Play</button>
<button type="button" onclick="rokuKeySend('Fwd')">Fwd</button>
<button type="button" onclick="rokuKeySend('Backspace')">Backspace</button>
<button type="button" onclick="rokuKeySend('Search')">Search</button>
<button type="button" onclick="rokuKeySend('Enter')">Enter</button>
After placing the IP into the input of the form, I can press ANY of the buttons and they do work. However they 'visually' depress when clicked by a mouse, but do not return from the depressed state. Upon checking the web console of the browser I found an error. This error is likely the reason I do not get return from the depressed state. How do I fix this? The error is listed below:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xxx.xxx.xxx.xxx/keypress/KEY. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
In the above error 'xxx' represents the IP and 'key' represents the key that was pressed.

Its mentioned in the error, CORS Header is missing. Cross Object Resource Sharing(CORS) requires to add header "Access-Control-Allow-Origin" in the request. You can try to add this header in the request-
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
If its not working, you have to create something proxy kind of solution. You can find more details here and here regarding CORS and fixing the error.

How to reload page in MVC dynamically

Can someone help me? I want to change my page when some status change. I don't want to see that refresh sign above.
<script type="text/javascript" language="javascript">
var idleInterval = setInterval("reloadPage()", 5000);
function reloadPage() {
location.reload();
}
</script>
<h2>Verlichting</h2>
<div class="Verlichting">
<div class="Border">
Verlichting Garage 1
</div>
<div class="ButtonVerlichting">
#if (Model.Verlichting1 == true)
{
<button class="On">Aan</button>
}
else if (Model.Verlichting1 == false)
{
<button class="Off">Uit</button>
}
</div>
<div class="Border">
Verlichting Garage 2
</div>
<div class="ButtonVerlichting">
#if (Model.Verlichting2 == true)
{
<button class="On">Aan</button>
}
else if (Model.Verlichting2 == false)
{
<button class="Off">Uit</button>
}
</div>
<div class="Border">
Verlichting Garage Grind
</div>
<div class="ButtonVerlichting">
#if (Model.VerlichtingGrind == true)
{
<button class="On">Aan</button>
}
else if (Model.VerlichtingGrind == false)
{
<button class="Off">Uit</button>
}
</div>
</div>
<div class="clear">
</div>
When one of the Models bool change.
My page need to change when some State change. The buttons control some lights.
Now I refresh te page every 5 seconds. But i want when one state change it change?
I work normally with C# MVC but not with javascript of something else.

You cannot refresh the View server side or "dynamically" with your current code.
HTTP is stateless.
HTTP works like this: a client (web browser in your case, like Chrome) has requested a resource from your server (/mywebsite/myview) because you entered a web address/URL/URI into your web browser location bar. That web address is a "mapping" to your server. An HTTP GET request is sent from your browser to your server and your server is running ASP.NET, IIS processes the request and passes the request to your ASP.NET MVC app. Your controller/view route entry matches and your ASP.NET app View code is served back to the web browser in the form of an HTTP response.
Your web browser parses the Response, containing CSS/HTML and Javascript and renders the view/page.
Your browser is now disconnected from the server. Your browser is not going to talk to your server again unless you take an action like pressing a button or entering a different URL into the location bar. On the other side, your server has no current way to talk to the client browser, your server is disconnected from your client/web browser.
This is a standard HTTP request/response.
You are looking for a push notification feature in your software. Since you are using ASP.NET and are not familiar with Javascript, SignalR would be the best way to keep a connection open between the web browser and your server via Web Sockets with a long polling fallback. SignalR is very easy to use and get setup.
Long polling is what you are currently doing, you are checking every 5 seconds for a change. You can continue to this but instead of getting all the HTML/CSS and Javascript again with a reload. Simply check some other Controller/API endpoint for a state change and then reload the whole page only when that state change occurs. This is actually a reasonably scalable solution from the sounds of your current needs.

How to Download Locale TTS

I wanted to ask how you could add a button to download the audio according to the text entered. If there is no possibility of doing so, any recommendation? Attached the code of what I have advanced.
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<div class="col-md-4">
<div class="form-group{{ $errors->has('dia_final') ? ' has-error' : '' }}">
<label>Mensaje</label>
<div class="input-group">
<input type="text" name="text">
Escuchar Texto!
</div>
<audio src="" hidden class=speech></audio>
<script>
$("a.say").on('click', function(e) {
e.preventDefault();
var text = $("input[name=text]").val();
responsiveVoice.speak(text, "Spanish Female");
text = encodeURIComponent(text);
var url = "http://"
})
</script>
</div>
</div>
</div>

The endpoint http://responsivevoice.org/responsivevoice/getvoice.php shall facilitate your requirement. For instance the URL https://code.responsivevoice.org/getvoice.php?t=hello%20world&tl=en-US dispenses the audio hello world.
A mundane solution to achieve an one-click download via pure client-side scripting would be to fetch the audio file utilising AJAX, convert it into an object URL and use an anchor element to trigger the download.
However, since the endpoint is served without CORS headers the use of a service equivalent of https://cors-anywhere.herokuapp.com/ would be required.
I have drafted a specimen at https://jsfiddle.net/u2chbxq7/ which shall serve as a roadmap.

JavaScript/jQuery: Setting up IP Geolocation API within CodePen

I am very new to using APIs and am having a difficult time making a GET request to IP Geolocation API. I am not sure if the problem is with my code or with something concerning CodePen (it's probably my code).
I took the JavaScript directly from the example listed on IP Geolocation API page. I was going to modify it after seeing it work in action but I couldn't get it work at all. I tried modifying the URL to include both http:// and https://.
JavaScript:
$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var table_body = "";
$.each(data, function(k, v) {
table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>";
});
$("#GeoResults").html(table_body);
});
});
HTML:
<div class="weather">
<div class="row title">
<h1>weather</h2>
</div>
<div class="row icon">
</div>
<div id = "GeoResults" class="row temp">
<p class = "city">City here</p>
</div>
</div>
URL to my CodePen: https://codepen.io/mattr8/pen/yXEMRM
API I am trying to use: http://ip-api.com/docs/api:json

Codepen doesn't want to work with ip-api.com because of https. Because codepen is served over https it will block any requests that are not https. If you go to http://ip-api.com/json/?callback=? you will see the information you're trying to reach. If you go to https://ip-api.com/json/?callback=? you will receive an error.
The jsbin example they link to does not use https, so it works fine.
So to fix your issue, create an example on a service or your own machine using http, not https for the request.

jQuery ajax stopped working

My jQuery script stopped working when I moved my clients site from the dev-site to their own site (which basicly has the same setup using a VPS).
jQuery(document).ready(function() {
jQuery('input[name=button]:button').click(function(){
jQuery("#show").html('<center><img src="http://xxxx/images/ajax-loader.gif"></center>');
jQuery.get("http://xxx/inc/usrreg_ajax.php",{
namn: jQuery("input[name='namn']").val(),
nyhetsbrev: jQuery("input[name='news']").val()},
function(data){
jQuery("#show").fadeIn("slow").html(data);
});
});
});
im using the html
<div id="registering" style="margin-top: 15px;">
<div style="float:left;">
<label for="namn">Namn:</label><br/>
<input type="text" name="namn"><br/>
<input type="checkbox" name="news" value="ja">Ja, jag vill ha nyhetsbrev! <br/>
<div style="clear:both;"></div>
<input type="button" name="button" value="Anmäl dig!">
<div id="show"></div>
</div>
I've not made any changes post move and the jQuery script works perfect on the dev-site.
Very gratefull for any input!
All the best,
Marten

Is xxx/inc/usrreg_ajax.php on the same domain as your new site?
You have to remember that there a same origin policy that, for security reasons, prevent you from perform ajax calls from other domain urls.
http://en.wikipedia.org/wiki/Same_origin_policy
Due to browser security restrictions,
most "Ajax" requests are subject to
the same origin policy; the request
can not successfully retrieve data
from a different domain, subdomain, or
protocol.
You can use jsonp for different domain calls, but you will have to use jQuery.ajax for that, and won't be able to get the html as simple as you are doing right now

I test it here http://jsfiddle.net/bingjie2680/D4NuF/ and it works(get the image to show up), there must be a problem with the link to jQuery library.