partial page update with navigation - javascript

First of all, I apologize because this is my first time trying to code a website (or anything), so this might be a stupid question.
I have a web page where I would like to update only a single div when a link in the navigation bar is clicked.
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<b>1</b>
</li>
<li>
<b>2</b>
</li>
<li>
<b>3</b>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>
</body>
</html>
I know, it's a lot of useless stuff, but you get the point. What I'm trying to do is as you click on 1, 2, 3, etc., only the content of the div "mainwrap" changes, as does the URL (so the page does not refresh, but the URL changes from www.website/1.html to website/2.html, etc. and the content of the one div changes). I have different HTML files for 1, 2, and 3, each with different "main" divs, which ideally will be inserted into the "mainwrap."
I've tried following along with tutorials like https://css-tricks.com/rethinking-dynamic-page-replacing-content/ and other stackoverflow posts like how to do partial page update with jquery. That second one seems like what I want to do, but when I try to implement it, it still doesn't work. Is there a simple fix that I am just missing because I don't know much about coding? (Also, I'm using Dreamweaver. I don't know if that makes a difference.)
Thanks!

You are right how to do partial page update with jquery is exactly what you need. I assume you are new to jquery stuff so here is the complete markup http://jsfiddle.net/yrbvnayy/ that will get your job done!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
</header>
<section id="section1">
<div>
</div>
<nav id="mainnav">
<ul>
<li>
<b>1</b>
</li>
<li>
<b>2</b>
</li>
<li>
<b>3</b>
</li>
</ul>
</nav>
</section>
<section id="section2">
<div id="mainwrap">
<div id="main">
</div>
</div>
</section>
</div>
<script type="text/javascript">
$("#mainnav li a").click(function(e) {
// prevent from going to the page
e.preventDefault();
// get the href
var href = $(this).attr("href");
$("#main").load(href, function() {
// do something after content has been loaded
});
});
</script>
</body>
</html>

I am using the same reference for jquery ajax to explain the answer. How to do partial page update with jQuery?
In your case I will apply the above usage as
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
//either use e.preventDefault() to stop the default event or return false
var loc=$(this).attr('href');
$('#mainwrap').load(loc);
//This should load the html content to your div
})
});
</script>
EDIT
An alternative if you just want the div of the HTML pages you are pointing.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
// either use e.preventDefault() to stop the default event or return false
e.preventDefault();
var loc = $(this).attr('href');
$.ajax({
url: loc,
type: 'GET', // can be GET or POST depending on your requirement
success: function(data, textstatus, xhr)
{
var div = $(data).find('#main');
$('#mainwrap').html(div);
},
error: function(xhr, status, error)
{
alert('Error - ' + xhr.responseText);
}
});
// This should load the html content to your div
})
});
</script>
Fore more ajax related documentation you can go through http://api.jquery.com/jquery.ajax/

The example you cite is using php, which can do what you want.

Related

trouble loading javascript on html page load from jquery .load()

