Simple loading html using Ajax with jQuery

Question

That is the simple code from my index.html

In the script part I have:

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

            $('document').ready(function(){
                    $("#cv").click(function(){
                            $("#div1").load("cv.html",aviso());
                    });
            });

            function aviso(){
                    alert('La solicitud ha sido procesada');
            }
    });

</script>

And this is in cv.html

<h1>&iexcl;Mi CV!</h1>

I'm trying to use jQuery Ajax capability to display different content loading in an asynchronic way. I've already searched here and tried this: Dynamically load PHP within a main page but I've got no success. The function aviso() does execute although, but the content is not displayed. I know this is probably a very simple problem, but I'm stucked there. Thanks in advance!

load("cv.html", function() { aviso(); } didn't make it either. — Marcelo Zárate
– Marcelo Zárate, Commented Feb 12, 2013 at 17:02
On the page, press F12, go to the console and type $("#div1").load("cv.html"). What happens? — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 12, 2013 at 17:08
XMLHttpRequest cannot load file:///C:/Users/Public/Documents/zaratemarcelo/cv.html. Origin null is not allowed by Access-Control-Allow-Origin. — Marcelo Zárate
– Marcelo Zárate, Commented Feb 12, 2013 at 17:11

Corneliu · Accepted Answer · 2013-02-12 17:13:53Z

0

The second $('document').ready is unnecessary ~~and incorrect (should be without quotes)~~.

Try this:

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

        $("#curriculum").click(function(){
            $("#div1").load("cv.html", aviso);
        });

        function aviso(responseText){
            alert('La solicitud ha sido procesada');
        }
    });
</script>

edited Feb 12, 2013 at 17:13

answered Feb 12, 2013 at 16:53

Corneliu

2,9521 gold badge21 silver badges23 bronze badges

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

4 Comments

Corneliu Over a year ago

@Marcelo Zárate - As Anthony Grist mentioned there's no element with an id of cv present in your HTML. I've updated the answer and changed the #cv to #curriculum

Reinstate Monica Cellio Over a year ago

Actually, $(document) and $("document") are the same thing. I only found that out recently myself :)

Marcelo Zárate Over a year ago

I know the second document is unnecesary, it is commented. That was one solution someone give me and didn't work, of course.

Corneliu Over a year ago

@Archer - You're right, just tested that and it works. Didn't know that. Thanks for letting me know.

Reinstate Monica Cellio · Accepted Answer · 2013-02-12 17:01:37Z

0

There's no element with an id of cv present in your HTML that I can see. Did you instead mean this link?

<li><a href="#" id="curriculum">Curr&iacute;culum Vitae</a></li>

If so, your jQuery code should be:

$("#curriculum").click(function(){
    $("#div1").load("cv.html", aviso);
});

Or you could change the value of the id attribute on the <a> element.

edited Feb 12, 2013 at 17:01

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

answered Feb 12, 2013 at 16:57

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

1 Comment

Marcelo Zárate Over a year ago

Yeah, that's because I thought of some kind of conflict with the id name, I tried last minute. But didn't worked before, when the names matched. Still doesn't.

Collectives™ on Stack Overflow

Simple loading html using Ajax with jQuery

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related