CODEWITHSUNDEEP
jqueryhtmlajaxfancybox
AL̲̳I
AL̲̳I

Reputation: 2461

jquery fancybox show dynamic html string inside an iframe

I want to display some dynamic content from the server using ajax inside a fancybox (iframe). I can show the whole html page like this

index.html

<html>
    <head>
        <link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
        <script src="js/fancybox/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
        <script type="text/javascript">
            function test()
            {
                var input = 'some values';
                $.ajax({
                    url: 'ShowData?inputStr='+input,
                    success: function(data){
                    $.fancybox({
                        fitToView   : false,
                        width       : '80%',
                        height      : '80%',
                        autoSize    : false,
                        closeClick  : false,
                        type        : 'iframe',
                        href        : 'test.html'
                    });
                    },cache: false,
                    error: function(){}
                });
            }
        </script>
    </head>
    <body>
        <h2><a class="fancybox" href="#" onclick="test();">Test</a></h2>
    </body>
</html>

test.html

<html>
    <head>
        //Styles 
        <script type="text/javascript">
            //Some scripts 
        </script>
    </head>
    <body>
        This is a test page
        <!-- Some divs -->
    </body>
</html>

It works fine but I don't want to write an html page everytime and send the link. Instead, I want to send the string (that goes in the html page) and display it inside the iframe.

Is it possible? Thank you

Upvotes: 0

Views: 599

Answers (1)

Rahul Patel
Rahul Patel

Reputation: 5246

Use content attribute of fancybox to set content directly in the fancybox.

function test()
{
    var inputStr = 'some values';
    $.fancybox({
        fitToView   : false,
        width       : '80%',
        height      : '80%',
        autoSize    : false,
        closeClick  : false,
        type        : 'iframe',
        content     : inputStr
    });
}

Upvotes: 1

Related Questions