CODEWITHSUNDEEP
jqueryhtmlload
user981053
user981053

Reputation: 621

Load DIV with button in Jquery

I am looking for a method using Jquery that only loads a DIV onto the page once it is called with a button/event. I have tried numerous functions with no avail, leaving me to wonder if it is even possible. Seeing how I am a beginner to Jquery, I am confident that my lack of knowledge is blocking me from accomplishing this feat. Can anyone point me in the right direction?

Upvotes: 1

Views: 14928

Answers (4)

K2so
K2so

Reputation: 982

I don't know if this is what you are looking for:

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("input[name='btn']").click(function() {
                    $("#parent").html("<div>content of the div</div>");
                });
            });
        </script>

    </head>

    <body>
        <div id="parent">       
        </div>
        <form>
            <input type="button" id="btn" name="btn" value="Button" />
        </form>
    </body>
</html>

Upvotes: 1

rkw
rkw

Reputation: 7297

Use the .one() function:

$('input[type="button"]').one('click', function() {
     $('#parent').load
});

$('input[type="button"]').click(function() {
     ' do whatever you need to here.. I assume toggle()
});

Upvotes: 0

Kai Qing
Kai Qing

Reputation: 18833

in javascript:

function loadDiv()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}

then in your html:

<a href="javascript:loadDiv()">Load a div</a>

You can obviously be a lot more robust with this but if you want a better example you should provide a lot more information

Edit: To minimize load times I recently built a site that loaded only the relevant information for the specific page, then ajaxed in the other content. This functionality was by request only, so I load in a specific js file on click, which contained the extra features for the site. Let's pretend it used the same example click as above...

function loadDiv(){
    if(typeof loadExtraContent() == "undefined")
    {
        $.ajax({
            url: '/some_file.js',
            async: false,
            success: function(data, status){
                if(status == 'success')
                {
                loadExtraContent();
                }
                }
        });
    }
    else
    {
        loadExtraContent();
    }
}

So the function loadExtraContent() is defined in the some_file.js file that I load via ajax only if the function is undefined. That way you don't bother loading the script at all until needed, then don't load it again if the function is already defined.

Then in some_file.js you have the original function from this example...

function loadExtraContent()
{
    var elem = $('div');
    elem.attr('class', 'new_div');
    elem.html('hello world');
    $('body').append(elem);
}

Keep in mind that I did it this way because the site I built was MASSIVELY ajaxed and had absolute tons of extra content. The job called for this kind of treatment. This is sort of overkill unless the expected traffic is high or you want to conserve bandwidth for some reason (like hosting your own videos and not wanting to dish out 4 megs a hit for no reason)

Upvotes: 2

Sam
Sam

Reputation: 15770

function loadDiv() {
    $("<div class='new_div'>Hello World</div>").appendTo("body");
}

Then in you html:

<a href="javascript:loadDiv();">Load Div</a>

Upvotes: 0

Related Questions