Open Closed

Javascript not applying changes (sometimes) #4385


User avatar
0
stefan@ppibv.nl created

Hey there.

Our team has recently encountered a peculiar issue we're not too sure what causes it or how to fix it.

Sometimes, during development, our Javascript will refuse to update. We most notably get this issue when updating our editModal.js. When we make changes, save, and run the project, the JS file seems to be 'stuck' on a previous version of the file.

Sometimes this issue is suddenly resolved by simply restarting visual studio. But sometimes, even reloading our PC and removing cookies and cache doesn't seem to fix the issue. It seems to occur at total random, and dissappear at random as well.

But when we manually enter the path of the file through the URL. It seems that it has the updated version, but yet, the editModal.cshtml still seems to use the previous version.

ABP Framework version: v6.0.2 UI type: MVC DB provider: EF Core Tiered (MVC) or Identity Server Separated (Angular): yes (MVC) Exception message and stack trace: We're not too sure what causes the problem.

We're not to sure how to fix this issue, and our progress is really stalling because of it. Sadly I am not able to provide any more information in terms of error codes or messages on this issue as of now.

I hope to have informed you enough this way. If there are any further questions, I would gladly answer them.


10 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    It could be browser cache or you can try to use hot reload.

    https://learn.microsoft.com/en-us/aspnet/core/test/hot-reload?view=aspnetcore-7.0

  • User Avatar
    0
    stefan@ppibv.nl created

    hi

    It could be browser cache or you can try to use hot reload.

    https://learn.microsoft.com/en-us/aspnet/core/test/hot-reload?view=aspnetcore-7.0

    Hey,

    Thank you for taking the time to read our question, but I'm afraid this hasn't worked for us. We've tried to clear browser cache and cookies multiple times, also in conjunction with hot reload, but this also didn't really seem to fix the issue we have.

    I wish I could give a more solid example of when this occurs or what changes. But it really seems to occur at total random, and we have no really set in stone solution to fix when this occurs, which is for us the most problematic part of the issue.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    But when we manually enter the path of the file through the URL. It seems that it has the updated version, but yet, the editModal.cshtml still seems to use the previous version.

    hi

    Can you share your abp.ModalManager code?

    How do you load js file?

  • User Avatar
    0
    stefan@ppibv.nl created

    Hello,

    This is what we have in our LocationManager (though this does seem to occur in our other modals as well)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using JetBrains.Annotations;
    using Volo.Abp.Domain.Repositories;
    using Volo.Abp.Domain.Services;
    using Volo.Abp.Data;
    using PlanPlanInternet.Zwemscore.GroupSettings;
    
    namespace PlanPlanInternet.Zwemscore.Locations {
        public class LocationManager : DomainService {
            private readonly ILocationRepository _locationRepository;
    
            public LocationManager(ILocationRepository locationRepository) {
                _locationRepository = locationRepository;
            }
    
            public async Task<Location> CreateAsync(
            string name, string street, string housenumber, string housenumberSuffix, string postalcode, string city, string phonenumber, string emailaddress) {
                var location = new Location(
                 GuidGenerator.Create(),
                 name, street, housenumber, housenumberSuffix, postalcode, city, phonenumber, emailaddress
                 );
    
                return await _locationRepository.InsertAsync(location);
            }
    
            public async Task<Location> UpdateAsync(
                Guid id,
                string name, string street, string housenumber, string housenumberSuffix, string postalcode, string city, string phonenumber, string emailaddress, [CanBeNull] string concurrencyStamp = null
            ) {
                var queryable = await _locationRepository.GetQueryableAsync();
                var query = queryable.Where(x => x.Id == id);
    
                var location = await AsyncExecuter.FirstOrDefaultAsync(query);
    
                location.Name = name;
                location.Street = street;
                location.Housenumber = housenumber;
                location.HousenumberSuffix = housenumberSuffix;
                location.Postalcode = postalcode;
                location.City = city;
                location.Phonenumber = phonenumber;
                location.Emailaddress = emailaddress;
    
                location.SetConcurrencyStampIfNotNull(concurrencyStamp);
                return await _locationRepository.UpdateAsync(location);
            }
    
            public async Task<List<Location>> GetAllAsync() {
                return await _locationRepository.GetListAsync();
            }
        }
    }
    

    We have changed nothing about the way JS loads into our modal from the default way that ABP Suite generates the modals and js scripts.

    Which if I'm reading it correctly, means that the Index.js that is loaded into the page, which then subsequently loads the Edit.js if I'm not mistaken?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Do you share the wrong code?

    I can't see code like LocationModal?

  • User Avatar
    0
    stefan@ppibv.nl created

    But when we manually enter the path of the file through the URL. It seems that it has the updated version, but yet, the editModal.cshtml still seems to use the previous version.

    hi

    Can you share your abp.ModalManager code?

    How do you load js file?

    Oh I'm sorry, I have sent the LocationManager.cs code but have called it the LocationModal by mistake... But that is the code that you wanted based on this question?

    I will change my mistake in my previous answer

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Please share your code to load editModal.js. Thanks

    Index.js and modal.cshtml

  • User Avatar
    0
    stefan@ppibv.nl created

    Hello, this would be the code that loads the JS in index.cshtml:

    @section scripts
    {
        <abp-script src="/Pages/Locations/index.js" />
    }
    

    And this is index.js:

    var editModal = new abp.ModalManager({
            viewUrl: abp.appPath + "Locations/EditModal",
            scriptUrl: "/Pages/Locations/editModal.js",
            modalClass: "locationEdit"
        });
    

    I hope this is the info you've been looking for.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    scriptUrl: "/Pages/Locations/editModal.js?" + (Math.random() + 1).toString().substring(2),

    Would adding some random strings work?

  • User Avatar
    0
    stefan@ppibv.nl created

    scriptUrl: "/Pages/Locations/editModal.js?" + (Math.random() + 1).toString().substring(2),

    Would adding some random strings work?

    This seems to have fixed the issue for us last time we have tried this.

    Thank you for your help.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11