0

I add/remove input box using jQuery for multiple form input. i need to add fancybox (iframe method) for each input. in action fancybox worked for existing input but when i add new input box fancybox not work and not open.

JS : 

$(document).ready(function () {

    var MaxInputsVideo = 8; //maximum input boxes allowed
    var InputsWrapper = $("#VideoWrapper input"); //Input boxes wrapper ID
    var AddButton = "#AddMoreVideo"; //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        e.preventDefault();
        InputsWrapper = $("#VideoWrapper input");
        x = InputsWrapper.length;
        console.log(x + '  ' + MaxInputsVideo);
        if (x < MaxInputsVideo) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).parents('#VideoWrapper').append('<div class="VideoRemove" style="position:relative;clear:both;"><div class="filesmap"><input type="text" name="video[]" class="form-control" id="video-' + x + '" tabindex="7"  /></div><span class="filesicon"><a class="icon-picture boxGetVideo" href="./filemanager/dialog.php?type=1&field_id=video-' + x + '">filemanager </a> </span><span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#"> remove</a></span></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclassVideo", function (e) { //user click on remove text
        console.log(x);
        if (x > 1) {
            $(this).parents('.VideoRemove').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

$('.boxGetVideo').fancybox({
    'width': '75%',
        'height': '90%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',

});

HTML: 

    <div id="VideoWrapper"> <a href="#" id="AddMoreVideo" class="help-box icon-plus">add</a>

    <div class="VideoRemove" style="position:relative;clear:both;">
        <div class="filesmap">
            <input type="text" name="video[]" class="form-control" value="/video/golden.flv" id="video-0" tabindex="7" />
        </div>  <span class="filesicon">
                                            <a class="icon-picture boxGetVideo" id="btnChoiceThumbnail" href="./filemanager/dialog.php?type=1&field_id=video-0">filemanager</a>
                                            </span>
    <span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#">remove</a></span>

    </div>
    <div class="VideoRemove" style="position:relative;clear:both;">
        <div class="filesmap">
            <input type="text" name="video[]" class="form-control" value="/video/golden2.flv" id="video-1" tabindex="7" />
        </div>  <span class="filesicon">
                                            <a class="icon-picture boxGetVideo" id="btnChoiceThumbnail" href="
./filemanager/dialog.php?type=1&field_id=video-1">filemanager</a>
                                            </span>
    <span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#">remove</a></span>

    </div>
</div>

How do can i fix this?

NOTE: My fancybox version is 1.3.6. i need edit code for this version not update to any 2.x version of fancybox.

NEW DEMO for JFK comments JSFIDDLE (problem: click in add link than click to iframe link)

Community
  • 1
  • 1
user27133
  • 487
  • 4
  • 16
  • 31
  • Fancybox v1.3.4 doesn't support dynamically added elements. You need a workaround as in the referred question/answer. **Note**: fancybox v1.3.6 doesn't exist, that might be referring to the version of a WP plugin, which might be using v1.3.4 in the background. – JFK Sep 22 '14 at 17:42
  • @JFK: You Right. FancyBox 1.3.6 has a patched and modified version. i add version 1.3.4 But in all code fancybox not work. i see your example code in `http://www.picssel.com/playground/jquery/jQueryONreplacingContent_07mar12.html` i cant understand your example. can you help me with my code and fancybox 1.3.4?! new demo : http://jsfiddle.net/cvhk56vp/1/ – user27133 Sep 22 '14 at 21:42
  • Your jsfiddle won't work because is using jQuery v1.10.1 and fancybox v1.3.4 doesn't work with jQuery v1.9+ ... check http://stackoverflow.com/q/14344289/1055987 for reference. Try downgrading jQuery to v1.8.3 and it will work http://jsfiddle.net/cvhk56vp/6/ (of course you need the proper video references) – JFK Sep 22 '14 at 23:02
  • @JFK:i check my previous fancybox 1.3.6 this patched for jquery 1.9+.`(Patched for jQuery 1.9+ compat by Sabel)`. i check jsfiddle.net/cvhk56vp/6 this worked for existing input box But so not work for add/remove NEW input box when i click in add link!!! – user27133 Sep 23 '14 at 05:37
  • 1
    The jsfiddle didn't work for new elements because you have to apply the proposed solution at http://stackoverflow.com/a/9084293/1055987 so see it work for existing a dynamically added elements http://jsfiddle.net/cvhk56vp/7/ – JFK Sep 23 '14 at 06:32
  • @JFK:Thanks This Worked perfectly. please change comment to answer for up vote an choose best answer. – user27133 Sep 23 '14 at 07:26
  • No worries, you can up vote my answer here http://stackoverflow.com/a/9084293/1055987 – JFK Sep 23 '14 at 16:16

0 Answers0