minimizing ajax/jquery functions for dynamic content

Question

I am unsure if I am going about dynamically updating the content on this site properly. As I get deeper into building the site I have began to realize that my functions are going to be crazy..

The code is working however I am adding a new function for each menu item. I was looking for a way to simplify that. Would it be possible to somehow use one function to handle the changing of the content for each of the onclick events I've setup? Maybe its time to pick up a book, any suggestions are welcomed.

HTML:

    <ul id="mainNav">
    <li><a href="#" onclick="contentAjax()">HOME</a></li>
    <li><a href="#" onclick="contentAjaxDocs()">DOCS</a></li>
    <li><a href="#" onclick="contentAjaxServers()">SERVERS</a></li>
    <li><a href="#" onclick="contentAjaxMonitors()">MONITORS</a></li>
    </ul>

Javascript:

function contentAjax() {
    var request = $.ajax({
    url: '/resources/templates/home.php',
    type: "GET",
    dataType: "html"
    });

    request.done(function(msg) {
        $("#content").html(msg);

    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });

    var request2 = 
    $.ajax({
    url: '/resources/templates/homerightPanel.php',
    type: "GET",
    dataType: "html"
    });

    request2.done(function(msg) {
        $("#rightPanel").html(msg);

    });

    request2.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });

}

I apologize for not being specific enough, the code is working however I am adding a new function for each menu item. I was looking for a way to simplify that. Would it be possible to somehow use one function to handle the changing of the content for each of the onclick events ive setup? — R.MILLER, Apr 22 '16 at 21:23
Make a function that takes a URL and target div as arguments and then makes the request? — Chris, Apr 22 '16 at 21:25
Okay, I think I understand. ill see what I can come up with. Thank you — R.MILLER, Apr 22 '16 at 21:30

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Something like this seems more efficient.

HTML

 <ul id="mainNav">
    <li><a href="url/to/home">HOME</a></li>
    <li><a href="url/to/docs">DOCS</a></li>
    <li><a href="url/to/servers">SERVERS</a></li>
    <li><a href="url/to/monitors">MONITORS</a></li>
 </ul>

Javascript

$('#mainNav li a').click(function(e){
    e.preventDefault(); //So the page doesn't load the URL
    var url = $(this).attr('href');
    contentAjax(url);
});
function contentAjax(url) {
    var request = $.ajax({
        url: url,
        type: "GET",
        dataType: "html",
        success: function(msg){
            $("#content").html(msg);
        },error: function(jqXHR,textStatus){
            alert( "Request failed: " + textStatus );
        }
    });
}

The added benefit of my method (and the way you should do things) is the pages at those URLs should work without javascript. So if the user has Javascript disabled they site will work and if the do have javascript your site will still work. Your way, if a use has Javascript disabled your site is literally broken.

Additionally you shouldn't use the onclick attribute (Why is using onClick() in HTML a bad practice?)

This is perfect thank you, much simpler and easier to read. I especially like the fact you were able to remove the onclick from html and handle it in the js! — R.MILLER, Apr 22 '16 at 22:26
When using this code, for whatever reason the preventDefault was being ingnored. I tried adding document.ready to no avail. Here is what I did to make the code work: $(function(){$( "#mainNav li a" ).click(function( event ){ event.preventDefault(); var url = $(this).attr('href'); contentAjax(url); }); }); — R.MILLER, Apr 25 '16 at 17:00

Hyder B. · Answer 2 · 2016-04-22T22:20:29.507

You can simply pass the page name as an argument. See below:

HTML:

   <ul id="mainNav">
        <li><a href="#" onclick="contentAjax('home')">HOME</a></li>
        <li><a href="#" onclick="contentAjax('docs')">DOCS</a></li>
        <li><a href="#" onclick="contentAjax('servers')">SERVERS</a></li>
        <li><a href="#" onclick="contentAjax('monitors')">MONITORS</a></li>
        </ul>

JS:

    function contentAjax(pageName) {
    var request = $.ajax({
        url: '/resources/templates/' + pagename + '.php',
        type: "GET",
        dataType: "html"
    }).done(function (msg) {
        $("#content").html(msg);

    }).fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

    var request2 =
        $.ajax({
            url: '/resources/templates/homerightPanel.php',
            type: "GET",
            dataType: "html"
        }).done(function (msg) {
        $("#rightPanel").html(msg);

    }).fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

}

As a side note, if your home right panel will be the same on all pages, I would recommend you to simply include it in your other pages via PHP instead of calling it via AJAX. It will make your site load faster.

//For example in /docs.php, add:
include_once(`homerightPanel.php`)

This is also a very acceptable answer, thank you. This really helped me understand how to pass an argument from the html to the js. — R.MILLER, Apr 22 '16 at 22:34
I think I was being redundant with the rightPanel. It does change per page but I think it would be simpler to just include it with the content and perhaps swap out the container instead. — R.MILLER, Apr 22 '16 at 22:35

minimizing ajax/jquery functions for dynamic content

2 Answers2