Working on a personal project with a navigation bar. I am using jquery x.load() to load html pages into a specific div. The pages load correctly into the div. However, one of the is using a jquery flipswitch. I am trying to read the state of this flipswitch, to no prevail. I have a main javascript file that loads the individual pages, which is basically my x.load(). I have a working jquery script for reading the switch state, that works when placed directly into the developers console. I have attempted this code both inline in the individual page as well as my main javascript file. When I place it inside the individual page, it will at times cause a race condition to develop.
I am looking for any suggestions, advice, or direction on being able to read the status of the flipswitch from the individual pages.
The first section of code is my javascript file. The second section of code, is both my individual page, as well as my main html page that loads the individual html page, respectively.
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm'),
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="apt.css">
</head>
<body>
<header class="page-header">
<div class="apartment-name">Carlson Casa</div>
<div class="data-top">
<ul class="top-data">
<li>Time</li>
<li>Outside Temp</li>
<li>Inside Temp</li>
<li>Menu<span></span></li>
</ul>
</div>
</header>
<main class="main-content">
<nav class="side-nav">
<ul>
<li>Apartment</li>
<li class="nav-label">Living Room</li>
<li>Alarm control</li>
<li>Chandelier</li>
<li class="nav-label">Bedroom</li>
<li>Lights</li>
<li>Alarm Clock</li>
</ul>
</nav>
<div class="content">
Controls go here
</div>
</main>
<script src="jquery-2.1.4.js"></script>
<script src="main.js"></script>
</body>
</html>
As you are using jQuery Mobile Flipswitch of type checkbox, you can get the status by checking the property checked. Here is a jQuery Mobile Flipswitch playground:
var cases = {false: "Unchecked", true: "Checked"};
function getStatus() {
$("#statusLeft").html(cases[$("#LeftSwitch").prop("checked")]);
$("#statusRight").html(cases[$("#RightSwitch").prop("checked")]);
}
$(document).on("change", "#LeftSwitch", function(e) {
var status = $(this).prop("checked");
$("#statusLeft").html("Changed to "+cases[status]);
});
$(document).on("change", "#RightSwitch", function(e) {
var status = $(this).prop("checked");
$("#statusRight").html("Changed to "+cases[status]);
});
function toggleLeft() {
var status = $("#LeftSwitch").prop("checked");
$("#LeftSwitch").prop("checked", !status).flipswitch("refresh");
}
function toggleRight() {
var status = $("#RightSwitch").prop("checked");
$("#RightSwitch").prop("checked", !status).flipswitch("refresh");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<span id="statusLeft">Unchecked</span>
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
<span id="statusRight">Unchecked</span>
</form>
<button class="ui-btn" onclick="getStatus();">Get Status</button>
<button class="ui-btn" onclick="toggleLeft();">Toggle Left</button>
<button class="ui-btn" onclick="toggleRight();">Toggle Right</button>
</div>
</div>
</body>
</html>
By using the change event instead of click you will be notified of the flipswitch toggling also if you are setting the status in code.
Additional notes:
About what you are defining "race condition" i believe you are referring to one of the common mistakes when using jQuery Mobile, i.e. document.ready vs. page events. Please read this post here, and also take some time to read the whole story in deep in this great post of Omar here: jQuery Mobile “Page” Events – What, Why, Where, When & How? (you will find here some other useful posts about this topic).
Moreover: you are trying to update the flipswtches manually by setting the ui-flipswitch-active class by yourself, but i believe you will run into the problem of keeping the status and the ui consistent. So, you may better use the standard JQM way to set the flipswitch status by using flipswitch.refresh. There is already an example in my code snippet.
The last note: until you strongly need it - and you know how to versioning jQuery Mobile - please use the same version of these libraries in all your files, so in your case i believe the pair jQuery 2.1 + JQM 1.4.5 shall be just fine.
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm');
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')});
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>

JQuery dynamic html page

When the button is pressed i would like for another div tag to appear on the screen for the user. I have tried and looked through many web pages to see what is going wrong. There is no error on the console for the webpage. Here is the HTML code and JavaScript code.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li>NewsFeed</li>
<li>Discover</li>
<li>Following</li>
</ul>
<div class="logIn">
Login
Sign Up
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id=newDiv>
<div id=div01> Hello </div>
</div>
<script src="operations.js"></script>
</body>
</html>
$("buttonId") is a selector that won't match any element (as it searches for an element with a tag buttonId).
You should change it to $("#buttonId") for it to work.
There were some mistakes in your code.
$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
In the above code. # character is missing before buttonId. So it will not match anything. This is the corrected version
$("#buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
Also in your HTML, you have forgotten to place double quotes outside ids of newDiv and div01. Here is the corrected version
<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li>NewsFeed</li>
<li>Discover</li>
<li>Following</li>
</ul>
<div class="logIn">
Login
Sign Up
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id="newDiv">
<div id="div01"> Hello </div>
</div>
<script src="operations.js"></script>
</body>
</html>
It appears as though you're missing the '#' sign in front of your $('buttonId').
So it should be:
$("#buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});
Cheers,
David

How do I dynamically populate jQuery Mobile pages using JSON data?

I'm trying to get data from some external JSON (http://ip-api.com/json). I then want to use the keys to dynamically populate a listview. I want each list item to be a link, and when you click the link, the jQuery Mobile page will contain the key's matching value. I have two jQuery Mobile pages, one home, and one other.
I'm trying to achieve this by changing the id of the the second "data-role=page" div to the current key data, and also appending key data to h2, and appending the value data to p. It's creating a correct list of the keys, but when I click on the first item, the h2 contains ALL of the keys, and the p contains ALL of the values. How can I amend this so that each key/value pair ends up as the h2 and p of whichever jQuery Mobile page is currently being created by clicking the corresponding key list item?
I've been trying to use the code from How to populate a jQuery Mobile ListView with JSON data? but I can't quite get it working as it isn't using external JSON.
<!DOCTYPE html>
<html>
<head>
<title>Geo-Location Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
<link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="assets/js/geoLocation.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Geo-Location Data</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h2>Click here for Geo-Location Data</h2>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="user" data-autodividers="true">
</ul>
</div>
</div>
</div>
<div data-role="page" id="dataPage">
<div data-role="header">
<h2 id="dataHeading"></h2>
</div>
<div data-role="content">
<p></p>
</div>
</div>
</body>
</html>
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li>' + ''+ key + '' + '</li>');
$("ul#list").listview("refresh");
$("div#dataPage").attr("id", key);
$("h2#dataHeading").append(key);
$("p").append(val);
});
});
})
You are using an $.each loop so it keeps appending $("h2#dataHeading").append(key); & $("p").append(val); to the 2nd page as it loops through the json data so its not actually creating separate pages. All it does is change the id of the dataPage page once and it wont be able to find $("div#dataPage") thereafter so i'm surprised all the links in the items work except for the first one.
A more efficient way is use the data-* attribute to store the key and val directly on the list items, grab them upon click, append to the 2nd page and open the 2nd page dynamically. This alleviates the need for separate pages while keeping the DOM small
e.g
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li data-key="'+key+'" data-val="'+val+'"><a>'+ key + '</a></li>');
$("ul#list").listview("refresh");
});
});
//The list item click function
$("#list> li").on("click", function() {
var key= $(this).attr("data-key");
var val= $(this).attr("data-val");
$("#dataHeading").empty().append(key);
$("p").empty().append(val);
$(":mobile-pagecontainer").pagecontainer("change", "#dataPage", { transition: "slide" });
});
});
I suggest replacing $(document).ready with something like pagecreate as JQM works best with inbuilt page Events
When using $(":mobile-pagecontainer") you could also send data to a page but you will need another function like pagebeforeshow to append the data to the page before it displays it -- If you decide to do it this way, read the Notes for what versions is supported. JQM deprecates some events in versions in favor of new replacement events
A solution. What worked was entirely dispensing with the second JQM page, and creating it by appending the data to the body in the JavaScript. Here's the updated code.
<!DOCTYPE html>
<html>
<head>
<title>Geo-Location Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
<link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="assets/js/geoLocation.js"></script>
</head>
<body>
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Geo-Location Data</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h2>Click here for Geo-Location Data</h2>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="arrow-r" data-autodividers="true">
</ul>
</div>
</div>
</div>
</body>
</html>
$(document).ready( function() {
$.getJSON("http://ip-api.com/json", function(data){
$.each(data, function(key, val){
$("ul#list").append('<li>' + ''+ key + '' + '</li>');
$("body").append('<div data-role="page" id="'+ key +'"><div data-role="header" id=""><h2 id="dataHeading"></h2 ></div><div data-role="content"><p>'+ val +'</p></div></div>');
$("ul#list").listview("refresh");
});
});
});

jQuery Mobile - listview data-inset on refresh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace

3 iFrames, 3 Links - Show 1 iFrame using onclick, while hiding the others

I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>

Categories