How to determine what content is active on a page - html

I am at a bit of loss of knowledge and honestly don't know what to search for. What I need to be able to do is determine what content to show on a webpage that way when I refresh it will not reset everything. For example, if someone clicks on the messages tab I want the browser to know when it refreshes, that is the tab to stay on. I believe this is done through url encoding but I am not sure. Any help would be AWESOME! Thanks fellow coders.
MORE INFO: I have 2 buttons on a page. One is named "home" and when I click it I want the content of the home page to appear in a box named "info-main". I am doing this with ajax requests. When I click on "edit profile", I want the content in div id "info-main" to be replaced with the edit profile information that is retrieved via ajax as well. I need to figure out how if someone refreshes the page... I want it to stay showing the edit profile information rather then going back to the default of "home" content.
MORE INFO(AGAIN)
I just had a great idea. When the page refreshes, I want it to load specific ajax code based on what the url encode is.
For example.... if the url is:
http://www.exampleurl.com/index.php?info=status-load
I want the browser to execute the ajax I have for retrieving status's.
OR
If the url is:
http://www.exampleurl.com/index.php?info=edit-prof
I want it to load the ajax code I have for retrieving profile edit info.
I really hope this helps. :/

The way I do it is I place a # before the link i.e. href="#messages"
Then I link a .js with this code.
$(function () {
var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
});
I hope this helps

For referring an element on your page, you use a link with a hashtag.
For example, if you have a layout like this:
<div class="top-nav">
Home
Edit Profile
</div>
And you have a password edit form on your editProfile page, you can like to it like this:
Edit Profile
if you have a <form id="passwordChange"> on your editProfile.
Read more: http://css-tricks.com/hash-tag-links-padding/

Related

How can you click an href link but block the linked page from displaying

It was hard to encapsulate my question in the title.
I've rewritten a personal web page that made extensive use of javascript. I'm simplifying matters (or so I hope).
I use a home automation server that has a REST interface. I can send commands such as 'http://192.168.0.111/rest/nodes/7%2032%20CD%201/cmd/DON to turn on a light. I'm putting links on my simplified web page using an href tag. The problem is that it opens the rest interface page and displays the XML result. I'd like to avoid having that page show up. ie when you click on the link it 'goes' to the link but doesn't change the page.
This seems like it should/would not be possible but I've learned not to underestimate the community.
Any thoughts?
You can use the fetch function if your browser is modern enough:
document.querySelector(lightSelector).addEventListener('click', e => {
e.preventDefault(); // prevent the REST page from opening
fetch(lightURL).then // put promises here
})
The variables lightSelector and lightURL are expected to be defined somewhere.
The code listens for clicks on the link, and when one comes, we prevent the REST page from opening (your intention) then we send a request to your light URL with fetch. You can add some promises to deal with the response (e.g. print "light on" or "light off" for example) using then but that's another matter.
If you make the "link" a button, you can get rid of e.preventDefault(); which is the part preventing the REST page from opening.

HTML text box and button that redirects user to a page of same name as entered text

I'm struggling to create an HTML input box that redirects people to a page of the same name.
I'm trying to make a single-line 'input' text box using HTML where a user can enter a domain name, e.g. 'example.com', and upon clicking the [Submit] button they will be redirected to a page based on the text they've entered, e.g. example.com.html.
For example: If the user typed in 'google.com' into the input box and clicked [Submit], they'd be redirected to a page of the same name called 'google.com.html'. I'm setting up an analytics website you see, and this one particular thing has stumped me.
Essentially, each search would require that '.html' be added to the end of every search, no spaces are allowed, only web addresses allowed, etc. I'm literally lost at this stage to knowing how to accomplish this.
I sincerely hope I'm not asking too much of this community. What I've managed to do so far is set it so that if the user enters a domain name that I haven't created a page for, they'll be redirected to that URL that doesn't exist and thus redirected again to a customized 404 Not Found HTTP status page informing them no analytical data was found for that particular website they typed in.
I've been meddling with this for hours and just can't seem to come up with anything.
I tried fixing the problem with the following HTML and JS code
<input id="test" type=text><button onclick="redirect()">Submit</button>
Here is the JS code
function redirect()
{
var url=document.getElementById('test').value
window.location.href=url+".html"
}
Here on Click of the button redirect function will be called which redirect user to the .html page of the input

Using href to go to a show page with a specific id?

I'm trying to create a link on my page that goes to a page with the right id. The page where the link is is at: http://localhost:3000/quotes/9942/marketingScheduleShell. Once the link is clicked the page should redirect to http://localhost:3000/quotes/9942/.
Something along these lines is how I want this to work but when I try the code below it just takes me to the /quotes/ page.
<a href='http://localhost:3000/quotes/' + #quote.id>Show</a>
How can I use the id of the quote object I click on to go to the correct page for that object?
The only think you need is a link_to method
link_to('Show', quote_path(#quote))
Also reading some guides would save you a lot of time: http://guides.rubyonrails.org/

getting URL of pages with ajax

This is a webpage with a number of "subpages" embedded in ajax for all the user reviews.
http://www.goodreads.com/book/show/13636400-the-bone-season#
I am trying to get the specific URL for particular pages (say ?page=4), so I can point people to particular reviews directly instead of going to the page and clicking on page4. below is a snippet from the source code for that page:
<a href="#" onclick="new Ajax.Request('/book/reviews/13636400-the-bone-season?page=4', {asynchronous:true, evalScripts:true, method:'get', parameters:'authenticity_token=' + encodeURIComponent('XsOgyhAC4p0tAm8wGIqTQGY+PxGpDieI45AYry0NlE4=')}); return false;">
when i type http://www.goodreads.com/book/reviews/13636400-the-bone-season?page=4, i get a blank page.
What do I need to do get the page to show? Thank you!
You can get the url for the specific reviews, but I was unable to find anyway to do so for the "page". If you want to direct someone to a specific review, then you can get that url from the "see review" link or the date link on that particular review.
New answer: you need to submit a GET request (using cURL for example) with the parameter mentioned ('authenticity_token=' + encodeURIComponent('XsOgyhAC4p0tAm8wGIqTQGY+PxGpDieI45AYry0NlE4='), and parse what is sent back. Then you'll get your review. Linking to it is not possible unless you find a URL where your review is always displayed.

How to handle refresh while using iFrame in page structure

This is my web structure. In which all link contents are opened in iFrame when link is clicked.
Say I have clicked on 1st link (not Home page) , it gets open in iFrame,contents are displayed properly,all ok. But as I press refresh button expected is shlould load same page whose link I have clicked,but instead of that it loads Home page.
How should I be on same page after refresh also?
I'm using php for server side scripting. Thanks!
Edit:
I tried to store visited page name in session variable and then while loading Home page I check like
$_Session['visited']='/pages/neworder.html';
if(isset($_Session['visited']))
{
echo "<script>window.location.href=</script>".$_Session['visited'];
}
But didnt work!
I think the simplest way is with Jquery. If you make your website use anchors, for example
http://yoursite.com/#page-example
example
When you refresh the page, you will still be accessing this anchor. With jquery you can get this value and do some stuff based on that. So!
var hash = $(this).attr('href').split('#')[1];
This will get that # value, you can compare that in javascript then, or use a switch to determine what to do or simulate the page change.
Server side: Link sends GET request to the page and the src of the iFrame is set by the server.
-OR-
Client side: Add onclick function on the links which changes the src atribute for example with the following code:
document.getElementById('Iframe').src="new link";
-OR-
<iframe src="startin_link" name="iframe_a"></iframe>
<p>link</p>
Pure html.
EDIT: If you want to stay in the page... I suggest you use the first option. Example:
<a href='?page=1'>Some link</a>
then on server side:
if(!is_null($_GET['page'])){
$iframeLink=arrayOfLinks[$_GET['page']];
}else{
$iframeLink="Starting Link";
}
and the iFrame should look like this:
<iframe src='<?php echo $iframeLink; ?>'></iframe>