$.colorbox.close(); colorbox close issue

Question 1

$.colorbox.close(); colorbox close issue

jquery colorbox

Aaru · Dec 5, 2013 · Viewed 29.6k times · Source

Answer

Answer

I loaded a full example on my workstation and found two issues.

When Colorbox loads a page using AJAX, it actually inlines the resulting HTML. Since your ajax.html file is loading jQuery and the Colorbox widget again, it is causing issues. So, remove the two <script> tags in your ajax.html file.
In index.html you have a call to $('#test_close').colorbox.close();. Replace this with $.colorbox.close();.

These should fix your issues. Good luck!

Question 2

I have tried to close the colorbox window while clicking the button. the window should be a ajax paged window.

I have tried with example page , the inline button can able to close, the same code i have written in the ajax paged but it throws the error in console firebug ie

**"TypeError: $.colorbox is undefined


(9 out of range 6)"**

I really don't know the meaning of the error.

My HTML Code is .index.html

    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body {
    font:12px/1.2 Verdana, sans-serif;
    padding:0 10px;
}
a:link, a:visited {
    text-decoration:none;
    color:#416CE5;
    border-bottom:1px solid #416CE5;
}
h2 {
    font-size:13px;
    margin:15px 0 0 0;
}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){

                $(".ajax").colorbox();
                $(".inline").colorbox({inline:true, width:"50%"});

                $('#test_close').click('cbox_closed',function(e){
                     $('#test_close').colorbox.close();
                }); 

            });
        </script>
</head>
<body>
<p><a class='ajax' href="http://localhost/karthiga/demo/colorbox-master/content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
  <div id='inline_content' style='padding:10px; background:#fff;'>
    <p> Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem </p>
    <br/>
    <br/>
    <p><a href="javascript:void(0);" id="test_close">Close</a></p>
  </div>
</div>
</body>
</html>

And the ajax page is : ajax.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){

                $('#test_close1').click('cbox_closed',function(e){
                alert('');
                     $.colorbox.close();
                }); 
            });
        </script>
</head>
<body>
<p> Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum </p>
<br/>
<br/>
<p><a href="javascript:void(0);" id="test_close1">Close</a></p>
</body>
</html>

What have I done wrong?

$.colorbox.close(); colorbox close issue

Answer

Related questions