Conditional javascript code by checking data-title

Hi,

I would like to use only one javascript file and then load the script specifically for each page.

In my HTML file i’m using:

<body data-title="my_page_title">

In the javascript file i’m using

if ($("body").data("title") === "my_page_title") {
    // Place the logic pertaining to the page with title 'my_page_title' here...
}

Now if i’ve got two functions with the same name but under two different pages, the script works fine in google chrome but i’t doesn’t work with safari.
Can anybody explain why?
Many thanks

Which version of Safari are you using?

Hi thanks for your help, i’m using Version 11.0.1 (12604.3.5.1.1)

Looking at your code, the only thing I could imagine causing an issue, would be the data attribute, but if I’m reading caniuse correctly, then that should be OK. More digging needed I think.

Back in the land of the living again. It looks like you might be using jQuery; which version of are you using? Assuming you’re hotlinking to a CDN for that, can you give me the URL and I’ll see if I can recreate something here.

Try using single quotes in your JS, instead of the double-quotes you’re using currently.

if ($('body').data('title') === 'my_page_title') {
    // Place the logic pertaining to the page with title 'my_page_title' here...
    console.log('I\'m here');
};

It’s working on my copy of Safari [ Version 11.0 (12604.1.38.1.7) ], though I usually work on Chrome.

Hi thanks for your help i’m going to try later and let you know. Thanks again

1 Like

Hi so, i’ve tried your solution but it still returns error 500 I’ve also checked the javascript and php console but they don’t show any errors.

Here is my javascript code:

if ($(‘body’).data(‘title’) === ‘client_group_post_comment’) {

console.log('I\'m here');

function SendComment(postid, userid, groupid, subject) {

$("#postid").val(postid);
$("#userid").val(userid);
$("#groupid").val(groupid);
$("#postsubject").val(subject);

}
$(‘#sendButton’).click(function(SendComment) {
SendComment.preventDefault();

var postID = $('#postid').val();
var userID = $('#userid').val();
var groupID = $('#groupid').val();
var postsubject = $('#postsubject').val();
var message = $('#message').val();
$.ajax({
    url: '../controllers/ctrl_client_blog_app/ctrl_client_group_comment.php',
    data: {
                postid: postID,
                userid: userID,
                groupid: groupID,
                postsubject: postsubject,
                message: message
            },
    method: "POST",
    beforeSend: function() {
        $(".loader").show();
    },
    success: function(response) {
        $(".loader").hide();
        swal({
                title: response.title,
                text: response.message,
                type: response.status
            },
            function() {
                location.reload();
            }
        );
    },
    error: function(jqXHR, exception) {
        $(".loader").hide();
                    if (jqXHR.status === 0) {
                        swal('Il server non risponde', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (jqXHR.status == 404) {
                        swal('Errore 404', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (jqXHR.status == 500) {
                        swal('Errore 500', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (exception === 'parsererror') {
                        swal('Si è verificato un errore!', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (exception === 'timeout') {
                        swal('Time Out', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (exception === 'abort') {
                        swal('Richiesta Annullata', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else {
                        swal('Errore non previsto', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    }
                }
});

});

}

// Porzione di codice che viene attivata solo nella pagina client_user_post_view
if ($(‘body’).data(‘title’) === ‘client_user_post_comment’) {

function SendComment(postid, userid, subject) {

$("#postid").val(postid);
$("#userid").val(userid);
$("#postsubject").val(subject);

}
$(‘#sendButton’).click(function(SendComment) {
SendComment.preventDefault();

var postID = $('#postid').val();
var userID = $('#userid').val();
var postsubject = $('#postsubject').val();
var message = $('#message').val();
$.ajax({
    url: '../controllers/ctrl_client_blog_app/ctrl_client_private_comment.php',
    data: {
                postid: postID,
                userid: userID,
                postsubject: postsubject,
                message: message
            },
    method: "POST",
    beforeSend: function() {
        $(".loader").show();
    },
    success: function(response) {
        $(".loader").hide();
        swal({
                title: response.title,
                text: response.message,
                type: response.status
            },
            function() {
                location.reload();
            }
        );
    },
    error: function(jqXHR, exception) {
        $(".loader").hide();
                    if (jqXHR.status === 0) {
                        swal('Il server non risponde', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (jqXHR.status == 404) {
                        swal('Errore 404', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (jqXHR.status == 500) {
                        swal('Errore 500', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (exception === 'parsererror') {
                        swal('Si è verificato un errore!', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (exception === 'timeout') {
                        swal('Time Out', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else if (exception === 'abort') {
                        swal('Richiesta Annullata', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    } else {
                        swal('Errore non previsto', 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info');
                    }
                }
});

});

}

Sorry for taking time to get back to you on this one, I’ve been away from the computer for most of today.

I’ve had a quick look at the code you posted and have a few thoughts.

  1. Rather than quote code to get it to show up, you should either use the </> button on the toolbar, or place 3 backticks ( ``` ) on the line before the code, and three backticks on the line after it. The problem with using the quote tool, is that anyone who wants to replicate your code, then has to remove the ‘greater than’ ( > ) symbol from every line of code that needs copying - tedious at best.
  2. There are still an awful lot of double-quotes in the code you’ve shown here. Whilst in theory it shouldn’t matter, it’s best to be consistent with their use throughout your code.
  3. Lastly, I’d struggle to replicate the issue, as I’d need understand the HTML markup and CSS it is being applied to.

With that said, I’m slightly puzzled that you’re getting a 500 error, which is usually an indicator that something is going wrong with the code that runs at the server side, which this isn’t. I’ll see if I can get a closer look at it tomorrow and see if I can spot anything obvious.

1 Like

I agree, it’s best to be consistent by using double-quotes instead.

There’s little benefit gained from using single quotes. You shouldn’t be writing strings of HTML code from JavaScript, and the double quotes are the standard default for every common language, including JavaScript.

Should we start a single-quotes vs double-quotes topic?

Not sure…

Found the error it was in my php file. Still don’t understand why it works in chrome and firefox and not in safari. Anyway it is sorted and I will definitely follow your advice about double quotes thanks for your help for now

1 Like

I have been wondering if it’s related to the name “title” and if maybe changing it to something like “mytitle” would solve the problem.

That is, there are the <title> element and title="" attributes that might be getting involved with the data-title.

I would hope that browsers and JavaScript would be able to not get them mixed up but because data- is often “custom” this may be an edge case that got missed by either Safari, jQuery, or the combination of both.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.