I find that when I'm not doing the lessons from codeschool my pace is much slower, I find it hard when I get to a problem that I just can't solve, for example today I have not at all been sure what to do because I have been stuck trying to get jquery to work with XAMPP as well as the problem of not being able to work the jquery loading, then I start to lose focus when things are hard. When it's easier I can focus very easily but when It's hard I tend to get more distracted and then it just takes ages.

Well, I just keep researching the answer - though if I'm getting too distracted/miserable, I do something else that needs completing and then try again later. If it's late, I try the next day, and usually solve the problem in a few minutes. If I'm not getting anywhere, I ask on here.

jQuery has nothing to do with xampp, it's just JS i.e client side code. Xampp lets you run PHP (server side) scripts.

 

You could run jQuery in any file that has a .htm or .html extension without any need for xampp.

 

And in answer to what I do when I get stuck, I ask on here and/or stack overflow. That said, I find myself getting stuck a lot less often than I used to unless I'm using a language that I've never used before. That comes with experience I guess.

 

I'm talking about when I make AJAX calls which only works on a server.

 

Fair enough. Have you got it sorted now or do you need some help?

 

Well the problem I am having is that even with the XAMPP apache web server working, the AJAX content doesn't load in, I am looking to load in a small part on the about me page at codexx.co.uk , but it just shows the error message instead of the skills.html page.

$(document).ready(function(){
    var profileDesc = $("<p>The most handsome web developer</p>");
    $(".img-portfolio").on("hover", function(){
        $(this).after().html(profileDesc);
    });
    $(".ajaxNav").on("click", function(){
        alert("clicked");
        $.ajax("../html/skills.html", {
            success: function(response){
                $(".response").hide().html(response).slideDown("slow");
            },
            error: function(response){
                $(".response").hide().text("Error: AJAX could not be loaded").slideDown("slow");
            },
            timeOut: 3000,
            beforeSend: function(){
                $(".response").text("Loading...");
            }
        });
    });
    $(".story").on("click", function(){
        $.ajax("../html/story.html", {
            success: function(response){
                $(".response").hide().html(response).slideDown("slow");
            },
            error: function(response){
                $(".response").hide().text("Error: AJAX could not be loaded").slideDown("slow");
            },
            timeOut: 3000,
            beforeSend: function(){
                $(".response").text("Loading...");
            },
            complete: function(){
                $(".response").hide();
            }
        });
    });
});

It says "Junk after document element"

<h2>My skills</h2>
<p>Recently I have discovered codeschool, I have learnt many languages below.</p>
<ol>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>Javascript</li>
    <li>Jquery</li>
    <li>Angular</li>
    <li>ECMA 2015</li>
    <li>Sass</li>
    <li>Git</li>
    <li>Ruby</li>
    <li>Rails</li>
</ol>

I think it could be a problem with finding the file, my folders are laid out so that html, css, javascript are all in different folders.

 

Using ../html/skills.html should find the file, but it's just not working.

 

And I have actually tried renaming it to php but that didn't work.

I've never called html in using an Ajax call before but I think it's something to do with no starting/ending html tag.

 

If I was you I'd change skills.html to skills.php and echo out the string instead. That might fix it.

 

There shouldn't be an issue with calling in HTML directly.

 

I'm guessing it's a file path problem! You're probably better off showing us your folder structure, NullDrone.

 

Edit to add: I created an AJAX demo a long time ago that brings in separate html pages. This code is likely out of date and can be re-factored but hopefully shows the general idea:

 

http://lyndseyb.co.uk/ajax_demos/main_content/

Edited February 23, 201610 yr by Lyndsey