|
I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap in (only the body) of home.html into the body of the index.html by using java script. Basically swapping 'body' elements between HTML files.
I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information of index.html with home.html. I also would like to keep the unordered/list items as my header and be able to use the browser back button to go back to previous pages.
1.) index.html
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!--
</ul>
</div>
</div>
</nav>
</header>
<body>
<article>
<div id='swapcontent'>
index page
</div>
</article>
</body>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
2.) home.html
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<body>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</body>
3.) bodyswapscript.js
$(document).ready(function() {
$('li>a[id$="Container"]').click(function(event) {
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('body').load(href + " #body", function() {
$("#body *:first").unwrap()
});
return false;
});
});
4.) css
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 720px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
modified 30-Aug-16 14:55pm.
|
|
|
|
|
Have a look at the documentation[^], particularly the section titled Loading Page Fragments[^]:
If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
$(document).ready(function(){
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href + ' #swapcontent');
return false;
});
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I would generally advise against reloading the entire body content with an HTML fragment. It's generally considered bad practice as you'll generally have common elements between pages, regardless of the view.
It would be closer to industry standard if you defined a view DIV within the body element.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
Sir, please send coings in javascript or angularjs for colllecting images and text from pdf image of catalogue picture....
|
|
|
|
|
|
or please forward any link ... i will check
|
|
|
|
|
So, I've been working on this code for the past day and it's drving me nuts. The problem is I'm trying to reverse the input of a string so when a user enters FIRSTNAME LASTNAME, the document it is exported to will display LASTNAME, FIRSTNAME.
I feel like I'm very close with the code I have but I need some understanding as well.
Here is my code:
%{var date = '${Case Name}'.split(' '); var date = date[0]; var dateParts = date.split(' '); dateParts[1] + ',' + dateParts[0]}
This code that I currently have returns undefined,FIRSTNAME.
Anyone have any ideas or guidance on how to pull the LASTNAME and add a space after the comma?
Any help is greatly appreciated!
|
|
|
|
|
Try walking through your code in your head:
- Take the name,
'FIRST LAST', and split it on every space ⇒ ['FIRST', 'LAST'] - Take the first element from the result, and store it ⇒
'FIRST'; - Split the stored element on every space (NB: There aren't any!) ⇒
['FIRST'] - Combine the second element of the one-element array with the first element ⇒
'undefined,FIRST'
Now it should be obvious that you need to remove steps 2 and 3:
%{var parts = '${Case Name}'.split(' '); parts[1] + ', ' + parts[0]}
However, you'll still get undefined if the entered name doesn't contain a space. If that could be the case, then you'll need the ternary operator:
%{var parts = '${Case Name}'.split(' '); parts.length == 2 ? parts[1] + ', ' + parts[0] : parts[0]}
Adding a space after the comma is as simple as ... adding a space after the comma! 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
THANK YOU SO MUCH!!!!! I appreciate your feedback!
|
|
|
|
|
Hy guys. I am creating WebAPI MVC website. I use angular http post to get some data from DB and it works all the time but when I publish my web to IIS http post stops working. I tried to get some error info so this is what was written in htmled form:
Notification MapRequestHandler
Handler StaticFile
Error Code 0x80070002
Requested URL http://localhost:80/controller/function/
Physical Path C:\inetpub\wwwroot\controller\function\
Logon Method Anonymous
Logon User Anonymous
and says that "The directory or file specified does not exist on the Web server." I dont know if am I wright but seems like IIS thinks that url I use in post method is real path, not api. How to make it think it is api?
By the way to be sure angular works I tried the simple model bind. So there was no error.
|
|
|
|
|
|
Hy, I deploy to IIS 7.5 and I tried your suggested hotfix, but it throws error saying "the update is not applicable to your computer"
|
|
|
|
|
Did you try the other workarounds from the blog post?
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yes, I tried. All three. Http post still doesnt work.
|
|
|
|
|
Do you have the http response? (ie using Fiddler)?
|
|
|
|
|
Hi! Did you faced any challenge in javascript? 
|
|
|
|
|
Please ask a clear question , What do you want to know ?
|
|
|
|
|
|
Any four random words.
But seriously, if you want to ask a question, you need to provide enough details for someone who can't read your mind to be able to answer it.
You also need to put some effort into finding the answer yourself first. Google[^] seems to have a lot of suggestions.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
In a vb.net 2010 webform application, I am going to display a popup javascript alert message for the user when there are 2 records in the database for the current school year for each unique student. This popup message is displayed since the user needs to update the database using vendor software.
For the javacript alert message, I have the following questions:
1. At the top the alert message, it says 'Message from Web Page' since that is probably the default value. Is there a way that I can change this message to something I want? If so, how can I change the message?
2. I am wondering what if there maximum length that I can display in the error message? If so, what is the maximum length?
3. Can I extend the maximum size of the message and if so, can you show me how to extend the size of the error message?
4. Can I change the display icon to be an error instead of a warning? If so, how would I accomplish this goal?
|
|
|
|
|
|
|
Please read about JqueryUI Dialog Box from jquery Forums. it will help you.
|
|
|
|
|
Can someone assist me on how to do a mouse over on a hyperlink that shows what the user selected on the page they just left or saved. For example, the user clicks a link that says 'Add' and it opens a popup window where they select a list of items that have checkboxes, they check the items they want and then they click save to close the popup and they return to the original page. The user then hovers over another link that says 'Edit' and it shows them what they selected on the popup page. Can this be done and if so how?
I tried using LabelHover function but I get a LabelHover() is error. Here is my code. What do I need to do to get rid of this error. This is on the page that has the link to the popup page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="NASA_LoD_Phase_1.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title><script language="javascript" type="text/javascript">
function LabelHover() {
var text = "event";
document.getElementById("EditHyperLink").innerHTML = text;
}
</script>
</title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
text-align: left;
}
.auto-style4 {
text-align: right;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td class="auto-style2" colspan="2">
<asp:Label ID="lblProgram" runat="server" Text="Program:" style="text-align: left"></asp:Label>
<asp:HyperLink ID="AddHyperLink" runat="server"
NavigateUrl="javascript:var w=window.open('addprogramcode.aspx','','width=640,height=450');"
CssClass="style19" ForeColor="#A90D39">Add Program Code</asp:HyperLink> <asp:HyperLink ID="EditHyperLink" onmouseover="LabelHover()" runat="server"
NavigateUrl="javascript:var w=window.open('serviceset.aspx','','width=640,height=450');"
CssClass="style19" ForeColor="#A90D39">Edit</asp:HyperLink> <asp:HyperLink ID="DeleteHyperLink" runat="server"
NavigateUrl="javascript:var w=window.open('newdonors.aspx','','width=640,height=450');"
CssClass="style19" ForeColor="#A90D39">Delete</asp:HyperLink>
<br />
<asp:DropDownList ID="DropDownList1" runat="server" Width="400px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style7">
<asp:Button ID="BackButton" runat="server" OnClick="Button2_Click" Text="Back" />
</td>
<td class="auto-style4" rowspan="2">
<asp:Button ID="NextButton" runat="server" Text="Next" OnClick="SearchButton_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
|
|
|
|
I have tested your code, mouseover event works fine. might be you are missing something.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
