I created a multipage(data-role="page") html. In page1 i have username field when initially
fill the username it stores in localstorage and redirects to page2. It is working fine again open the app to check localstorage is present or not until hide the page1 in pagebeforeshow event so the problem occurs here the page2 is not created. How to solve this one. Here is the working Fiddle
*Note In fiddle type the text and submit then refresh the page.
Html is like:
<div data-role="page" id="page1">
<div data-role="header">
<h1>page 1 from html</h1>
<a >Go</a>
</div><!-- /header -->
<div data-role="content">
<label>Type text to store in LocalStoreage</label>
<input type="text" id="name" />
<button id="sub">Submit</button>
</div>
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
Back
</div><!-- /header -->
<div data-role="content">
<p> Hi i am second page</p>
</div>
</div><!-- /page -->
script is:
$(document).on("pagebeforeshow","#page1",function(){
$("#page1").hide();
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage){
$.mobile.changePage("#page2");
}else{
$("#page1").show();
}
});
$(document).on("click","#sub",function(){
// alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
$.mobile.changePage("#page2");
});
When comment $("#page1").hide(); this line the page1 shows after that only navigate to page2 i don't want to show the page1 when localstorage is available.
EDIT : Set $.mobile.autoInitialize = false; before loading jquery mobile even though the page1 loads for few seconds.
Try something like this,
windows.location.href="index.html#page2"
OR
windows.location.href="#page2"
instead of
$.mobile.changePage("#page2");
So you can try this code,
$(document).on("pagebeforeshow","#page1",function(){
var locStorage = localStorage.getItem("lastname");
//alert(locStorage);
if(locStorage!=null){
windows.location.href="#page2";
}
else{
windows.location.href="#page1";
}
});
$(document).on("click","#sub",function(){
// alert( $("#name").val());
localStorage.setItem("lastname", $("#name").val());
windows.location.href="#page2";
});
Related
I am a very new coder trying to build my first app. I have created a login page but something seems to be blocking it. I am not sure why it is not working, could it be a small error or something else? My sign-up page works fine but the login does not even click through. Can anyone help find what might be the error in my code?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<!-- CSP, above, is used to set what resources the app can access -->
<script src="components/loader.js"></script>
<!-- Required Monaca stuff above, do not edit -->
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/mycolors.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<!-- START Welcome screen -->
<section data-role="page" data-theme="c" id="pgWelcome">
<!-- Main content in the middle of the screen -->
<article role="main" class="ui-content">
<h2>CBDB -- Comic Book Database</h2>
<p><img src="images/usg-14.png" alt="usg-14" class="imgMain"></p>
<p>Collect, store, save, and share your comics in one place. Learn all about the great world of comics.</p>
<p>Need an account? Create an account</p>
<p>Have an account?Log In</p>
</article>
<!-- JS content at the bottom of the screen -->
</section>
<!-- END Welcome screen -->
<!-- START SignUp screen-->
<section data-role="page" data-theme="c" id="pgSignUp">
<header data-role="header" data-add-back-btn="true">
<h1>Sign Up</h1>
</header>
<article role="main" class="ui-content">
<!-- A <form> element to ask for credentials for creating an account 1:09-->
<form id="fmSignUp">
<label for="inEmailSignUp">Email:</label>
<input name="inEmailSignUp" type="email" placeholder="loislane#dailyplanet.com" required id="inEmailSignUp">
<label for="inPasswordSignUp">Password:</label>
<input name="inPasswordSignUp" type="password" placeholder="girlreporter222" required id="inPasswordSignUp">
<label for="inPasswordConfirmSignUp">Confirm Password:</label>
<input name="inPasswordConfirmSignUp" type="password" placeholder="girlreporter222" required id="inPasswordConfirmSignUp">
<!-- Grid with two columns, get code from jQueryMobile -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" value="Clear"></div>
<div class="ui-block-b"><input type="submit" value="Go"></div>
</fieldset>
</form>
</article>
</section>
<!-- END SignUp screen-->
<!-- START LogIn screen -->
<section data-role="page" data-theme="d" id="pgLogIn">
<header data-role="header" data-transition="flip" data-add-back-btn="true">
<h1>Log In!</h1>
</header>
<article role="main" class="ui-content">
<form id="fmLogIn">
<label for="inEmailLogIn">Email:</label>
<input name="inEmailLogIn" type="email" placeholder="loislane#dailyplanet.com" required id="inEmailLogIn">
<label for="inPasswordLogIn">Password:</label>
<input name="inPasswordLogIn" type="password" placeholder="girlreporter222" required id="inPasswordLogIn">
<!-- Grid with two columns in a form. Note FIELDSET -- which is used in a form (if it's not in a form, use DIV) -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" data-icon="delete" value="Clear"></div>
<div class="ui-block-b"><input type="submit" data-icon="forward" value="Go"></div>
</fieldset>
</form>
<!-- Go to Home -->
</article>
</section>
<!-- END Login screen-->
<!-- START Home screen-->
<section data-role="page" data-theme="c" id="pgHome">
<header data-role="header">
<h1>CBDB</h1>
Options
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>Save</li>
<li>View</li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<h2>Home</h2>
<img src="images/promotiger1.png" alt="promotiger1" class="imgHome">
<h4>The fun way to find your comics all in one place! Join the fun in collecting and sharing comics. Invite your friends!</h4>
Go to Welcome
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- END Home screen -->
<!-- START Save screen -->
<section data-role="page" data-theme="d" id="pgSave">
<header data-role="header">
<h1>Save your Comic</h1>
Options
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>Save</li>
<li>View</li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<!-- <form> to save inventory to database -->
<form id="fmSaveComic">
<!-- Set up optional and required data to save -->
<fieldset>
<legend>Required</legend>
<label for="inTitleSave">Title: </label>
<input name="inTitleSave" type="text" required placeholder="Kimba the White Lion" id="inTitleSave">
<label for="inNumberSave">Number: </label>
<input name="inNumberSave" type="number" required placeholder="15" id="inNumberSave">
<label for="inYearSave">Year: </label>
<input name="inYearSave" type="number" required placeholder="1969" id="inYearSave">
</fieldset>
<fieldset>
<legend>Optional</legend>
<label for="inPublisherSave">Publisher: </label>
<input name="inPublisherSave" type="text" placeholder="Mushi Production" id="inPublisherSave">
<label for="inNotesSave">Notes: </label>
<textarea name="inNotesSave" placeholder="First published in Japan" id="inNotesSave"></textarea>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" data-icon="delete" value="Cancel"></div>
<div class="ui-block-b"><input type="submit" data-icon="forward" value="Save"></div>
</fieldset>
<!--Three column grid with setup button is below, I used 'submit' input type to keep it consistent with other buttons. This was from the assignment l
(buttons for setup, cancel and save), but the lecture suggested a more classic two-column style on 'save' page was expected so perhaps 'set-up' meant
worked fine in this form below and looked good, but I went with the class demo in code above. However, I include in this submission that I learned ho
columns, too -->
<!-- <fieldset class="ui-grid-b">
<div class="ui-block-a"><input type="submit" data-icon="check" value="Set Up"></div>
<div class="ui-block-b"><input type="reset" data-icon="delete" value="Cancel"></div>
<div class="ui-block-c"><input type="submit" data-icon="forward" value="Save"></div>
</fieldset> -->
</form>
Go to View
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- End SAVE screen -->
<!-- Start VIEW screen -->
<section data-role="page" data-theme="d" id="pgView">
<header data-role="header">
<h1>View Your Comic</h1>
Options
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>Save</li>
<li>View</li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<h2>Take a look at your comic in living color!</h2>
<a href="#pgHome" data-role="button" data-transition="pop" data-icon="home" >View</a>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- End VIEW screen -->
<!-- Start OPTIONS screen -->
<section data-role="page" data-dialog="true" data-theme="c" id="pgOptions">
<header data-role="header">
<h1>Options</h1>
</header>
<article role="main" class="ui-content">
<p>A mobile app for comic book storage created by Monica Showalter in 2021. Copyright Monica Showalter Productions.</p>
<!-- Current button is a simple button but will be JavaScript eventually. Add an ID for that-->
<p>Log Out</p>
Contact Us | Reset Account
</article>
</section>
<!-- End OPTIONS screen -->
<!-- JavaScript should be before </body -->
<!-- Links to the online JS files-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>
Javascript page:
// Before any of our JavaScript can function, it should be in a "device ready" function
// that Cordova detected all foundational elements have been loaded
// Listen for the moment all your files load into memory
// Then run the main function "onDeviceReady ()"
document.addEventListener("deviceready", onDeviceReady, false);
// All future JS code must be on the onDeviceReady main function
function onDeviceReady() {
console.log("Cordova is ready!");
// ---- Variables ----
// These are containers for data
// Create variables for SignUp/LogIn forms, LogOut button
// var classic way, works
// let newer way, recommended for creating Object that varies
// const newer way, recommended for creating Object that does not vary
// document.getElementByID("fmSignUp") -- means find an HTML element with that ID, pJS or plain JS way
// $("#fmSignUp") --- means same thing as above, jQuery way
const $elFmSignUp = $("#fmSignUp"), // el means 'element' of HTML. Also, use $ for const name to remind it's in jquery, as seen
$elFmLogIn = $("#fmLogIn"), // This section tells JS where to find the form so it can interact
$elBtnLogOut = $("#btnLogOut");
// ---- Functions ----
// These are the subroutines (bundles of code) that accomplish a task
// Create a function to do all the steps signing up for an account
function fnSignUp(event) {
// prevent default event of refresh
event.preventDefault();
console.log("fnSignUp(event) is running!");
let $elInEmailSignUp = $("#inEmailSignUp"),
$elInPasswordSignUp = $("#inPasswordSignUp"),
$elInPasswordConfirmSignUp = $("#inPasswordConfirmSignUp");
// Quick test to read what's in box
console.log($elInEmailSignUp.val(), $elInPasswordSignUp.val(), $elInPasswordConfirmSignUp.val());
//next slide's code goes here because we will nest objects in the function
//this is to confirm passwords match
if($elInPasswordSignUp.val() != $elInPasswordConfirmSignUp.val()) {
console.log("Passwords do not match!");
window.alert("Passwords do not match!");
//$elInPasswordSignUp.val(""); /* blanking these two lines out as don't match instructor code */
//$elInPasswordConfirmSignUp.val("");
} else {
console.log ("Passwords DO match!");
// next slide's code goes here
// Now using local storage to save User data as new account:
let $tmpValInEmailSignUp = $elInEmailSignUp.val().toUpperCase(),
$tmpValInPasswordSignUp = $elInPasswordSignUp.val();
if(localStorage.getItem($tmpValInEmailSignUp) === null) {
console.log("New User detected!");
// Now we store the new User
localStorage.setItem($tmpValInEmailSignUp, $tmpValInPasswordSignUp);
// Clear for the next User
$elFmSignUp[0].reset();
// Welcome the new User
window.alert("Welcome!");
console.log("New User saved" + $tmpValInEmailSignUp);
} else {
window.alert("You already have an account!");
} // END If..Else for new/old user check
} // END If..Else for Password matching
} // END fnSignUp(event)
function fnLogIn() {
event.preventDefault();
console.log("fnLogIn() is running!"); // adjusted this to match instructor code, had word 'event' in the function ()
let $elInEmailLogIn = $("#inEmailLogIn"),
$elInPasswordLogIn = $("#inPasswordLogIn"),
$tmpValInEmailLogIn = $elInEmailLogIn.val().toUpperCase(), // added function parens toUpperCase to match instructor code
$tmpValInPasswordLogIn = $elInPasswordLogIn.val();
console.log($tmpValInEmailLogIn, $tmpValInPasswordLogIn);
// Conditional statement to see if account was previously created
if (localStorage.getItem($tmpValInEmailLogIn) === null) {
console.log("Account does not exist.");
window.alert("Account does not exist!");
} else {
console.log("Account does exist.");
if ($tmpValInPasswordLogIn === localStorage.getItem($tmpValInEmailLogIn)) {
console.log("Passwords DO match!");
$(":mobile-pagecontainer").pagecontainer("change", "#pgHome");
} else {
console.log("Passwords do not match.");
window.alert("WRONG password!");
} // END If..Else checking for password match *** CHECK THIS AGAIN, ADDED MYSELF
} // END If..Else checking for user account existence
} // END fnLogIn()
// Function to log out the User
function fnLogOut() {
console.log("fnLogOut() is running");
//Conditional Statement to confirm whether they really intend to log out
switch(window.confirm("Do you want to log out?")) {
case true:
console.log("User does want to log out");
// Move them to #pgWelcome
$(":mobile-pagecontainer").pagecontainer("change", "#pgWelcome");
// Now clear the <form> for a new User
$elFmSignUp[0].reset();
$elFmLogIn[0].reset();
break;
case false:
console.log("User does not want to log out");
break;
case "Maybe":
console.log("User might want to log out");
break;
default:
console.log("Unknown");
break;
} // END switch() to log out
} // END FnLogOut()
// ---- Event Listeners ----
// These are detecting interaction
// Wait for "submit" button in the FmSignUp <form>
// Then run a function called fnSignUp(), capture the default event, pass it through
$elFmSignUp.submit(function(){ fnSignUp(event); });
$elFmLogIn.submit(function(){ fnLogIn(); });
$elBtnLogOut.on("click", fnLogOut);
} // End onDeviceReady()
In my mind ,the question is occur because of the spell of line 30:
<p>Have an account?Log In</p>
and the reference line 61:
<section data-role="page" data-theme="d" id="pgLogIn">
as you can see, the pgLogin not equals with pgLogIn, change them to equals will resolve the question
Check your login function, in the javascript it doesn't have event while in the signup it has an event in it's argument. This may help.
I have two pages, one is pageone, which slides to orderpage (order form), when order is completed, a "Thank you for your order" displays, user can slide back to pageone, the problem is when the user slides to orderpage again, the blank order form doesn't show, instead the leftover "Thank you..." still there.
<!DOCTYPE html>
<html>
<head>
<?php
include 's_include';
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
THIS IS MAIN PAGE
GO TO PAGE TWO
</div> <!-- pageone -->
</div> <!-- ui-content -->
<div data-role="page" id="orderpage">
<div data-role="main" class="ui-content">
<script>
$(document).ready(function(){
$("#order_btn").click(function(){
$.post("cgi-bin/order.pl", {
order:"HELLO WORLD IN READY",
},
function(data,status){
document.getElementById('div_comment').innerHTML = data;
});
}); //orderpage
}); //ready
</script>
<div id="div_comment">
<textarea name="text_comment" id="text_comment" placeholder="160 chars or less, no # or #" data-role="none" rows=11 cols=20 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,160);" onKeyUp="limitText2(this,160);" style="resize:none;"></textarea>
<span id="commenterr" style="font-weight:bold; font-size:90%;"></span>
<br style="line-height:190%;">
<button id="order_btn" class="ui-btn ui-btn-inline" style="border: #ffffff 1px solid;">Enter your comment</button>
<a href="#pageone" data-transition="slide">
Back
</a>
</div> <!-- ui-content -->
</div> <!-- page id orderpage -->
</body>
</html>
I tried to add rel="external" like this, but no help:
GO TO PAGE TWO
I don't want to use timer.
Wonder if it's possible to have a blank clean order form every time I slideb to orderpage.
You can create a separate DIV in orderpage for displaying the results of the post:
<div id="div_comment">
<textarea name="text_comment" id="text_comment" placeholder="160 chars or less, no # or #" data-role="none" rows="11" cols="20" onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,160);" onKeyUp="limitText2(this,160);" style="resize:none;"></textarea>
<span id="commenterr" style="font-weight:bold; font-size:90%;"></span>
<br style="line-height:190%;" />
<button id="order_btn" class="ui-btn ui-btn-inline" style="border: #ffffff 1px solid;">Enter your comment</button>
Back
</div><!-- div_comment -->
<div id="formResults">
Then on successful POST, hide the comment DIV, populate the results and show the results DIV:
$(document).on("pagecreate","#orderpage", function(){
$("#order_btn").click(function() {
//on POST success: hide DIV#div_comment and
//show results in DIV#formResults
$("#div_comment").hide();
$("#formResults").html('Thank you...<a href="#pageone" data-transition="slide" >Back</a>').show();
}); //orderpage
});
Then using the pagecontainer widget's beforeshow event. Every time orderpage is shown, clear all fields, hide the results DIV and show the comment DIV:
$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
//when orderpage is shown, hide results, show comment and clear fields
if (ui.toPage.prop("id") == "orderpage"){
$("#formResults").html('').hide();
$("#div_comment").show();
$("#text_comment").val('');
$("#commenterr").text('');
}
});
DEMO
I'm building a webpage with jquery mobile and try to link pages with parameters.
This works but the issue I have is that I'm not able to link to the same page I'm currently stay with different parameters.
Example:
<html>
<body>
<!-- START INDEX PAGE -->
<div data-role="page" id="index">
<div data-role="header">
<h1>Indexpage</h1>
</div>
<div data-role="content">
<a href="index.html#listpage?list=1">
<a href="index.html#listpage?list=2">
</div>
</div>
<!-- END INDEX PAGE -->
<!-- START LIST PAGE (page to list content i.e. user list)-->
<div data-role="page" id="listpage">
<div data-role="header>
<h1>Listpage</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="listview">
</ul>
</div>
<script>
//to get passed parameter (list id)
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '= ([^&#]*)').exec(window.location.href);
if (results==null){
return null;
} else {
return results[1] || 0;
}
}
var list = $.urlParam('list');
switch(list) {
case 1:
//insert list one into page
break;
case 2:
//insert list two into page
break;
}
</script>
</div>
<!-- END LIST PAGE -->
</body>
</html>
So when I click on the list2 link when im staying on the list1, it doesn't do anything.
Thanks for your help
You can append html data on click event of anchor tag if you are using same page
OR
<a href="index.html#listpage?list=1" data-ajax="false">
<a href="index.html#listpage?list=2" data-ajax="false">
OR
$(document).delegate("a", "vclick click", function(event) {
$.mobile.defaultPageTransition = "slide";
var href = $(this).attr("href");
event.preventDefault();
if ( event === "click" ) { return; }
$.mobile.changePage(href);
});
**PAGE-1**
<div data-role="page" id="index">
<div data-role="header"> </div>
<div data-role="content">
List 1
List 2
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /page1 -->
<div data-role="page" id="list1">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page1 -->
<div data-role="page" id="list2">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page2 -->
So I solved it this way:
First I changed the switch, which started at pageint, to a standalone function:
function displayContent(contentid) {
switch(contentid) {
case 1:
//change content
break;
case 2:
//change content
break;
}
}
Then I changed the way how I display the content:
$('#listpage-header-title').html('Alle Turner'); //change title on header
//CHANGED PART START
//check if navbar already exists
if($('#listpage-sub-nav ul').length != 0) {
//remove activestate from all active buttons
$('.ui-btn-active').removeClass('ui-btn-active');
$('.ui-state-persist').removeClass('ui-state-persist');
//add activestate to pushed button
$('[onclick*="alle_tu"]').addClass('ui-btn-active');
$('[onclick*="alle_tu"]').addClass('ui-state-persist');
} else {
//if navbar doesn't exists add html code of the navbar
$('#listpage-sub-nav').html('<ul><li>Überblick</li><li>Turner</li><li>Turnerinnen</li></ul>');
}
//CHANGED PART END
//add autodivers to listview
$('#list-page-listview').attr('data-autodividers', 'true');
//change/add data to listview
showTeilnehmer('listpageM');
//refresh listview
$('#list-page-listview').listview('refresh');
break;
Hope someone helps
i am working on wordpress right now and i am creating a SPA with 3 cols. The left and middle cols are static, the right one is dynamic based on the links of the first two cols. Right now i have the solution, that i load all the specific in the right col with position: absolut and visibility: hidden. But if i try my webpage on a mobile phone, it works a bit slow. My code looks like this:
<div class="content"> <!-- open class="content"-->
<script> //script for URL-Change by clicking on Link !Start
function showDetailContent(showid) {
var id = document.getElementsByClassName('shown');
for (var i=0;i<id.length;i++) {
id[i].classList.remove('shown');
};
document.getElementById("right_" + showid).classList.add('shown');
};
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script> <!--script for URL-Change by clicking on link !Start-->
<div class="col"><!-- Start col (left)-->
<?php while(have_posts()):the_post();?> <!-- Start while (left)-->
<?php if (in_category('infotext')):?> <!--start if-request for category-->
<div class="infotext animated bounceSwitch"> <!--start infotext and animation-->
<h1>
<?php the_title();?> <!-- h1 of col(left)-->
</h1>
<?php the_content(__(''));?> <!-- get the post-content in it -->
</div> <!-- close infotext and animation-->
<form> <!-- start form login-->
<input id="user" class="bg-whitesmoke" type="text" placeholder="Benutzername" />
<input id="pass" class="bg-whitesmoke" type="password" placeholder="Passwort" />
<input id="submit" class="bg-grey" type="submit" value="Anmelden" />
</form> <!-- end form login-->
<?php endif;?> <!-- end if-request for category-->
<?php endwhile;?>
</div> <!-- end col(left) -->
<div class="col"> <!-- Start col (mid)-->
<?php while(have_posts()):the_post();?><!-- Start while (mid)-->
<?php if (in_category('apps')):?><!-- start if request for category-->
<div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey">
<h1>
<?php the_title();?> <!-- h1 for col(mid-->
</h1>
<?php the_content(__(''));?> <!-- get post content-->
</div>
<?php endif;?> <!-- end if request for category-->
<?php endwhile;?> <!-- End while(mid)-->
</div><!-- End col (mid)-->
<div class="col animated bounceInRight">
<?php while(have_posts()):the_post();?>
<div class="content-right">
<div id="right_<?php the_id();?>" class="right">
<div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey">
<div id="product-01" class="product-preview"> <!-- start div-->
<div id="product-title" class="product-image product-title"><!-- get titel and image-->
<img src="./img/products/logos/logo-cloudshare.png" /><!-- get logo-->
<h1><?php the_title();?></h1><!-- h1 for col(right)-->
</div><!--end product-image-->
<?php the_content(__(''));?><!-- get post content-->
</div><!-- start product-01-->
</div><!-- end product-wrapper products-wrapper round-borders-panal bg-bright-grey-->
</div><!-- end class right-->
</div><!-- end content-right-->
<?php endwhile;?><!-- end while(right)-->
</div> <!-- close col(right)-->
-->
So, is there any opportunity to create the content right on clicking on a link and deleting it if another link is clicked? Or is this really the best solution?
Have a nice day, Yannic :).
use can use an ajax call by jquery ajax tool $.ajax
here is full documentation:
http://api.jquery.com/jQuery.ajax/
make a new php file like loader.php that according to a get request with id parameter returns data for your right column
you should code something like following code snippet
$('div .right').click(function(){
$.ajax({
type:'GET' // request type 'get' or 'post'
url:loader.php, // your destination file that request will get sent
data:{id:2}, // data you pass to your destination its something like loader.php?id=2 in php
success:function(data){
this.html(data); // *data* is your returned value from your php file and now can do anything you want with your returened value
}
});
})
Im trying to create a button with an data-transition but is not working.
when I click the link contactInf, it can not form page basicInf switch to page contactInf!
My browser is firefox14.1.
Below is my code:
<body>
<div id="basicInf" data-role="page" data-theme="c">
contactInf
</div>
<div id="contactInf" data-role="page" data-theme="c">……</div>
</body>
May be you're looking for something like:
HTML
<a id="basicInf_link">basic</a>
<a id="contactInf_link">contact</a>
<div id="basicInf" class="page" data-role="page" data-theme="c">……</div>
<div id="contactInf" class="page" data-role="page" data-theme="c">……</div>
JavaScript
$('#basicInf_link').click(function () {
$('.page').hide();
$('#basicInf').show();
});
$('#contactInf_link').click(function () {
$('.page').hide();
$('#contactInf').show();
});
jQuery method:
$("#contactInf").click(function(){
window.location.href = 'yourcontactInfpage.html'
});
OR
Change your DIV to
<div id="contactInf" data-role="page" data-theme="c" onclick="redirectTocontactInf">……</div>
and write this function in your javascript file
function redirectTocontactInf(){
window.location.href = 'yourcontactInfpage.html'
}
PS : Replace yourcontactInfpage.html with the name of the page you want to redirect your user to :)