CODEWITHSUNDEEP
jqueryajax
Ali
Ali

Reputation: 1058

Load content in div with jQuery

i have a jQuery code to load contents from link in a modal window. this is my jquery code:

$(document).ready(function() {
    var $loading = $('<img src="loading.gif" alt="loading">');

    $('#page-help').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).one('click', function() {
            $dialog
                .load($link.attr('href'))
                .dialog({
                    title: $link.attr('title'),
                    width: 500,
                    height: 300
                });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });

            return false;
        });
    });
});

HTML Code:

<a id="page-help" href="index2.html">Test</a>

i want to load contents in a DIV, not in a modal window! How i can do this? :(

Upvotes: 0

Views: 10321

Answers (2)

krishna
krishna

Reputation: 960

I found a best answer at https://stackoverflow.com/a/6949666/1158603 if you want to load some external page's content into div

<a href="/page1">Load Page 1</a>
<a href="/page2">Load Page 2</a>
<a href="/page3">Load Page 3</a>
<a href="/page4">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>


$('a').click(function() {
  $('#LoadMe').load($(this).attr('href'));

  return false;
});

Upvotes: 2

Wern Ancheta
Wern Ancheta

Reputation: 23297

You can use the $.load method in jquery:

First you must have a div where you want to load the content to:

<div id="container"></div>
<img id="img" src="loading.gif" style="display:none;"/>

Then in your script:

$('#page-help').click(function(){
    $('#img').show();
    $('#container').load('index2.html', function(){
       $('#img').hide();
   });
});

Upvotes: 1

Related Questions