Refreshing script without refresh the html page - javascript

Is there anyway to make it refresh the current song without refreshing the page? I have no idea how to do it. I'm not so in about JS.
var response = $.getJSON('//srvstm.com/api-json/VkZkd1JrMUZPVVZYVkRBOStS', addHTML);
function addHTML(data) {
// Getting the HTML elements to write in
var cs = document.getElementById('current-song');
var g = document.getElementById('genre');
// Setting data attributes to HTML
cs.innerHTML = data.musica_atual;
g.innerHTML = data.genero;
}
<div>
<span id="genre"></span>
<h1 id="current-song"></h1>
</div>

Finally made a script that refresh a specific content at a div.
$(document).ready( function(){
$('#song').load('http://boomerangfm.xyz/musica.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#song').fadeOut('slow').load('http://boomerangfm.xyz/musica.php').fadeIn('slow');
refresh();
}, 30000);
}
<div id="song">rĂ¡dio boomerang fm</div>

Related

How to open an app without redirecting the page

I currently have a button. When it's clicked I execute a javascript code.
var openAppBtn = document.getElementById("openAppBtn");
openAppBtn.onclick = function () {
var app = {
launchApp: function () {
window.location.replace("testappscheme://")
}
};
app.launchApp();
};
<a id="openAppBtn" class="btn" href="">Open KWCP App</a>
when I execute this bit of code on iOS, the page does a refresh if the app is not installed. May I ask how do I attempt to open the app without the page redirecting.
You could use an iframe to trigger the app intent. Example code for triggering the intent on the page-load for example. Just put it inside your click function.
<script type="text/javascript" charset="utf-8">
var frame = document.createElement('iframe');
frame.src = 'testappscheme:/' + window.location.pathname + window.location.search;
frame.style.display = 'none';
document.body.appendChild(frame);
// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
</script>
Simply by clicking the button, add an iframe to your page with the schema-url.

HTML Button Opening and Filling Out Other Page (using javascript)

I'm trying to open the Enrichr website (https://amp.pharm.mssm.edu/Enrichr/) and auto-fill a list of genes into the large box for genes. Here the variable "data" represents those genes. I have a button in my html code that executes the following function:
function myFunction()
{
var data = "hello";
var OpenWindow =window.open("https://amp.pharm.mssm.edu/Enrichr/");
OpenWindow.onload = function(){
OpenWindow.document.getElementById("text-area").value = data;
}}
This code doesn't seem to work. It opens the webpage but does not fill anything out. I don't think the onload function is working properly.
I think the problem is that you want to change OpenWindow.document.getElementById("text-area").value before page load completly. Maybe try it like this:
function myFunction() {
var data = "hello";
var OpenWindow =window.open("https://amp.pharm.mssm.edu/Enrichr/");
OpenWindow.onload = function () {
OpenWindow.document.getElementById("text-area").value = data;
}
}

window.onload function not running on refresh

I have an window.onload function that does not run when a user manually refreshes the page. I have noticed that on the page refresh, the URL is appended with a # at the end, but I don't know if that has anything to do with the error. The function correctly executes when first loaded, but not after a refresh.
window.onload = function() {
alert("HERE");
var a = document.getElementById("link1");
a.onclick = function() {
var current = window.location.href;
alert(current);
if (current.indexOf("&page=") != -1) {
current = current.substring(0,current.indexOf("&page="));
}
var nextPage = current + "&page=link1"
window.location.replace(nextPage);
return false;
}
}
UPDATE: It seems as though it is working in Chrome, but not Safari.
Also, additional information, my a tag looks like this:
<a id='link1' href='#'>Link 1</a>
try using :
$(document).ready(function() {
});
instead.
check if it helps..

jQuery .load: any way to load the same page when page is refreshed

So I have a website that loads pages to a container div:
function goto(addr) {
$("#content").load(addr);
}
and a link that executes it
About us
My problem is that whenever the page is refreshed, the loaded content resets to the default page (page/home.php). How could I do so that it loads the previous displayed page?
Use local storage for example or sessions.
Local storage example:
$(document).ready(function() {
var lastPage = localStorage['lastPage'];
if (!lastPage) { // If user was on any url before we will exectue goto function
goto(lastPage)
}
function goto(addr) {
localStorage['lastPage'] = addr; // Set url to local storage before load page
$("#content").load(addr);
}
});
not only localStore but you need change the hash of url, and after do one function to catch hash code and execute at you "goto" function...
"something like that"
function hashnav(){
var hashfull = document.location.hash
var hash = hashfull.replace('#', '');
var $page = '';
goto(hash);
}
function changeHash($hash) {
window.location.hash = $hash;
}
function goto(addr) {
changeHash(addr);
}
$(window).bind( 'hashchange', function() {
hashnav();
return false;
});

jQuery, update content when necessary

I'm trying to update contents of a chat located in div (div1) but only when the contents of div1 change (a message was submitted into db and picked up in div1).
I tried the solution from here but my get fails to compare the data.
This solution works perfectly but without content comparison:
window.onload = startInterval;
function startInterval()
{
setInterval("startTime();",2000);
}
function startTime()
{
jQuery('#div1').load('index.php #div1 > *');
}
This is the modification based on this, which fails:
window.onload = startInterval;
function startInterval()
{
setInterval("startTime();",2000);
}
function startTime()
{
var $main = $('#div1');
$.get('chat.php #div1', function (data)
{
if ($main.html() !== data) $main.html(data);
});
}
I tried various modifications of this code but to no avail...
I can't reload the entire page and I don't want to do this if not necessary since it makes the chat harder to read if you have to scroll trough the messages.
How can this be fixed?
UPDATE
Based on #T.J's suggestions I modified the code which now works perfectly:
window.onload = startInterval;
function startInterval()
{
setInterval(startTime,3000);
scrolDown();
}
function startTime()
{
var $main = $('#div1');
$.get('#div1', function (data)
{
elements = $(data);
thisHTML = elements.find("#div1").html();
if ($main.html() !== thisHTML) {
$main.html(thisHTML);
scrolDown();
}
});
}
The other problem was that get required library:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
which apparently was not required by the load which I used previously.
You want to use get, but you want the fragment feature of load, so you'll have to do that work yourself. Then remember what you got last time, and only update if it's not the same:
var lastHTML;
function startTime()
{
var $main = $('#div1');
$.get('chat.php', function (data) // <== Or index.php, the question has both
{
var elements, html;
// Turn the HTML into elements
elements = $(data);
// Get the HTML of *only* the contents of #div1
html = elements.find("#div1").html();
// If that has changed, use it
if (lastHTML !== thisHTML) {
lastHTML = thisHTML;
$main.html(thisHTML);
}
});
}
Note that that's a fairly basic implementation of the fragment feature (it doesn't, for instance, strip out scripts the way load does). You may want to look at how load does its fragment stuff and replicate that (the joy of open source).

Categories

Resources