• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Dealing with 404 url error in module.

Scheduled Pinned Locked Moved Solved Troubleshooting
10 Posts 4 Posters 2.4k Views 4 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    justjim1220 Module Developer @Mykle1
    last edited by justjim1220 Oct 12, 2018, 3:05 AM Oct 12, 2018, 3:04 AM

    @mykle1

    I found this, seems to be what you are looking for…

    The new window.fetch API is a cleaner replacement for XMLHttpRequest that makes use of ES6 promises. There’s a nice explanation here, but it boils down to (from the article):

    fetch(url).then(function(response) {
      return response.json();
    }).then(function(data) {
      console.log(data);
    }).catch(function() {
      console.log("Booo");
    });
    

    Browser support is now good in the latest releases (works in Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), Android browser, and Chrome for Android), however IE will likely not get official support. GitHub has a polyfill available which is recommended to support older browsers still largely in use (esp versions of Safari pre March 2017 and mobile browsers from the same period).

    I guess whether this is more convenient than jQuery or XMLHttpRequest or not depends on the nature of the project.

    Here’s a link to the spec https://fetch.spec.whatwg.org/

    "Life's Too Short To Dance With Ugly People"
    Jim Hallock - 1995

    1 Reply Last reply Reply Quote 0
    • J Offline
      justjim1220 Module Developer
      last edited by Oct 12, 2018, 3:07 AM

      this is an example of the XMLHttpRequest mentioned in the previous post…

      var xmlHttp = null;
      
      function GetCustomerInfo()
      {
          var CustomerNumber = document.getElementById( "TextBoxCustomerNumber" ).value;
          var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber;
      
          xmlHttp = new XMLHttpRequest(); 
          xmlHttp.onreadystatechange = ProcessRequest;
          xmlHttp.open( "GET", Url, true );
          xmlHttp.send( null );
      }
      
      function ProcessRequest() 
      {
          if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
          {
              if ( xmlHttp.responseText == "Not found" ) 
              {
                  document.getElementById( "TextBoxCustomerName"    ).value = "Not found";
                  document.getElementById( "TextBoxCustomerAddress" ).value = "";
              }
              else
              {
                  var info = eval ( "(" + xmlHttp.responseText + ")" );
      
                  // No parsing necessary with JSON!        
                  document.getElementById( "TextBoxCustomerName"    ).value = info.jsonData[ 0 ].cmname;
                  document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1;
              }                    
          }
      }
      

      "Life's Too Short To Dance With Ugly People"
      Jim Hallock - 1995

      1 Reply Last reply Reply Quote 0
      • J Offline
        justjim1220 Module Developer
        last edited by Oct 12, 2018, 3:15 AM

        and this example uses jQuery…

        < script>
        $(document).ready(function(){
            $("button").click(function(){
                $.get("demo_test.asp", function(data, status){
                    alert("Data: " + data + "\nStatus: " + status);
                });
            });
        });
        < /script>
        

        you would have to download or call jquery…

        downloaded and added to your module directory…

        getScripts: function() {
            return ["jquery.min.js'];
        },
        

        to call for it…

        < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">< /script>
        

        "Life's Too Short To Dance With Ugly People"
        Jim Hallock - 1995

        M 1 Reply Last reply Oct 12, 2018, 11:50 AM Reply Quote 0
        • M Offline
          Mykle1 Project Sponsor Module Developer @justjim1220
          last edited by Oct 12, 2018, 11:50 AM

          @justjim1220

          I appreciate you trying to help but I could have kept googling myself. I’m looking for an explanation, too, and not just a random “try this!”. Thanks

          Create a working config
          How to add modules

          1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @Mykle1
            last edited by Oct 12, 2018, 12:10 PM

            @mykle1 sorry, you are using some words that don’t describe well what the problem is…

            i THINK you said

            when I try to load image files (local to the MM system), I use a URL string. 
            that URL string is 'relative' to the base of my server, defined by '??????' (you didn't supply that)
            
            when a URL fails to load, I get error 404. (not found). 
            
            but how do I handle this?
            

            you would add an onerror() handler for the img object
            this will get called ONLY when there is an error

            img.onerror = funtion(event_object){
            var img_with_error = event_object.currentTarget
            img_with_error.src=??? the url of the failing image
            }

            see https://www.w3schools.com/jsref/obj_event.asp
            for more info in decoding the event object

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Oct 13, 2018, 2:44 AM Reply Quote 2
            • M Offline
              Mykle1 Project Sponsor Module Developer @sdetweil
              last edited by Mykle1 Oct 13, 2018, 2:45 AM Oct 13, 2018, 2:44 AM

              @sdetweil said in Dealing with 404 url error in module.:

              sorry, you are using some words that don’t describe well what the problem is…

              Yes, I’m sorry about the description but you understood my meaning, so thank you for that. :thumbsup:

              Your onerror() handler suggestion is/was exactly what I needed/wanted and works beautifully. Again, thank you. I do appreciate that you took the time to give me advice/assistance. Here is the finished, working tag:

                // picture
                          var img = document.createElement("img");
                          img.classList.add("photo");
                          img.src = EOL.eolMediaURL;
                          img.onerror = function(event_object) { //  This function replaces broken image
                          var img_with_error = event_object.currentTarget //  This function replaces broken image
                          img_with_error.src= "modules/MMM-EOL/images/darwin.jpg" // This is the path to the replacement image
                         }
                          wrapper.appendChild(img);
              

              I would be remiss if I did not thank @cowboysdude, as well, for his help on this module.

              Create a working config
              How to add modules

              S C 2 Replies Last reply Oct 13, 2018, 4:58 PM Reply Quote 1
              • S Away
                sdetweil @Mykle1
                last edited by Oct 13, 2018, 4:58 PM

                @mykle1 note that your onerror handler could get stuck in a loop IF the forced replacement url also fails

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                M 1 Reply Last reply Oct 13, 2018, 9:40 PM Reply Quote 2
                • M Offline
                  Mykle1 Project Sponsor Module Developer @sdetweil
                  last edited by Oct 13, 2018, 9:40 PM

                  @sdetweil

                  That’s good to know. Thanks to you again. If you were in NYC I would buy you a beer (or many). :-)

                  Create a working config
                  How to add modules

                  1 Reply Last reply Reply Quote 0
                  • C Offline
                    cowboysdude Module Developer @Mykle1
                    last edited by Oct 14, 2018, 3:03 AM

                    @mykle1 @sdetweil came up with a beautiful answer…I didn’t do a thing LOL

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    1 / 1
                    • First post
                      6/10
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy