logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
JavaScript and DOM
Options
Go to last post Go to first unread
Previous Topic Next Topic
ray22901031  
#1 Posted : Friday, May 13, 2022 10:00:37 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
I dislike putting JavaScript's on the actual pages themselves, but in this case, it's the only way it will function properly. If I were to reference the script within the head section of the SEO HTML header, it just doesn't function. Below is the script.

I wonder if this has to do because I am using "innerHTML" to actually change a specific object within the HTML file itself. I'm pretty sure it has to do with DOM, and some timing issues.

Everything is working properly because the script is at the bottom of the page. I am just curious if support can offer any insight on this?

Many thanks,
-Ray



function cs_date() {

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();

weekdays = new Array(7);
weekdays[0] = "Sunday";
weekdays[1] = "Monday";
weekdays[2] = "Tuesday";
weekdays[3] = "Wednesday";
weekdays[4] = "Thursday";
weekdays[5] = "Friday";
weekdays[6] = "Saturday";

var dayname = weekdays[date.getDay()];
var monthname = date.toLocaleString('default', {month: 'long'})

document.getElementById("current_date").innerHTML = dayname + ", " + monthname + " " + day + ", " + year;
}
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
nadeem  
#2 Posted : Monday, May 16, 2022 6:40:35 AM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
Ray,

I added your script to the head section (e.g. home page HTML Head) and it worked. Are you calling the cs_date() function? I used it like this:

Code:

<script type="text/javascript">
$(function () {

    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    weekdays = new Array(7);
    weekdays[0] = "Sunday";
    weekdays[1] = "Monday";
    weekdays[2] = "Tuesday";
    weekdays[3] = "Wednesday";
    weekdays[4] = "Thursday";
    weekdays[5] = "Friday";
    weekdays[6] = "Saturday";

    var dayname = weekdays[date.getDay()];
    var monthname = date.toLocaleString('default', { month: 'long' })

    document.getElementById("current_date").innerHTML = dayname + ", " + monthname + " " + day + ", " + year;
});
</script>


and the div to assign the current date value

Code:

<div id="current_date"></div>


You can achieve the same using a single line of C# code on the view file where you want to show the date:

Code:

<p>@string.Format("{0:D}", DateTime.Now)</p>


Hope this helps!
Back to top
ray22901031  
#3 Posted : Monday, May 16, 2022 7:44:09 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Thank you for looking into this, yes the script itself will work if you added it to the bottom of the page or within the HTML had section. I should have been a bit more precise, it will not function if you refer to it as an external script and point to it.

However, things have change, we have decided not to use this approach because it forces an edit and commit to the database every time the page loads. If we have enough people on the site, it could become a timing issue, but also it will slow down the loading of the main page, which is not a good thing for Google.

I apologize for any confusion and not being more specific, but it will not function, you reference it in the HTML section and then call the script as a function within the page. I do believe this is a timing issue with DOM.

If you wish to pursue this out of curiosity, that's okay, but it's no longer necessary for us.

Many thanks
Back to top
nadeem  
#4 Posted : Monday, May 16, 2022 9:28:25 AM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
I just tried it by adding the script inside an external file and including in _Base.layout.cshtml file as well as included in the store menu file like this:

Code:
RequireScript("~/Scripts/my_custom_script.js");


Inside base layout file like this just after @RenderSection("Scripts", required: false)

Code:
<script src="~/Scripts/my_custom_script.js"></script>


And finally, added inside HTML head section like this:
Code:

<script src="./Scripts/my_custom_script.js"></script>


It worked for me in all cases. You can check your browser console to see if there is any error on the console. But since you aren't going to use it, you can ignore it :)

Edited by user Monday, May 16, 2022 9:37:15 AM(UTC)  | Reason: Not specified
Back to top
ray22901031  
#5 Posted : Monday, May 16, 2022 10:43:43 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
I think my problem was I wasn't using RequireScript, either way we went on an entirely different direction, but I do appreciate the assistance.

-Ray
Back to top
Users browsing this topic
Guest (5)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.149 seconds.