I am having an Auto refresh Button, when the button is ON a particular part of my web page should get refresh. For example if I've a DIV, when the button is ON the content in this DIV should reload. If the button is OFF, the DIV should remain the same.
I have the coding only when the Auto Refresh Button is ON the whole page is refreshing. Is that possible to refresh a particular part of a Web Page?
Here is my Coding:-
var int=self.setInterval(function(){refreshPage()},60000);
$(document).ready(function() {
var hashTag = window.location.href.split('#');
if (hashTag[1] == 'reload') {
$('#refresh').addClass('refresh-on').html('');
}
$('#refresh').on('click', function() {
$(this).toggleClass('refresh-on');
if ($(this).hasClass('refresh-on'))
$(this).html('Refresh On');
else
$(this).html('Refresh Off');
});
});
function refreshPage() {
if ($('#refresh').hasClass('refresh-on')) {
location.hash = 'reload';
window.location.reload();
} else
location.hash = '';
}
You can use the simple jquery's load() method if you can save the content to be refreshed in a separate page.
put the content to be refreshed in 'content.php'
$("#refreshDIV").load("content.php");
you can call this method whenever required and it can load dynamically.
Indeed the jquery's load() method is a good way to update separated content with external scripts...
Below an example with a little html page which contains 2 divs.
One is refreshing every 1 second and another every 3 seconds...
Divs are using the refreshDiv function to refresh.
The refreshDiv function takes 3 arguments:
div_id: This is the id of the div you want to refresh;
script_file: The script you want to launch to refresh your div; (scripts/ directory);
data: Some data passed to the script (PHP) by GET method;
<html>
<head>
<title>Stack OverFlow - 14302842</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function refreshDiv(div_id, script_file, data) {
var today = new Date();
$("#"+div_id).load("scripts/"+script_file+"?_"+Math.random()+"&data="+data);
}
$(document).ready(function () {
refreshDiv('div1','ls.php','/tmp');
refreshDiv('div2','ls.php','/home');
setInterval(function() {
// Do something every 3 seconds
refreshDiv('div1','ls.php','/tmp');
}, 3000);
setInterval(function() {
// Do something every 1 seconds
refreshDiv('div2','ls.php','/home');
}, 1000);
});
</script>
</head>
<body>
<div id="div1" style="color: #F00; border: 1px solid #F00; text-align: center;">Some Text</div>
<div id="div2" style="color: #00F; border: 1px solid #00F; text-align: center;">Some Text</div>
</body>
</html>
Related
I am using the below codes for the pagination without page reload using Ajax, it works fine, but I need the same thing for the search button when I click on it, it refresh the page. I used event.preventDefault() function on the button and it stops refreshing but the result of the search doesn't appears immediately and I need to click on the page number again.
<div align="center">
<button id='search_btn' type="submit" class="btn" style="background-color:#C9C0BB;"><lable style="background-color:#C0C0C0;font-size: 12px;font-weight: bold;"> گەران</lable></button>
</div>
<div id="pagination_data">
#include("report.ad_sr",["search_result"=>$search_result], ["p_num"=>$p_num])
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script>
$(function() {
$(document).on("click", "#pagination a,#search_btn,#searchform", function() {
//event.preventDefault();
//get url and make final url for ajax
var url = $(this).attr("href");
var append = url.indexOf("?") == -1 ? "?" : "&";
//$("#search_btn").preventDefault();
var finalURL = url + append + $("#searchform").serialize();
// $("#search_btn").event.preventDefault();
//set to current url
window.history.pushState({}, null, finalURL);
$.get(finalURL, function(data) {
$("#pagination_data").html(data);
});
return false;
})
});
</script>
I took the Github xAPI script for "playing a youtube video" and tried to modify it to show two videos instead of one. Ultimately I would like to list five or six videos in this page. Unfortunately I cannot get it to show more than one video at a time. Instead it only shows one video and that is the second one that I have listed. Can someone tell me how I can modify this code to list more than one video? Also, I changed my LRS credentials before posting this question for obvious reasons. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="description" content="A shorthand syntax for communicating xAPI Statements">
<meta name="author" content="ADL">
<link rel="icon" href="favicon.ico">
<title>xAPI Youtube Video Tracking</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<section class="container">
<div class="page-header">
<h1 class="text-primary"><i class="fa fa-youtube"></i> xAPI Youtube Video Tracking</h1>
<h3 class="text-muted">Send Youtube Video interactions to an LRS with xAPI</h3>
</div>
<div class="row">
<div class="form-group col-md-12">
<div id="player"></div>
<div id="player2"></div>
<p>This example uses minimal javascript and the youtube iframe API.</p>
<p>Statements are built with xapi-youtube-statements.js and dispatched to an LRS with xapiwrapper.min.js using a custom ADL.XAPIYoutubeStatements.onStateChangeCallback function.</p>
<p>You can view statements with the statement viewer.</p>
</div><!-- .col-md-12 -->
</div><!-- .row -->
</section><!-- .container -->
<script type="text/javascript" src="lib/xapiwrapper.min.js"></script>
<script type="text/javascript" src="src/xapi-youtube-statements.js"></script>
<script>
var video = "6hwHKOYCYL4"; // Change this to your video ID
var videoName = "Microlearning vs Traditional Learning";
var video2 = "SUJkBCHB4vQ"; // Change this to your video ID
var videoName2 = "Micro Learning is a BIG deal";
// "global" variables read by ADL.XAPIYoutubeStatements
ADL.XAPIYoutubeStatements.changeConfig({
"actor": {"mbox":"mailto:john.menken#syniverse.com", "name":"John M."},
"videoActivity": {"id":"https://www.youtube.com/watch?v=" + video, "definition":{"name": {"en-US":videoName}} }
});
ADL.XAPIYoutubeStatements.changeConfig({
"actor": {"mbox":"mailto:john.menken#syniverse.com", "name":"John M."},
"videoActivity": {"id":"https://www.youtube.com/watch?v=" + video2, "definition":{"name": {"en-US":videoName2}} }
});
function initYT() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video,
playerVars: { 'autoplay': 0 },
events: {
'onReady': ADL.XAPIYoutubeStatements.onPlayerReady,
'onStateChange': ADL.XAPIYoutubeStatements.onStateChange
}
});
}
var player2;
function onYouTubeIframeAPIReady() {
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: video2,
playerVars: { 'autoplay': 0 },
events: {
'onReady': ADL.XAPIYoutubeStatements.onPlayerReady,
'onStateChange': ADL.XAPIYoutubeStatements.onStateChange
}
});
}
initYT();
// Auth for the LRS
var conf = {
"endpoint" : "https://www2.test.com/test/ScormEngineInterface/TCAPI/",
"auth" : "Basic " + toBase64("test:test"),
};
ADL.XAPIWrapper.changeConfig(conf);
/*
* Custom Callbacks
*/
ADL.XAPIYoutubeStatements.onPlayerReadyCallback = function(stmt) {
console.log("on ready callback");
}
// Dispatch Youtube statements with XAPIWrapper
ADL.XAPIYoutubeStatements.onStateChangeCallback = function(event, stmt) {
console.log(stmt);
if (stmt) {
stmt['timestamp'] = (new Date()).toISOString();
ADL.XAPIWrapper.sendStatement(stmt, function(){});
} else {
console.warn("no statement found in callback for event: " + event);
}
}
</script>
</body>
</html>
You are overwriting the onYouTubeIframeAPIReady callback immediately upon setting the first one, so that when the iframe is ready the first callback is no longer the value of that function. (Have to think asynchronously.) That function should only ever get called once, and should only have a single definition. To make this work, you need to move the instantiation of player2 into the onYouTubeIframeAPIReady function. (This portion is a duplicate of onYouTubeIframeAPIReady called once but multiple videos needed on a page)
Also note that ADL's wrapper is effectively using a singleton for communications with the LRS, so you are going to get all of your statements for both videos with the activity as the object from the second video (because it is the later call to changeConfig). I don't see a way around this other than to wrap their state change handler with your own function that calls changeConfig each time the event occurs, and even then you'd have the potential for a race condition.
this is my element
<dom-module id="user-verify">
<style>
paper-dialog {
--paper-dialog-background-color: white;
width: 348px;
height: 205.594px;
}
</style>
<template>
<paper-dialog id="id_verify" modal>
<h2><content></content></h2>
<div id="maincontainer">
<div class="g-recaptcha"
data-sitekey="6Lc0pAkTAAAAAGcsiru1MX6kjI6HGV8mbImc0cwk"
data-callback="recaptchaCallback"></div>
</div>
<div class="buttons">
<paper-button dialog-confirm id="varify_button" disabled>Ok</paper-button>
</div>
</paper-dialog>
</template>
<script>
Polymer({
is: "user-verify",
attached: function(){
this.$.id_verify.open();
},
recaptchaCallback: function(){
this.$.varify_button.disabled = false;
}
});
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
However, it doesn't work when i put the javascript of recaptcha in side the head of the html, so i can only put it inside the element. But now ,the data-callback function doesn't work. How to solve this? Or my code have some bugs?
Your callback recaptchaCallback is a method of the polymer object and not public function available for the recaptcha API. The way you register the function (via String) the API assumes your callback is global.
I would simply switch to attaching all the recaptcha-logic programmatically:
...
attached: function() {
grecaptcha.render(this.$.maincontainer.querySelector('.g-recaptcha'), {
'sitekey' : 'your_site_key',
'callback' : this.recaptchaCallback,
});
this.$.id_verify.open();
}
...
my jvector maps are in a dropdown menu, it works well in safari, opera and chrome but breaks
(no map
and error message NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.js "return this.node.getBBox();"
in firefox, I've tried lots of different things but no luck.
these are in the head.
<script type="text/javascript" src="jVectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../maCountries/be_coord.js"></script>
<script type="text/javascript" src="../maCountries/be_map.js"></script>
this is the html in the dropdown menu
<div id="mapJV">
</div> <!--mapjv container-->
This is the code in be_map.js which breaks in firefox.
$(function() {
var map,
map = new jvm.Map({
container: $('#mapJV'),
map: 'be_mill_en',
backgroundColor: '#F6F3EF',
regionStyle: {
initial: {
fill: '#ABBDC4'
},
},
});
});
$( "<style>.jvectormap-container {width : 400px; height: 400px;}</style>" ).appendTo( "head" );
the code in be_coord.js is just the normal coordinates.
Firefox usually has trouble with rendering SVG inside of the hidden elements. So solution here could be creating and rendering map after its container getting visible.
Why doesnt this work?
$(".char").click(function() {
$(this).css('border', "solid 2px red");
});
<img class=char src=1.gif>
<img class=char src=2.gif>
I want it to highlight via border when I click one of the images.
Also I'd like only one to be highlighted at once but I guess I'll look at that after.
use $(document).ready() - your current jquery code executes before the targeted html elements are available in the dom
<script type="text/javascript">
$(document).ready(function() {
$(".char").click(function() {
$(this).css('border', "solid 2px red");
});
});
</script>