Динамически вызывать fancybox

Question

Я хочу динамически вызывать fancybox для загрузки iframe. URL-адрес iframe будет состоять из некоторых элементов формы. Я использовал что-то вроде этого, и это работает:

<!--***************************************************************-->
<!--this allows fancybox to be called using a dynamic link-->
<div id="hidden_clicker" style="display:none">
    <a class="various fancybox.iframe" id="hiddenclicker" href="http://whatever.com" >Hidden Clicker</a>
</div>
<!--***************************************************************-->

тогда скрипт:

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'elastic',
            closeEffect : 'none'
        });
    });

    function callBoxFancy(my_href) {

        var j1 = document.getElementById("hiddenclicker");

        j1.href = my_href;

        $('#hiddenclicker').trigger('click');

    }

затем загрузить iframe:

    $('#addtownsubmit').click(function() {
        var $url='/areastructure/addtown/';
        var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/'
        callBoxFancy($url+$get+'iframe/1');
    return false;

});

Есть ли способ улучшить этот код, чтобы мне не нужно было включать HTML-код. Конечно, jquery может создать этот скрытый div для меня?

Answer 1

Я расширил идею, которую дал мне Карим, и сделал следующее:

<script type="text/javascript">

    jQuery(document).ready(function(){jQuery("#FormContactDetails").validationEngine()});

        function callBoxFancy(my_href,type) { // type could be 'iframe', 'ajax' etc.
            var $div = $("<div id='hidden_clicker'/>").hide();
            var $a = $("<a class='ondemand fancybox."+type+"' id='hiddenclicker' href='"+my_href+"' >Hidden Clicker</a>");

            $(".ondemand").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : true,
                width       : '70%',
                height      : '70%',
                autoSize    : true,
                closeClick  : false,
                openEffect  : 'elastic',
                closeEffect : 'none'
            });

            $div.append($a);
            $("body").append($div);
            $('#hiddenclicker').trigger('click');
            $("#hiddenclicker").remove();

        }


        $('#addtownsubmit').click(function() {
            var $url='/areastructure/addtown/';
            var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/'
            callBoxFancy($url+$get+'iframe/1','iframe');
            return false;

        });

</script>

Answer 2

Вам просто нужно создать элементы на лету и добавить их в тело документа. Например:

var $div = $("<div id='hidden_clicker'/>").hide();
var $a = $("<a class='various fancybox.iframe' id='hiddenclicker' href='http://whatever.com'>Hidden Clicker​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</a>");​​​​​​

$div.append($a);
$("body").append($div);