How do I move a div from one page to another? - javascript

I have the following div on a page called Transactions.html :
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
And when I click the link <a>No</a> I want the whole div to move to another Summary.html page. Any ideas? Thanks

You can do it this way. You need to have a wrapper div tag in-order to select the entire html content.
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.red').click(function(){
var divData = $('#dataContainer').html();
window.location.href = "summarypage.html?data="+divData+"";
});
});
</script>
<div id="dataContainer">
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
</div>
In summary page you need to retrieve the data from the URL. When you run this and click 'NO' link it navigates to summary page and you can see the html values on the summary page URL bar
You can use PHP to retrieve this data using <?php echo $_REQUEST['data']; ?>

You can't - that's not how the web works. Each HTML page is self-contained and encapsulated.
Some sites, like Github, do little tricks with the JavaScript history API and AJAX to make it appear as though a new page is "partially loaded", when in fact it's the same page.

You probably need to use PHP or a server side technology for storing data and that needs complete transformation of your static pages to dynamic PHP pages, that needs lots of work.

By using the html it is not possible to transfer the data from one html file to another html file. use the JQuery to perform the data transfer
By clicking on the button, speficy in which div or place you want the data to display, by using the load() in Jquery you can load the specific data in another page to your page

Related

How to dynamically load content into DIV using Javascript

I have a website which consists of 5 different pages.
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
Content of your main page index.html could look like this (I removed those images in nav bar)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
About
Location
Contact
Inquiries
Employees
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
Alright so my approach is a bit different as I use PHP but hopefully I am still able to help you with this. I am working on something similar where I have "index" page that includes a nav bar at the top and empty space below it. After I click on something the content of another php file loads into white space, and said another php file is wrapped into a div I can edit with css. To do this I've used this php command:
<div>
<?php
$page = "MainPanel.php"; // my index
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
if ($page == "" or $page == "MainPanel.php") {
$page = "/Main/central.php"; //default page upon running the code.
}
$GLOBALS["page"] = $page;
ob_start();
include($page);
ob_end_flush();
?>
</div>
This should be it. I don't know php very well and one of my collegues suggested to use this but it's relatively small amount of code and it works well.

Dynamically create page in jquery mobile, only to include specific data from websql database

