1

I need to be able to issue a load for an HTML document in a specific DIV when an event like menu-item click occurs. I tried the jQuery Load method in different ways, but nothing caused the HTML file to load at all, the result is either 404 or nothing happens. I have found several examples, but non worked for me, so I create my own example. I am aware the the loaded file must be in the same domain as the loading code (or so I understand), I thought maybe this is why the jsFiddle is not working, so I created a separate .HTML file and tried to load a local .HTML document but it also did not work.

HTML:

 <div class="container">
    <div class="row">
        <div class="col">
            <ul>
                <li>
                    <a href="#" onclick='
                $("#result").load(
                "f\\doc1.html")
                '>Click to load page in
                        RHS...</a>
                </li>
                <li><a href="">Doc1</a> </li>
                <li><a href="" onclick="myLoader()"> Doc3</li>
                <li id="ID11"><a href="">Doc4</a> </li>
            </ul>
        </div>
        <div class="col">
            <!----------------- TARGET div id=result------------>
            <div id="result">
                Load here...(result)
            </div>
        </div>
        <div class="col">
            <!----------------- TARGET div id=content------------>
            <div id="content">
                Load here...(content)
            </div>
        </div>
    </div>
</div>

JS:

<script type="text/javascript">
        $('#ID11').on('click', function () {
        $('#content').load('f\doc1.html');
        })

        function myLoader() {
            $('#content').load('f\doc1.html');
        }
    </script>

In summary, I need to cause a load of an HTML document into a DIV based on a menu item click outside the div that is target for the load.

I hope someone could point me to any method that works. Thanks.

Edit:

NoChance
  • 5,632
  • 4
  • 31
  • 45
  • 1
    @LGSon, could you please explain? I need to cause a load based on a mnenu item click outside the div that is target for the load. – NoChance Dec 08 '18 at 17:26
  • What should I explain. You are trying to add a load event handler to a `div` which simply isn't possible. The dupe link show a workaround. – Asons Dec 08 '18 at 17:30
  • @NoChance isn't trying to listen to a load event on a div. From a quick Google search: http://api.jquery.com/load/. – chipit24 Dec 08 '18 at 17:47
  • @chipit24, thanks for your help. I did try this in the attached code, but it does not work. There are several examples but when I try them, they just don't work. I am learning this stuff and I must be doing something very wrong. – NoChance Dec 08 '18 at 17:50
  • What error are you getting? Most likely this isn't working since your request is blocked by the browser. See CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS. – chipit24 Dec 08 '18 at 17:53
  • @chipit24 Thank you for your help. I got 404 on 2 Doc1 and Doc2. As for the default load, that did nothing at all an no errors but no load either. I considered the case you have referred to and created a separate HTML file with similar code. The test file I intended to load is in the same folder as the HTML, same result! I updated the post to include the standalone source file (the file being loaded could be any local file). – NoChance Dec 08 '18 at 18:05
  • If it's on the some domain then it should work fine. See my test here: https://codesandbox.io/s/31xok39505. – chipit24 Dec 08 '18 at 18:32
  • @NoChance Missed that, reopened your question. – Asons Dec 08 '18 at 18:45
  • @chipit24, you are correct. It is a CORS issue. If you like to post your comment as answer, I will accept it. I can't imagine how such a simple thing become a nightmare ... ! God bless COBOL! – NoChance Dec 09 '18 at 05:38

0 Answers0