Loading external Html with Jquery and Asp.net MVC

Question

In my Index view I have this:

<script type="text/javascript" src="~/Scripts/jquery-2.0.0.js"></script>
<script type="text/javascript" src="~/Scripts/Javascript1.js"></script>

<div id="dictionary">
</div>

<div class="letter" id="letter-a">
<a href="#">A</a>
</div>

In my Javascrip11.js I have this:

$(document).ready(function () {
 $('#letter-a a').click(function () {
    $('#dictionary').load('HtmlPage1.html');
     alert('Loaded!');
        return false;
    });
});

And in my HtmlPage1 I have this:

<div>Definitions for letter A</div>

I want the Javascript to load this HtmlPage1 and insert into the div dictionary of the page when I click the anchor tag.....I have HtmlPage1 both in the Scripts folder and in the ViewFolder.. Both doesnt work.... I am getting the alert but the snipet is not being inserted....

Tallmaris · Accepted Answer · 2013-04-25 13:38:45Z

1

When loading a static file in MVC are basically using an absolute path. Put the HtmlPage1.html file in the root of the site and everything should work

Of course you can use subfolders as well (or a controller-action, which sounds hacky though):

$('#dictionary').load('Views/HtmlPage1.html');

answered Apr 25, 2013 at 13:38

Tallmaris

7,5903 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

2rsvold · Accepted Answer · 2013-04-25 13:36:32Z

1

You will have to make a "Ajax Controller" (or name of your choice) so you can load the page through a URL.

Sample:

Place the "HtmlPage1" in the "View/Ajax"-folder.

Create a controller named "AjaxController" with the following action:

public class AjaxController
{
     public ActionResult HtmlPage1()
     {
         return View();
     }
}

And then call the url "Ajax/HtmlPage1" in your JavaScript:

$('#dictionary').load('/Ajax/HtmlPage1');

From here you can add more ActionResults to add different results. :)

answered Apr 25, 2013 at 13:36

2rsvold

172 bronze badges

Comments

David B. · Accepted Answer · 2013-04-25 13:38:14Z

1

try this:

$(document).ready(function () {
  $('#letter-a a').on("click", function (e) {
    e.preventDefault();
    $('#dictionary').load('HtmlPage1.html');
    alert('Loaded!');
    return false;
  });
});

answered Apr 25, 2013 at 13:38

David B.

877 bronze badges

Comments

A. Wolff · Accepted Answer · 2013-04-25 13:34:02Z

0

I think you need to preventDefault behaviour on <a> tag:

$(document).ready(function () {
 $('#letter-a a').click(function (e) {
    e.preventDefault();
    $('#dictionary').load('HtmlPage1.html');
     alert('Loaded!');
        return false;
    });
});

answered Apr 25, 2013 at 13:34

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Harshit Tailor · Accepted Answer · 2013-04-25 13:39:08Z

0

Try this :-

$(document).ready(function () {
 $('#letter-a a').click(function () {
     $.get('HtmlPage1.html')
     .success(function(data) {
       alert(data);
         $('#dictionary').html(data);
     });

        return false;
    });
});

answered Apr 25, 2013 at 13:39

Harshit Tailor

3,2816 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

Loading external Html with Jquery and Asp.net MVC

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related