Changing div content via jquery with another html file's content - javascript

To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.
What I'm trying to do:
I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.
My HTML part with the navigation menu:
<ul id="nav_main">
<li class="navLink">link here</li>
</ul>
The div that is supposed to change dynamically (on click) is labeled as this:
<div id="main_content">
<p></p>
</div>
The other .html file that I pull data from has a div that looks like this:
<div id="one">blahbalhblahblahlbhalbhlah</div>
The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:
$(document).ready(function(){
$("#nav_main li").on("click", function() {
// here was my first attempt:
$("#main_content p").load("contentholder.html #one");
// my second attempt, using get():
$.get("contentholder.html", function(data) {
$("#main_content p").html(data)
});
});
My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.
All these files are on my local drive. Any help would be greatly appreciated

$(document).ready(function(){
// your code here
});
You are missing the function(){

In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.
See more info here: Get HTML code of a local HTML file in Javascript

Related

Animation to changing HTML page

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

get a php web page to refresh if a session variable is set

I have a web page set up and I'm using PHP, JavaScript, AJAX and jQuery in that page, obviously along with HTML and CSS. I'm using jQuery in the page to hide/show some of the page content dependent on selections made by the user. The page also has a couple of popups that also enable the user to do things with the content in the page (doing things in the database, etc).
Everything works fine apart from when the user does things with one of the popups. When that popup is used, the page doesn’t load properly afterwards. I know the problem has something to do with jQuery, because the page stops loading at the point in the code where the jQuery code actually starts.
Anyway, I know that I can press F5 when the problem discussed above occurs, because when I do that the page re-loads normally (without any sign on previous failure). Therefore, it seems like I need to find a way of refreshing the page automatically in my code, when necessary.
I’ve already set up a session variable that gets set when the popup code is run (as shown below).
$_SESSION[‘appointment_clipboard_updated’] = 1;
I also need to set up code in the page that has the problem, which checks if that session variable is set. If the session variable is set, I need code that actually refreshes the page in the same way as would happen if F5 was pressed.
I have tried the following as a way of refreshing in the problematic page, which doesn’t work:
if (isset( $_SESSION[‘appointment_clipboard_updated’]) && $_SESSION[‘appointment_clipboard_updated’] == 1)
{
unset($_SESSION[‘appointment_clipboard_updated’]);
header(‘Location: /index.php’);
exit();
}
I’ve also tried changing the header call in the code above as follows, but that also didn’t work:
header(‘Refresh: 1; /index.php’);
Therefore, if anyone has a workable solution for this problem, please let me know. Big thanks in advance to anyone who offers any help.
I have already spent time searching the web for a solution and I've also had a good look at what's available on this website, but so far I've not found anything that resolves my problem.
the following is jQuery from the header in my page:
$(document).ready(function()
{
$('input[type="checkbox"]').click(function()
{
if ($(this).attr("value")=="s-a-m")
{
if ($('#s-a-m_checkbox').is(':checked'))
{
$('#s-a-m_textarea').show();
$('#s-a-m_components').show();
}
else
{
$('#s-a-m_textarea').hide();
$('#s-a-m_components').hide();
}
}
});
});
the bit above hides or shows page components as necessary. I'll show the code for actually hiding stuff in my HTML further down.
the bit below is what I use to keep everything hidden until the page finishes loading:
$(window).load(function()
{
$('#hide-until-loaded').fadeIn(50);
);
the next bit is what I use to keep everything hidden until the loading completes. This is simnply a div and all the html/php code that's used to generate page content is kept within it:
<div id='hide-until-loaded' style='display: none;'>
There is also a closer for that div near the bottom of the file, which I haven't shown here.
there are also two other divs that hide specific sections of code (a textarea, plus a few other editable page components). these are both within the 'keep hidden until loaded' div shown above. The divs for hiding/showing showing page components are shown below, although as before I haven't shown there closers
<div id='s-a-m_textarea'>
<div id='s-a-m_components'>
Also, everything worked fine with the jQuery, before I started trying yo use the popup. Also, the popup has been in the page for 2 or 3 years and that always worked without problem, until I introduced the jQuery. therefore, for some strange reason the two parts just cause problems for each other.
Finally, all I want to do is refresh the page, because I know it's problem solved when I can get that working. I can see that by clicking F5 when the problem I'm trying to resolve occurs.

Javascript functions not being called

My website uses a nav bar which toggles divs on and off to go to different "pages". Recently the buttons have stopped responding (nothing happens when clicked, and nothing appears in the console), and I have not been able to figure out why.
My nav bar is formatted like so:
videos<br>
graphic design<br>
web design<br>
My pages are formatted like so:
<div id="videos" class="page">Videos page</div>
The JS is:
$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});
for each button. My JS file is being loaded, and I can view it in the console, so it's not an issue with that. I have been struggling with this for hours and I am at a loss. Can anybody help me understand why the nav bar is not behaving as expected?
EDIT: I have moved my external JS and jQuery to just before the closing </body> tag, and the problem persists. I have put up the complete website at http://hdf.bl.ee/test/index.html if anyone thinks there is an issue not in the code I posted.
Odds are that you're running that code before the element exists, and so $("videosButton") matches no elements, and so hooks up no handlers. Make sure the code is in a script tag after the markup for the elements in the HTML, or as a second-best approach, use jQuery's ready callback. Provided you do that, the function will get called:
$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
videos<br>
graphic design<br>
web design<br>
My pages are formatted like so:
<div id="videos" class="page">Videos page</div>
It turns out the issue was something else entirely. Even though I moved my site's external JS file and the link to jQuery down to the </body> tag, they were being ignored because I had left one <script> in the <head> (the link to the Google API). When I moved that down with the other scripts, everything sudden began working. I am not sure why that was causing the other scripts to be ignored, but it solved my problem.

Link to tab from different page

We are working on a Bootstrap website to present our schoolwork. I have a fair understanding of the used html code, but I am having one problem.
To link to a specific tab/section within a page this link is used:
href="#tab"
I have copied the original index.html and thus created a second webpage. I'm able to link to this page using:
href="page2.html"
But I'm not able to link directly to a tab/section on that second page. I tried using href="page2.html/#tab" or "page2.html#tab" etc. But it doesn't work yet, I think I miss some fundamental knowledge about this coding.
Could anyone explain me how to get this working, in 'normal' language. There are several (older) solutions, but can't get them to work in the javascript files.
This should help...
http://codepen.io/mattsince87/pen/exByn
LINK -> <a id="link1" class="nav-section1" href="#section1">S1. Info</a>
Content -> <h1 id="section1">1. Info</h1>
You can use something like this as i have this thing running in my project. these will check the page if it contains the tabs then it will take the last value from the url of the page2 and will make it visible.
if($("#tabs").length)
{
var id = window.location.hash.substr(1);
$('#tabs a[href="#'+id+'"]').tab('show');
}

Using javascript on loaded html

I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.
My problem is that I cannot use javascript on loaded (.load) html.
I call a navbar into a div by use of:
$(document).ready(function() {
$('.nav').load("navbar.html");
});
This works perfectly and I have no problems with this.
Problems arise when I want to, for example, add a class to my loaded html code.
The script I currently use (saved in a separate .js file and called at the end of my html code):
$(document).ready(function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.
<li id="profile">Profile</li>
After page is loaded: (Added: 'class="active")
<li class="active" id="profile">Profile</li>
(This is part of an unordered list using bootstrap nav-tabs.)
Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class.
Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:
When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can.
I don't understand why this is as I am fairly new to javascript and its syntax.
Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.
What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:
$('.nav').load("navbar.html", function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
This will make sure that the code runs after the load has completed.

Categories