Load html file passed as parameter using in jquery?

Question

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 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.

T Leach · Accepted Answer · 2011-06-29 02:26:26Z

2

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

answered Jun 29, 2011 at 2:26

T Leach

315 bronze badges

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

Comments

viclm · Accepted Answer · 2011-06-29 02:59:38Z

2

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>

edited Jun 29, 2011 at 2:59

answered Jun 29, 2011 at 2:23

viclm

2031 silver badge8 bronze badges

1 Comment

Liangliang Zheng Over a year ago

At least, you need to prevent the propagation, otherwise the href will be triggered after the $('a').click gets called

Liangliang Zheng · Accepted Answer · 2011-06-29 02:48:06Z

1

 $("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/

edited Jun 29, 2011 at 2:48

answered Jun 29, 2011 at 2:21

Liangliang Zheng

1,78311 silver badges16 bronze badges

Collectives™ on Stack Overflow

Load html file passed as parameter using in jquery?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related