Replacing html page text by using JQuery

Question

I have a simple javascript code which replaces the page content....by contents of another file(test2.html)

Code:

$(document).ready(function(){
    $("[href='#']").click(function() {
        function getcontent(url, id) {
            $("#id").load("url");
        }
    });
});

Now am using

<div id = "content">                 
<p> REPLACE </p>
</div>
<a href="#" onClick="getcontent('test2.html', 'content')">click here</a>

So now on clicking click here REPLACE should be replaced by content of test2.html...but its not happening... I have included the required jquery.js file in my script..

lonesomeday · Accepted Answer · 2011-06-12 18:43:13Z

1

No, this won't work. getcontent is a function defined in a particular scope -- that of the click handler callback function. It is not accessible in the global scope -- the scope that the onClick method receives.

You should use a genuine click handler, perhaps setting data using data attributes:

$('[href="#"]').click(function() {
    $('#' + $(this).data('id')).load($(this).data('url'));
});

Using the following HTML:

<a href="#" data-url="test2.html" data-id="content">click here</a>

answered Jun 12, 2011 at 18:43

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

3 Comments

RanRag Over a year ago

its not working if u can plz take a look at my complete code... link

lonesomeday Over a year ago

Does the HTTP request happen? Have a look with a network monitor, e.g. Firebug or Chrome console

RanRag Over a year ago

my chrome console showing nothing and my Python server says ::code 404, message File not found "GET /favicon.ico HTTP/1.1" 404-

Felix Kling · Accepted Answer · 2011-06-12 18:44:43Z

1

You have a weird setup. The function getcontent is not defined in global scope, it cannot be found by the onclick event handler in the HTML. There are other issues as well.

I suggest something like:

<a href="#content" rel="test2.html">click here</a>

and

$(function(){
    $("a[href^='#']").click(function(){
        $(this.href).load(this.rel);
    });
});

answered Jun 12, 2011 at 18:44

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Matt · Accepted Answer · 2011-06-12 18:42:10Z

0

$('#' + id).load(url);

In your current method above, you are passing string literals, not the variables themselves.

answered Jun 12, 2011 at 18:42

Matt

3391 silver badge5 bronze badges

3 Comments

Felix Kling Over a year ago

That will not work. getcontent is not defined in global scope.

RanRag Over a year ago

@Felix : how to define it in global scope

Felix Kling Over a year ago

@Ran: This is not the only issue. Have a look at @lonesomeday's or my answer.

Mike Edwards · Accepted Answer · 2011-06-12 19:02:37Z

You seem to be misunderstanding what certain parts of your code are doing. Also, I'd recommend giving your href a real id to make things easier. You don't need to use the jQuery 'click' method and ALSO assign an onclick handler inline in the HTML.

Try this instead:

<div id = "content">                 
   <p> REPLACE </p>
</div>
<a id="clickThis" href="#">click here</a>

$(document).ready(function() {
    $('#clickThis').click(function() {
       $('#content').load('test2.html');
    });
});

Your code with some comments:

$(document).ready(function(){
    // this will assign a click handler, you don't need an 'onclick'
    // attribute on the anchor tag also
    $("[href='#']").click(function() {
        // but what does your click handler do?
        // It defines a function that is never called.
        function getcontent(url, id) {
            $("#id").load("url");
        }
    });
});

Collectives™ on Stack Overflow

Replacing html page text by using JQuery

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related