I have an application that has a page where all id's are selected from the table and specific bits of information are shown in html.
What i would like to do next is to make each of these elements as a whole a link to essentially, a 2nd level down.
This level down page will reveal all information bound to that row's id, is it possible to build this in a way that is dynamic?
I am using jQuery mobile to build pages, and i'd like to use 1 template and append the relevant html elements into it, and populate each with the id bound information.
I hope this makes some sense, and any guidance or suggestions would be greatly appreciated.
The above mockups represent what i would like to achieve, the left image displays a list of all rows in the table, upon clicking one of them, you are taken to another page, with only information for that particular id.
Can i achieve this for each item within the list?
It's a good navigation example and it's not difficult to implement.
Since the information is coherent (every DB row has the same columns), create just one empty template (edit: it's now based on your PasteBin):
<div data-role="page" id="route_details">
<div data-role="header">
<a data-rel="back"><i class="fa fa-arrow-left"></i></a>
<h1 id="walkTitle"></h1>
</div>
<div data-role="main" class="ui-content">
<div class="finishedRouteInfo">
<div class="mapDetails" style="width: 100%; height: 150px;"></div>
<div class="ui-grid-a">
<div class="ui-block-a home_btns no_border">
<div class="ui-block-a finishedDistance"><i class="fa fa-map-marker"></i></div>
<div class="ui-block-b"><p>Distance <br/><span id="finalDistance" class="value"></span></p></div>
</div>
<div class="ui-block-b home_btns">
<div class="ui-block-a finishedDistance"><i class="fa fa-clock-o"></i></div>
<div class="ui-block-b finishedDuration"><p>Duration <br/><span class="value" id="finalDuration"></span></p></div>
</div>
<span class="horizontalSplitter"></span>
<div class="walkDescription"></div>
</div>
</div>
</div>
The code in your PasteBin cannot work because you are creating multiple pages with elements having the same IDs (i.e.: finalDistance, finalDuration). Also, you are creating many pages which probably the user will never see.
So, simplify your loading function:
var last_results = [];
$(document).on("pageinit", "#my-routes", function() {
db.transaction(function(t){
t.executeSql('SELECT * FROM WALKS', [], querySuccess, errorCB);
});
function querySuccess(t, results, Element) {
last_results = results;
}
});
and delay the content/map creation just before showing the page with route details:
$("#route_details").on("pagecontainerbeforeshow", function()
{
// use your DB data
var data = last_results.rows.item(clicked_route);
$("#walkTitle).html(data.WalkTitle);
$(".walkDescription").html(data.WalkDescription);
// ...create the map and fill the rest...
});
You just have to link each route to this page, setting clicked_route when the link is clicked using something like this:
<a class="walkPage" href="#route_details" data-route="0">Route 0</a>
<a class="walkPage" href="#route_details" data-route="1">Route 1</a>
<a class="walkPage" href="#route_details" data-route="2">Route 2</a>
JavaScript:
$(document).on("click", ".walkPage") {
clicked_route = parseInt($(this).attr("data-route"));
});
...Since you have to show the route map in two different pages, refactor your code so that you can easily create a map and add it to any page.
Hope it's sufficiently clear to fully implement it.

How to open each link with content displayed in the same page

I am creating a webpage. Here is the concern.
The page has nav links on left end as a sidebar and the main content area occupies at the center.
I would want to open each link and its corresponding data should be displayed in the main content area (rest of the data hidden).
Please help me achieve this.Below gives my webpage view
<body onload="myFuntion()">
<div id="header">
<h3>Michaels Mob App Automation Dashboard</h3>
</div>
<div id="nav">
iOS<br>
<a name="Android" href="#" target="_self">Android</a><br>
KickOff<br>
Run<br>
</div>
<div id="section">
<table>
<tr><td> TestCase: </td> <td><input type ="text" name ="TestCase"></td><br>
<td> Execution Status : </td> <td><input type ="text" name ="Status"></td></tr><br>
<p>
enganunnd?:P
You might need to add the rows dynamically here using jscript.
iOS text
</p>
</table>
</div>
<div id="footer">
Graph View/
List View
</div>
</body>
This is what one refers to as loading partial views or html fragments.
jQuery has them: http://api.jquery.com/load/
AngularJS has them: https://docs.angularjs.org/api/ng/directive/ngInclude
you can also do it with <iframe>
you can also use XHR
You can use jQuery Load function if that is an option. http://api.jquery.com/load/
$("#nav a").click(function(){
$( "#section" ).load( "pages/test.html" );
});
If it's ok to have each link show the same URL in the address bar, and unless you need to get all the data for each "page" off a server, it would be better simply to hardcode each page/section into the one HTML document and use the nav links as triggers to show/hide each section using CSS. This eliminates Ajax calls and would be much quicker to load each section. And you could still populate each section's data dynamically by appending DOM nodes when necessary.

How to programmatically change jquerymobile page and send data to this page?

guys!
I use jquerymobile 1.3.0 and jquery 1.9.1
I have 2(more) jquerymobile pages.
For example:
<div data-role="page" id="firstPage">
<!-- Header -->
<div data-role="header">
<h3>First page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
<div data-role="page" id="secondPage">
<!-- Header -->
<div data-role="header">
<h3>Second page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
I'm need to change from first page to second page, and send some params usually URL
I tried to use this method:
$.mobile.changePage('#secondPage',
{
data: {id: 123, module: 111}
}
);
After this method, the elements on first page is hide and url is change to www.mydomain.com/main.html?id=123&module=111
but page is not change. I think in order to change the page to a URL to a hash of this page.
and the URL must be of the form
www.mydomain.com/main.html?id=123&module=111#secondPage
then i tried to use:
location.href += '?id=1234&module=111#secondPage';
This method is work )))
But when i tried go back to firstPage, page is changed, but in URL remain the data
www.mydomain.com/main.html?id=123&module=111
Then i tried delete this data using next method
location.href = location.href.replace(location.origin, "").replace(location.pathname, "");
But after this method my firstPage is looped to change.
Please help guys. How to send data to secondPage and delete this data when i going back to firstPage?
My back button used native jquerymobile method for go back.
<a data-theme="a" data-role="button" data-transition="fade" href="#firstPage" data-iconpos="notext" class="ui-btn-left backButton"></a>
P/S. I'm sorry for my english, my english level is elementary
If you define two pages in one html, you don't have to send arguments to other page with URL. Just use javascript variables and page events to use them.
If you use URL arguments to run server side code, just use different .html files. One html file, one page style.
But for smooth transition effects on mobile devices and best user experiment, i prefer using AJAX and create/change pages live,
Best regards

Javascript on Multiple DIVs

I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?
Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?

Categories

Resources