I want to load another page in same page with having all the function of current page.
For example i have page which have "navigation bar" "panel" , now what i want is next page should get load but only content gets change.not the whole page .
you should devid you page as ... (1) Header , (2) Main sections , (3) Footer
and include them using php include file examble >>> include 'filename';
check this out
So you have the same ( Header page ) and ( Footer page )
But only the Content page is changing
<?php
include 'header.php';
//only change this for the other pages
include 'main.php';
include 'footer';
?>
Related
This is so simple I don't get how it could possibly go wrong. I'm trying to get a simple intra-page link to behave.
(If it's relevant, this is an angular 2 app, using routing.)
Here is a typical page:
Skip to main content
<div class="page-body">
<main>
<div class="content-body" id="content-start">
<h1>Employee Search</h1>
</div>
<main>
</div>
The URL of this page (in my dev env) is
http://localhost:49974/app/employee/search
When I click (or focus then press enter) on Skip to main content it should go to
http://localhost:49974/app/employee/search#content-start
but instead goes to
http://localhost:49974/app#content-start
(and then immediately switches to
http://localhost:49974/app/#content-start
)
I can't have messed up the linking itself; this must have something to do with how the routing is working.
It looks like I have to do it this way:
<a href="app/request/timeoff#content-start">
But that doesn't seem correct.
I don't know if this is a the correct way, or the angular way, but it works:
app.component.html:
Skip to main content
app.component.ts
export class AppComponent {
pageURL: string;
ngDoCheck() {
this.pageURL = window.location.href;
var link = this.pageURL.indexOf('#content-start');
if (link > -1) {
console.log(this.pageURL.substring(0, link));
this.pageURL = this.pageURL.substring(0, link);
}
}
}
every-page.html:
<h1 class="content-body" id="content-start">Page</h1>
Not sure if ngDoCheck is the appropriate event use.
Full disclosure: app.component is a wrapper - with header and the 'skip to content' link that contains all the pages and their content.
So, the logic for the 'skip to content' link exists once, while the actual content target #content-start lives in the top of each content page.
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
In my menu: <li><a href="about#scroll-to" ....
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
Any suggestions would be great. Thanks!
Using jquery, you can make a POST call to the target page when menu is clicked.
The POST data will contain the id of the div where you want to slide to.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
Then you will have a clean url, and the page scrolling to your div.
---- edit: here comes the code!
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li>Information about us</li>
(the onClick stops link from redirecting manually)
and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<script type="text/javascript">
jQuery(document).ready(function(){
$(".mymenuitem").click(function() {
// we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1];
// lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)
$("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
$("#slidinganchorform").submit();
});
});
</script>
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)
<head>
<!-- make sure your jquery is loaded ;) -->
<?php
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
// lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
// Lets scroll
jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
You can do this when the new page loads
history.pushState("", document.title, window.location.pathname);
However it will also remove the query string. Although, you could play with it a little bit to keep it
I am using inline frame on jsf page to render different jsff pages liked to various commandMenuItem but the page is not rendering properly its giving the message
This XML file does not appear to have any style information associated with it. The document tree is shown below.
and the displaying the page content as
how to overcome this problem and display the page properly inside the inline frame. I want that the page will display similarly inside the inline frame when we run the jsff page separatly in different window.
You cannot reference to jsff pages using inline frame, you can include jsff pages either by adding them into a task-flow and add the task-flow as a region, or use the jsp:include tag
Check this guide out http://docs.oracle.com/cd/E23943_01/web.1111/b31973/af_reuse.htm#CACHFJDJ
Since jsff page do not contain any css and style information..so it will not get displayed properly inside the inline frame..but instead we can display the complete jsf page inside the inline frame..now to display the dynamic jsf page inside the inline frame upon the commandMenuItem click from the jsf page...the procedure is below..
first create a jsf page(let say welcome.jsf)..add commanMenuItem to it...
Create 2 other jsf pages with any content on them.
In the first jsf page(welcome.jsf) mention the commandMenuItem's id same as the 2 different page created eg. commandMenuItem 1 id = "first" and commandMenuItem2 id = "second" and the name of the 2 other different pages must same as first and second.
now create a action listener bean on commandMenuItem
import javax.faces.event.ActionEvent;
public class PageBean {
String page = "home";//setting default page
public PageBean() {
}
public void getMenu(ActionEvent actionEvent) {
// Add event code here...
String id = actionEvent.getComponent().getId();
System.out.println(" Menu ID : "+id);
page = id;
System.out.println("Value assigned to the page from the menu Id is :"+page);
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
now on the secondCommandMeuItem also register the same actionListner bean
code on the main page containing menu...is
<af:panelGroupLayout id="pgl1">
<af:menuBar id="mb1">
<af:menu text="menu 1" id="m1">
<af:commandMenuItem text="commandMenuItem 1" id="page1" actionListener="#{PageBean.getMenu}">
<a4j:support event="onclick" reRender="if1"/>
</af:commandMenuItem>
</af:menu>
<af:menu text="menu 2" id="m2">
<af:commandMenuItem text="commandMenuItem 2" id="page2" actionListener="#{PageBean.getMenu}">
<a4j:support event="onclick" reRender="if1"/>
</af:commandMenuItem>
</af:menu>
</af:menuBar>
<af:inlineFrame id="if1" source="#{PageBean.page}.jsf" shortDesc="areaMp" partialTriggers="page1 page2"/><!-- getting dynamic page source from the managed bean variable(page) by fetching the menu id which is similar to the corresponding page name
also add the commandMenuId of the menu's in the partial trigger of the inline frame. -->
</af:panelGroupLayout>
You can include and display jsf page inside the inline frame and can use inline frame on jsf page and even on jsff(page fragment) also.
I've got a list with elements that contain links:
<a class="ui-link-inherit" href="#card_ops?card=1111">
and
<a class="ui-link-inherit" href="#card_ops?card=2222">
1) I click on first link my location in browsers changes on #card_ops?card=1111 - goes to page #card_ops.
2) I return on the previour page using back button.
3) Click on the second link with href="#card_ops?card=2222" my location in browsers changes AGAIN on #card_ops?card=1111 not 222
Is it possible to pass the params to the pages in jq mobile?
Here's one solution I've found. Not sure how well it works as I haven't tried it.
http://blog.digitalbackcountry.com/2011/12/passing-data-between-pages-in-jquery-mobile/
Middle way down on jQuery UI's demo web page here what is the source code for the "View Source" link that opens and close a window of the source code?
This is just a function in their script that hides and shows the source div:
if ($('#demo-source').length == 0) {
$('<div id="demo-source">View Source<div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
$('#demo-source').find("> a").click(function() {
$(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
return false;
}).end().find("> div").hide();
}
$('#demo-source code').empty().text(source);
You can view the full script here, it grabs the code via ajax ($.get() of the current page, or when you click a demo link on the right, grabs that one), formats it for display, then passes it into that function to insert a "view source" div/link at the right place in the page.