I am continuing my quest using JQuery mobile and I have ran into a new problem.
I created a small JQuery slide menu that utilizes JQuery toggle.
$( "#TestMenu" ).toggle( "slow", function() {});
What happens is that the entire script runs fine. UNTIL,, I click on a link and load a page. Even though the page has the same content.
When I press F5 the menu works fine again.
I do know that with Jquery mobile something has done with the loading. I presume therefore that this is the issue.
But how to get around this. I do not know.
I created a small test case to isolate the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test & Go</title>
<meta name="viewport" content="width=1080, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link href="interface/test/mobile.theme.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## FUNCTION TO LOAD ALL QUICKHANDLING OPTIONS
///########-------------------------------------------------------------
///########-------------------------------------------------------------
function TestAndGoFunctions(){
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## HANDLING : CHANGE THE PAYMENT
///########-------------------------------------------------------------
///########-------------------------------------------------------------
$("body").on("click", "#TestMenuButton", function() {
///######## TOGGLE THE DISPLAY STATE OF THE MENU
$( "#TestMenu" ).toggle( "slow", function() {});
});
}
$(document).ready(function() {
///######## LOAD THE Test AND GO FUNCTIONALITY
TestAndGoFunctions();
});
</script>
</head>
<body>
<div id="TestMenuButton"></div>
<div id="TestMenu">
<ul>
<li>Start</li>
<li>Actions</li>
</ul>
</div>
<div id="testBlock">
VARIABLE = <?php echo #$_GET['page']; ?>
</div>
</body>
</html>
I tried to make a JSfiddle link.. But that does not work a 100% because it does not want to reload my page so I cannot show the error there. Despite that here is the link:
https://jsfiddle.net/ferencik/xucrhvhr/
I have edited the jquery code in an attempt to autoload the content. But no success yet.
Below my code :
<script type="text/javascript">
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## FUNCTION TO LOAD ALL QUICKHANDLING OPTIONS
///########-------------------------------------------------------------
///########-------------------------------------------------------------
function TestAndGoFunctions(){
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## HANDLING : CHANGE THE PAYMENT
///########-------------------------------------------------------------
///########-------------------------------------------------------------
$("body").on("click", "#TestMenuButton", function() {
///######## TOGGLE THE DISPLAY STATE OF THE MENU
$( "#TestMenu" ).toggle( "slow", function() {});
});
}
$(document).on("pageshow", function( event ) {
TestAndGoFunctions();
});
$(document).ajaxComplete(function(){
///######## LOAD THE Test AND GO FUNCTIONALITY
///TestAndGoFunctions();
});
$(document).ready(function() {
///######## LOAD THE Test AND GO FUNCTIONALITY
///TestAndGoFunctions();
});
function TestClick(){
$( "#TestMenu" ).toggle( "slow", function() {});
alert("HI!!");
}
</script>
I hope that anyone could tell me what I am doing wrong!
This is because jquery mobile loads new pages via ajax, so basically the ready function does not get 'loaded again'.
Read this: http://demos.jquerymobile.com/1.1.0/docs/api/events.html
And read this: Difference between jQuery and jQuery Mobile?
Related
I'm creating a webview Chrome app that should auto refresh its window.
I've tried using html meta refresh, but it didn't work:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5" >
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!-- Most magic happens here -->
<webview id="webview" src="URL" partition="persist:applicationize"></webview>
<!-- Embed script to capture keystrokes -->
<script src="../js/embed.js"></script>
</body>
</html>
You can reload the page using javascript like this
location.reload();
so to refresh every 5 seconds you can do the following
setInterval( () => {
location.reload();
}, 5000)
The code should be in your extension as when you reload the page, the page's code will stop execution.
OR
You can fire the setTimeout function after the page is loaded which will execute the refresh after 5 seconds like this
setTimeout( () => {
location.reload();
}, 5000)
I am trying to add a google hangout button to my html file as shown below but when I run the html page , the button does not show.
<!DOCTYPE html>
<html>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="placeholder-rr"></div>
<script>
gapi.hangout.render('placeholder-rr', {
'render': 'createhangout',
'initial_apps': [{'app_id' : '184219133185', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
'widget_size': 175
});
</script>
</html>
First please check if any errors showing up in browser console using f12 key when on browser and reload the page.
Try adding this script as well alongwith platform.js to the page you want the hangout button.
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
Hope this helps
Example code:-
<div id="hangout-button-holder"></div>
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
$(document).ready(function(){
gapi.hangout.render('hangout-button-holder', { 'render': 'createhangout', 'topic': 'Its a demo app dont freak out', 'hangout_type': 'onair', 'initial_apps': [{'app_id' : 'xxxxxxxxxxx', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'LOCAL_APP' }],
'widget_size': 175 });
});
</script>
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I'm new to web development and I'm trying to understand how the DOM works.
I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'
See below for the code.
Main Page
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
Code Returned
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
The Updated DOM - notice that my new javascript aren't seen.
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
What I'm trying to understand is;
1) Where does my new script code exist?
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
is it in memory only and not in the DOM?
2) I can get the warning to show correctly i.e $(".showmsg").click
fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?
3) What is the best way to trouble shoot this code if I cannot see it in my browser?
Many thanks!
If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild
An example of doing this would be
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);
Here is a fiddle showing this.
I want to execute some javascript so I have my background.html page set up like this
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "contentscript.js"});
});
</script>
</body>
</html>
I would really like to use JQuery in this script, but I can't figure out how to get it to load. I don't want the content script to go off every time the user loads certain pages, just when they click the extension's button. Any ideas?
chrome.tabs.executeScript method has third parameter which is a callback function that executes when a script is loaded, which you can use to load more than one script in order:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "jquery.js"}, function() {
chrome.tabs.executeScript(null, {file: "contentscript.js"});
});
});
You don't need to include <script type="text/javascript" src="jquery.js"></script> into your background page if you don't plan using it there.