CODEWITHSUNDEEP
jqueryhtmlajaxiframe
lalith458
lalith458

Reputation: 695

How to load html content(not a page) into a div on button click

I have a form which takes the following code

<div class="data" data-id="sports">
<div class="data-inner"></div>
</div>

I have a html page that contains A left navigation bar and middle content. The left Nav contains a List of categories 

<li class="nav"><?=$sports?></li>

and the container has the following div

<div class="container">
// js file that supports the iframe to be loaded on my page
   <div class="data" data-id="sports">
<div class="data-inner"></div>
</div>

</div>

I used ajax, and tried to print the data it is returning after li is clicked. As the content being loaded is html, the data(iframe) loads at the nav container instead of loading in .container class

Update

    <script type="text/javascript">    
    $(function(){
        $('#order li').click(function(){
        $('.container').html('');

        alert($(this).attr("nav"));
        });
        });
</script>

So if i click on sports the div section corresponding to data-id="sports" will loaded, Same way if Games is clicked data-id="games" will be loaded. the div section for games looks like 

   <div class="data" data-id="games">
    <div class="data-inner"></div>
    </div>

Initially i used iframes, but as the iframe is not adjusted properly, i was told to work with this code

Hope you got the clear idea now !

I don't have much knowledge in javascript. Please help

Upvotes: 0

Views: 3882

Answers (2)

carrabino
carrabino

Reputation: 1762

based on your explanation of what you're trying to do, i'm assuming that this code:

<li class="nav"><?=$sports?></li>

will be filled with a file name that you want loaded when li is clicked on.

e.g.
<li class="nav">baseball.html</li>
<li class="nav">football.html</li>
<li class="nav">soccer.html</li>

if this is the case, then this code will load the file into .container when one of those sports (file names) are clicked on

$(function(){
    // attach click event to each li element with class "nav"
    $('li .nav').on("click", function(){
        // assuming each li will show the name of a file to load using AJAX, do this
        // load the container div with the file you just clicked on (i.e. $(this) is li ) 
        $('.container').load( $(this).text() );

    });
});

Upvotes: 1

Silviu-Marian
Silviu-Marian

Reputation: 10927

There's a lot of relevant pieces of the puzzle missing from your original question.

But anyway. Try this Javascript code on your page. At the very least it may serve you as a template.

<script type="text/javascript">

$(function(){

    var button = $('a.nav');
    var container = $('div.container').first(); // .first() ensures that only a single div will be used, not many
    var url = 'http://www.yoursite.com/data_from_where_to_load.php';

    button.click(function(){

        var condition = confirm("Load data: Click YES for iframe, click NO for Ajax. ");

        container.html('');

        if(condition){ // load with iframe
            var iframe = $("<iframe />");
            iframe.attr('src',url).appendTo(container);
            iframe.ready(function(){
                alert('if you can see this, probably the iframe just loaded');  
            });

        }else{ // load with Ajax
            $.ajax({
                url: url, dataType:'html', complete:function(r){
                    container.html(r.responseText); 
                    alert('done loading via ajax');
                }
            });
        }

    });

});

</script>

Upvotes: 1

Related Questions