If you've read some of my previous questions you know I had a problem that I solved with iFrames. Anyways, what I would like now is to be able to update the page that the iFrame shows (it's a local page of mine) when I click an update button. How is this possible without updating the page I'm on?
Background info:
I'm on home.php where I have an iFrame. This iFrame shows the page something.php, which is one of my pages. I had to be able to update home.php without waiting for something.php to update, so the solution was to place them in two documents and then include it using iFrames (now home.php can be shown without waiting for something.php). The content of this something.php is dynamic and updates based on other webpages. Let's say the user wants to update the content of this iFrame, or the content doesn't show up. He will then be given an button "update" which will just refresh the something.php page, without refreshing home.php
Can this be done (preferably in PHP, but JavaScript/jQuery is also welcome)?
You'll have to do it with client side scripting.
Something along the lines of:
<input type="button" onclick="reLoadIframe();">
reLoadIframe(){
document.getElementById('iframeYoureTryingToUpdate').contentWindow.location.reload();
}
or
reLoadIframe(){
document.getElementById('iframeYoureTryingToUpdate').src =document.getElementById('iframeYoureTryingToUpdate').src`
}
Just provide the url in loc and this should be enough.
var loc = "http://example.com/example.php";
var frameId = "myFrame";
document.getElementById(frameId).src = loc;
Related
How can I use php to echo a page instead of linking to existing html page with hyperlink?
One example would be
<html>
<body>
click on this link to go back
</body>
</html>
Now, I don't want this link above to be a link to html page but to echo a page with php code when user clicks on click on this link to go back(to generate a page). This way, nobody can access a page after they logout.
Can php do this?
If someone logged out of your website or application I assume you will have a check whether or not this person is allowed to view the content.
Your question itself is very unclear to me. But it sound a bit if you want to do client-side coding (don't follow a link when it's clicked) with PHP which is not possible since PHP is a server side language. You will need Javascript to change the behavior of a link (for example, make an AJAX request which returns the content of another page).
Create a function, what the function should do is it should get triggered on a button click event and the code inside the function must send an curl request to the url you want and get back the html from it and echo it on your page
For answering the second part of your question!. you want no one to access the data without logging in so maintain $_SERVER['']; and sessions for users and validate if the user is inside a genuine session then show him content else no
I have different pages and scripts on my website. I want to show 1 URL in the adressbar for all the pages.
I have pages like:
www.example.com/index.php
www.example.com/map1/index.php
www.example.com/map1/map2/index.php
www.example.com/map1/map2/map3/index.php
I want that all these URLS should be shown like:
www.example.com
I have expirimented with my .htaccess script, but I cant get this working.
Can anybody help me with this problem? How can I show all the URL`s on my page like "www.example.com".
You could make www.example.com/index.php (which would be the default for www.example.com) be the only page that actually gets loaded fully, with all the others simply providing content to be loaded via ajax.
You could also make www.example.com/index.php contain only an iFrame or a frameset, such that clicks to other locations would only be to the nested frame, leaving the address bar always at www.example.com
You could also try taking "map1" and "map2" etc out of the URL and use them instead as post variables, or $_SESSION variables, or what have you.
Hide the Target URL of a Link in Status Bar
There are some instances where you have redirect the user through one page to get them to another page. There is a way to do this stealthily - without letting the user know that there was a redirect. Yes - it sounds evil - but it don't have to be. Say you have a click tracking software - you have to track each click the users make. To do that you need a redirecting page what will track the clicks. Hopefully, the following illustration will make things clearer...
Current Page->Page with the click counter->Destination Page
You don't want the user to see that you are passing through the middle page. Usually, the URL will flash in the address bar for just a second(or less) - so we don't have to worry about that. We just have to prevent the URL from appearing in the status bar when the user hovers over the link.
There are three methods to do this...
Change the status text
Hijack and stop the click event and redirect
page.
Make an Ajax call on click event.
Changing Status Text
This is the old method. This uses the window.status property to show a different URL to the user. Simple and easy method - but it rarely works now a days. This method has been abused by malicious sites a lot - so most browsers have disable this option. In Firefox, you can find that option at Tools -> Preferences -> Content -> Enable Javascript(click on the 'Advanced' Button) -> Change status bar text. If that's checked, you can use window.status to change the status bar text. But its disabled by default.
But if you still want to use this method(not recommended), this is how to do it...
<a href="click_counter.php?redirect_to=http://www.google.com/"
onmouseover="window.status='http://www.google.com/';return true;"
onmouseout="window.status='';">Go To Google</a>
Hijacking Click Event
In this method, when the user clicks on the link, the script captures the click event and stops it. This will prevent the browser from opening up the target page. Then we use location.href to go to the new page. Sample code below...
HTML Code
Go To Google
Javascript Code
<script type="text/javascript">
function init() {
document.getElementById("google-link").onclick=function(e) {
e=e||window.event;
stopEvent(e);
location.href="click_counter.php?redirect_to=http://www.google.com/";
return false;
}
}
window.onload=init;
</script>
Ajax Method
This is for all you web 2.0 fans. Ajax method simply makes a call to the counter server side script on the click event. This is perhaps the best method of all - as the counter URL doesn't appear at all. Needless to say, the server side script used here will be different from the one used in the other methods - there is no redirection here. The code is very simple as well...
HTML Code
Go To Google
**Javascript Code**
<script type="text/javascript">
function init() {
document.getElementById("google-link").onclick=function(e) {
jx("counter.php?url="+escape("http://www.google.com/")); //Use your favorite ajax library here.
}
}
window.onload=init;
</script>
I have a page which is pretty basic. There is a jquery script that runs when a user clicks on a menu item. The jquery runs a ajax to load the content of ANOTHER page inside a div tag. The page that loads checks to make sure the user is logged in still. The problem is i can not redirect the entire page back to the login screen.
META HTML REDIRECT
i have tried this. The issue here, not all the browsers redirect - such as FF. And I really don't like this way.
HEADER REDIRECT
I have tried to insert a header redirect in the page that loads. The issues here is, the ajax inserts the login page inside the div tag... resulting in a website inside of a website.
Is there any other way of doing this? Thank you.
You could use JavaScript to redirect. Try window.location.replace(your_login_url) which is similar to a HTTP redirect.
I have a website that loads its content by the user clicking a button, then the clicks calls a javascript function that updates just the content of a central <div> element by changing its inner html with AJAX and jQuery.
So for example, when the visitor wants to go to my contact page, they click the contact button, and the div's content is updated to the contact form by pulling that content from an external file and using it to replace the div's innerHTML. The actual address of the entire page doesnt change, as the entire page isnt being reloaded, just the innerHTML of the div.
Further to this, my site uses PHP, and I've coded it such that various content can be populated in the div on page load by passing variables in the url. For example, index.php?page=home will tell the PHP script to load the home page content from an external file, while index.php?page=contact will load the contact form. This way search engines can find each page and their content by following these links in my sitemap.
My problem is that if a visitor clicks a button and loads different content into the div, then clicks the reload button of their browser or presses CTRL+R, the entire page reloads and the div of course reverts to its original content.
My question is, is there a way to load a particular page when the browser refreshes? For example, if the visitor has loaded the page index.php?page=home then clicked on the contact button and updated the div content, then pressed the refresh button of their browser, can i somehow write a script that will load index.php?page=contact instead, preserving the look of the page and the content?
Option 1: location.hash
Easier, but not as robust. Worth taking a look at, but if you want to store the states of multiple elements, you probably want option 2.
Here's a demonstration of the code below.
Example:
function onHashChange() {
var hash = window.location.hash;
// Load the appropriate content based on the hash.
}
$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);
$('#button').click(function(){
window.location.hash = "home";
});
This way, all you need to do is change the hash on button change and handle the page load using the hashchange event.
Option 2: History API using History.js
A little harder to implement (but not much!), but infinitely more robust. Relies on a widely used framework.
Another, and perhaps a cleaner way of doing this would be to use the History API. It allows you to change window.location without refreshing the page, allowing you to handle those changes using JavaScript.
Not all browsers support the API yet though, but you could use History.js, which provides location.hash fallbacks if needed. Here's a demo.
From History.js's github page:
History.js gracefully supports the HTML5 History/State APIs
(pushState, replaceState, onPopState) in all browsers. Including
continued support for data, titles, replaceState. Supports jQuery,
MooTools and Prototype. For HTML5 browsers this means that you can
modify the URL directly, without needing to use hashes anymore. For
HTML4 browsers it will revert back to using the old onhashchange
functionality.
Example of History.js:
function onStateChange() {
var state = window.History.getState();
// Handle state accordingly.
// Fetch the data passed with pushState.
var data = state.data;
var title = state.title;
var url = state.url;
}
// Check the initial state.
$('document').on('load', onStateChange);
// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);
// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' }
// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");
The state name is ignored by most browsers. The third parameter is the bit that gets added to the URL.
Weeks ago I've released a jQuery plugin for this situations, when the developer wants to add ajax content to a page, and dynamically change the URL.
The plugin is jQuery Dynamic URL https://github.com/promatik/jQuery-Dynamic-URL
There is a demo here: http://promatik.pt/github/dynamic-url/
When you load ajax content, you can push a path to the URL, ex:
$.pushPath( 0 /*level*/, "contact" )
Your site instantly turns to: example.com/contact
Or in your case, you can use:
$.pushVar( "page", "contact" )
Your site instantly turns to: example.com/?page=contact
This plugin also allows you to do this:
Imagine that you give me a link for: example.com/?page=contact
In the index page, $.getVars( ) will return: {"page" : "contact"}
So with this info you can build your page based on the this queries.
There's more thigs you can do with the plugin, like listening to event onPopState (that means user went back or forward in browser, so you can rebuild your pages based on that) just try out the demo...
Important information: This plugin works in all modern browsers except IE9, witch works partially, you still can access url data like example.com/?page=contact (and build your page based on this queries) but not modify dynamically the URL during the user experience.
because of considering embed google ads into include page. I am giving up jquery.loading
(google not allow jquery ajax and jquery loading for ads, now even iframe page)
so is it possible use other javascript method for control php page include?
more explain, if my page need to including 10 pages, and I do not want they all loading in same time(such slowly for loading at same time). So I put 10 buttons for switching include page.
only click each button, loading the chosen include page to main. and click another one, loading the new one and hidden the first one.
As long as they are links google should crawl them fine, you just need to stop the link from being clicked on in javascript...
Test Page
Then your jquery...
$(document).ready(function(){
$('a.test').click(function(e){
// Load the AJAX here
// Stop the click from actually going to the page
e.preventDefault();
});
});