Wikeipeida Viewer: DOM Changes Don't Stick - RESOLVED

When I step through the Chrome debugger, the DOM changes appear and then disappear when it exits ajax. This doesn’t happen when I hard load the data. To test, I made this simple file and the same thing happens? Any ideas?

    $.ajax({
        url: wikiUrl,
        method: "GET",
        dataType: "jsonp",
        crossDomain: true,
        success: function(qdata, textStatus, jqXHR) {

                listitems = "<p>Test for Debug</p>";
            }
            window.document.getElementById("links").innerHTML = "<p>Test for Debug</p>";

        },
        fail: function() {
            console.log("json failed");
        }

      });

Something looks weird about you’re brackets. Are you sure you are calling the innerHTML in the success callback function?

Isaac

Thanks for getting back to me and sorry for wasting your time. I made some mistakes when deleting some of my debugging statements. Below is the full file. The “Test for Debug Line” shows up immediately after stepping past the window.document.getElementById(“links”).innerHTML = “

Test for Debug

”; line. It then returns to the previous placeholder.

function getWiki() {
var wiki = document.getElementById(“q”).value;
var wikiUrl;
wikiUrl = “https://en.wikipedia.org/w/api.php?action=opensearch&search=” + wiki + “&format=json&origin=*”;
console.log(wikiUrl);
$.ajax({
url: wikiUrl,
method: “GET”,
dataType: “jsonp”,
crossDomain: true,
success: function(qdata, textStatus, jqXHR) {
listitems = “

Test for Debug

”;
console.log(“listitems”);
window.document.getElementById(“links”).innerHTML = “

Test for Debug

”;
},
fail: function() {
console.log(“json failed”);
}
});
}

I don’t think there is a fail callback for jquery AJAX. There is an error callback for failure. Does that help?

Actually, there is a promise fail call but I think you have to chain it off ajax().done().fail(), but I may be wrong.

Update: I deconstructed and pulled it out of the function and to the top of the .js and it works. When I put it back in the function it doesn’t. I must be missing some sort of global variables.


var wikiUrl;
var listitems = “

Test for Debug

”;
wikiUrl = “https://en.wikipedia.org/w/api.php?action=opensearch&search=” + “w” + “&format=json&origin=*”;
console.log(wikiUrl);
$.post(wikiUrl)
.done(function(wikiUrl, textStatus, jqXHR) {
console.log(“done”);
window.document.getElementById(“links”).innerHTML = “

Test for Debug

”;
})
.fail(function(jqXHR, textStatus, errorThrown) {
// log error to browser’s console
console.log(“fail”);
window.document.getElementById(“links”).innerHTML = “

Test for Debug

”;
});

It sticks out to me that you’re using a POST request and you aren’t posting to the server. I would use a GET. Besides that I would test your request using a callback that takes 1 argument then log that argument to see if you get anything back.

example would be: .then(function(data){console.log(data)})

I switched to GET. There are two versions here (everything is in one file if you are inclined to cut and paste). The only difference is that in the first has a document.getElementById(“wsearch”).addEventListener(“submit”, function() {
while the second goes straight through (resulting in no user interaction). In the first case the change sticks, in the second it doesn’t. I wonder if this might be related to the Cross-Origin requests.

Version a:


<head>
    <title>Wikipedia Viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel=" stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link rel="stylesheet " href="/FreeCodeCamp/wikipediaViewer/wikipediaViewer.css " />
</head>

<body id="body">

    <div class="container-fluid text-center">
        <h2 id="title">Wikipedia Viewer</h2>
        <div class="wrapper">
            <a type="button " class="btn btn-primary btn-sm " href="https://en.wikipedia.org/wiki/Special:Random/" target="_blank">Random Wikipedia Article</a>
        </div>
        <br>
        <form class="row " id="wsearch" role="form ">
            <!--<form class="row " id="wsearch " role="form ">-->
            <span>
                <span class="col-md-0 "></span>
            <span class="form-group col-md-10 ">
                    <input  type="search "  id="q" placeholder="wiki-search " />
                </span>
            <span class="col-md-2 "><button id="submitbutton" type="submit" class= "btn-sm">Submit</button> </span>
            </span>
        </form>
    </div>
    <div id="links">
        <h1>Original DOM</h1>
    </div>
    <footer class="text-center ">
        <hr>
        <p id="footer ">Written and coded by <a href="https://www.freecodecamp.com/swayman01 " target=”_blank”>Steve Wayman</a>.</p>
    </footer>
    <script>
        var listitem = "<h1>Updated DOM for testing in $.get</h1>";
        var jqXHR;
        /* global $*/
        document.getElementById("wsearch").addEventListener("submit", function() {
            var wikiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + "w" + "&format=json&origin=*"; //standard call
            console.log(wikiUrl);
            $.get(wikiUrl)
                .done(function(wikiUrl, textStatus, jqXHR) {
                    document.getElementById("links").innerHTML = listitem;
                    console.log("$line 53 (set breakpoint here: " + listitem);
                })
            console.log("line 55 (exited jqueary): " + listitem);
        });
    </script>
</body>

</html>

version b


<head>
    <title>Wikipedia Viewer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel=" stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link rel="stylesheet " href="/FreeCodeCamp/wikipediaViewer/wikipediaViewer.css " />
</head>

<body id="body">

    <div class="container-fluid text-center">
        <h2 id="title">Wikipedia Viewer</h2>
        <div class="wrapper">
            <a type="button " class="btn btn-primary btn-sm " href="https://en.wikipedia.org/wiki/Special:Random/" target="_blank">Random Wikipedia Article</a>
        </div>
        <br>
        <form class="row " id="wsearch" role="form ">
            <!--<form class="row " id="wsearch " role="form ">-->
            <span>
                <span class="col-md-0 "></span>
            <span class="form-group col-md-10 ">
                    <input  type="search "  id="q" placeholder="wiki-search " />
                </span>
            <span class="col-md-2 "><button id="submitbutton" type="submit" class= "btn-sm">Submit</button> </span>
            </span>
        </form>
    </div>
    <div id="links">
        <h1>Original DOM</h1>
    </div>
    <footer class="text-center ">
        <hr>
        <p id="footer ">Written and coded by <a href="https://www.freecodecamp.com/swayman01 " target=”_blank”>Steve Wayman</a>.</p>
    </footer>
    <script>
        var listitem = "<h1>Updated DOM for testing in $.get</h1>";
        var jqXHR;
        /* global $*/
        var wikiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + "w" + "&format=json&origin=*"; //standard call
        console.log(wikiUrl);
        $.get(wikiUrl)
            .done(function(wikiUrl, textStatus, jqXHR) {
                console.log("$line 51 (set breakpoint here: " + listitem);
                document.getElementById("links").innerHTML = listitem;
            })
        console.log("line 54 (exited jqueary): " + listitem);
    </script>
</body>

</html>

Few things here if you haven’t got this yet. You should make a function that calls your get request. Store your variables and elements in that function and not globally. Then on your button submit call you should call that function. That should help.

Here is what I would do for the function to give you an idea:

  submitbutton.onclick = function() {
    getWiki();
  }


  var getWiki = function () {
          var search = document.getElementById('search');
          var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + search.value + "&format=json&origin=*";

    $.ajax({
      type: 'GET',
      url: url,
      async: true,
      dataType: 'json',
      success: function(data) {
        console.log(data);
      },
      error: function(data) {
        console.log(data);
      }
    });
  }

You have to prevent the form from submitting and reloading the page. Here’s a framework:

$(submitButton).click(function(e) {
    e.preventDefault();

$.ajax({
// do your thing here
});

});

Below another example, because I didn’t tested mine :slight_smile:

This worked! Thanks so much to all of you for helping move me forward.

glad I can help :). Good luck in the following challenges