Rss Feed Like Us on facebook Google Plus

August 29, 2013

JQuery ColorBox : Do Postback for inline HTML

While using JQuery Color Box with inline content , postback of submit button is not working...



CAUSE:
Color Box script generates an iframe for your target Page/Html.In case of inline content/html ColorBox generates an iframe outside the  <form> tag. As we all know to do postback we need  <form> tag. So in generated iframe HTML there is no  <form> tag available.

SOLUTION:
very simple hack , we have to just append the generated iframe html to <form> tag. checkout the below script.

SCRIPT

<script type="text/javascript">
        function cbox() {
            $.colorbox({ inline: true, width: "50%", href: "#inline_content", onOpen: AllowPostback });
        }
        function AllowPostback() {
            $("div#cboxOverlay").appendTo("form:first");
            $("div#colorbox").appendTo("form:first");
        }
    </script>

HTML

<div id='inline_content' style='padding:10px; background:#fff;'>
      <h2>Inline Content </h2>
      <input type="submit" id="btn" name="btn" />
</div>



© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.