Load html file passed as parameter using in jquery?_问答_开发者

I am a newbie in jquery. I am trying to create a page, which loads the contents without reloading the page. In my test page, i have 2 links i.e. link 1 and link 2. When the default page is clicked. It just says 'Hello'. When clicked on either of link, it shoud say 'Hello link1' (if link1 is clicked), 'Hello link2' (when link2) is clicked. Link1 contents(html) is in link1.html and link2 contents is in link2.html file. Whenever either of the link is clicked, it should pass name of the link's html page as parameter. here is what i did:

<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript">                                         
   $(document).ready(function(){
    $("a").click(function test(filename){
         alert(filename);
         var b = $("a").attr("title");
         alert(b);
         //$('#menuContents').load($(filename)).fadeIn("slow");
         //$('#menuContents').load('link1.html').fadeIn("slow");
         $('#menuContents').load(b).fadeIn("slow");
    });
   });
</script>
</head>

<body>
<div id="page-wrap">
    <div id="menu">
        <a href="javascript:test('link1.html');" title="link1.html">link1</a>
        <a href="#" title="">link2</a>      
    </div>
    <div id="menuContents">
        <h1>Hello!</h1>
    </div>
</div>

</body>
</html>

The problem is if i just pass the name of html file as parameter, it doesn't get read as string value instead it 开发者_StackOverflow社区get's read as object. The first alert in code will give [object Object] message. I can read the text from title of the link by using .attr attribute and can load the page using .load attribute. I can also change the contents of page by directly giving html page name in .load attribute (commented out in code).

Can anyone tell how i can pass name of the html page as parameter rather than hardcoding or reading through title?

Thank you.

If you are using server side scripting such as PHP you may want to look into jQuery's $.ajax()

just remove the ready() and click() function, leave the test function alone

function test(filename){
     alert(filename);
     //$('#menuContents').load($(filename)).fadeIn("slow");
     //$('#menuContents').load('link1.html').fadeIn("slow");
     $('#menuContents').load(filename).fadeIn("slow");
}

ps. in fact when you define a function in jquery click function, the function can not be called outside, you need to define the test function in gloal, then you can call it in anywhere include a.href

There is a nice way to do this below

    <html>
    <head>
    <title>Ajax Practice</title>
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript">                                         
       $(document).ready(function(){
        $("a").click(function (e){
             $('#menuContents').load($(this).attr('href')).fadeIn("slow");
             e.preventDefault();
             return false;
        });
       });
    </script>
    </head>

    <body>
    <div id="page-wrap">
        <div id="menu">
            <a href="link1.html">link1</a>
            <a href="link2.html">link2</a>      
        </div>
        <div id="menuContents">
            <h1>Hello!</h1>
        </div>
    </div>

    </body>
    </html>

 $("a").click(function test(filename){

filename is in fact the event object. Please check out http://api.jquery.com/click/

Besides, in your code:

    <a href="javascript:test('link1.html');" title="link1.html">link1</a>

will call the function test, so you can define this function in your javascript code

function test(filename){
    alert(filename)
    // your code here

}

Try the example here http://jsfiddle.net/WUBsq/

There are many cleaner ways you can have, for instance:

<a class="refresh" data-title="link1.html">click here</a>

...

$(document).ready(function(){
    $('a.refresh').click(function(){
        var title = $(this).attr('data-title');
        alert(title);

        // your code here
    })
})

Try here : http://jsfiddle.net/WUBsq/3/