Ajax modal call through custombox

I browsed for some jquery modal forms that made use of ajax and settled for one with a push animation. I can get things working fine within the same html page, but when I make my form on a diff page and try call it in, nothing happens. Help hugely appreciated.

Have tried both target & url

report.html is in the same dir as the html the above script is in
it just says ‘error to load report.html’

ive also tried adding to open on href

  • Report Item
  • and finally tried below without href above, but nothing at all happens

    <script>
    $('#option-ri').on('click', function () {
        $.fn.custombox( this, {
    		url:'report.html',
            effect: 'push',
        });
        return false;
    });
    </script>
    

    and finally tried along the lines of

    $(document).ready(function(){
    $('#option-ri').live('click', function () {
        $.fn.custombox( this, {
    		url:'report.html',
            effect: 'newspaper',
        });
        return false;})
    });
    </script>
    

    Info about script and stuff below

    http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/

    cant see how/what this guy is doing!

    http://stackoverflow.com/questions/22190687/jquery-modal-form-is-posting-twice

    Can you post a link to a page where we can see your script not working?

    Eh Pullo, thanks for reply. Partner has secured server with some framework that defines access, so I can’t even make a public folder! I will get some free space after work and link here. For now, console is giving this…

    Below gives error: custombox is undefined…

    <script>
        $(document).ready(function(){
            $('#option-ri').on('click', function ( e ) {
                Custombox.open({
                    url: 'report.html',
                    effect: 'push',
    				cache:false,
                });
                e.preventDefault();
            });
        });
    </script>
    

    css & js added…how else can I define it? Will upload after work

    Cheers

    Are you including the custombox library in the correct place?

    I think so! It works fine if I call a DOM on the same page. Surely the form I’m calling in doesn’t need the js & library applied?

    So I’ve mocked the same thing and uploaded it. tmp.html has the js, library and script call. report.html should scroll in pushing the content into tmp.html

    http://cwilliams.eu.pn/public/ajaxcb/tmp.html#

    http://cwilliams.eu.pn/public/ajaxcb/report.html#

    The first page displays the following error in the console:

    GET http://cwilliams.eu.pn/public/ajaxcb/js/custombox.js 404 (Not Found) tmp.html:29
    

    The path to the library would appear not to be correct,

    Ooops sorry my bad…forgot to upload it. JS folder & file there now.

    getting…uncaught referecne error. custombox not defined.

    I guess you’re not including all of the necessary libraries.

    When I boiled the AJAX example down to its minimum, this is what was left:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery Custom Box Plugin Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/demo/css/demo.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.css">
        <style>p { padding: 10px;}</style>
      </head>
      <body>
        <p>
          <a href="ajax.html" id="example2" title="Example with ajax">Ajax Example</a>
        </p>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.js"></script>
        <script src="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/demo/js/demo.js"></script>
      </body>
    </html>
    

    Demo

    Hmm ye I see… but these files weren’t included in the download. I’m missing watch.js…demo holds the plugin calls…
    demo shows in index

    <a href="ajax.html" id="example2" title="Example with ajax">Ajax Example</a>
    

    and demo.js holds

    $('#example2').on('click', function () {
        $.fn.custombox( this, {
            effect: 'newspaper'
        });
        return false;
    });
    

    Ok. I’ll give that a go later. Thanks for your help Pullo

    Yeah. I found the plugin a bit confusing to use and not very well documented.
    Let us know how you get on.

    I’ve pretty much copied it and am getting error
    object doesnt support property or method ‘custombox’

    will stick at it for the time being and keep you updated

    Think I’ll have to give up with this and find a different animated modal plugin =(

    not a clue why object isn’t supporting method custombox… applied latest jquery and did everything I could think of. Probably something simple, but this time custombox wins and I lose!

    I can help you debug.
    Can you post a link to the new page where it is not working?

    Nice 1 Pullo. I copied library urls same as example. On tmp page I made 2 links. ‘Link’ and ‘Same Ajax Example’.
    Same ajax example is now getting the modal in view…but there’s no animation and its not in view like it should be…it’s pushing the under content (z-index?) The custombox js should be applying this anyway.

    As for the ‘Link’ there’s some ‘Uncaught reference error - custombox not defined’

    http://cwilliams.eu.pn/public/ajaxcb/tmp.html#

    Ok, well on further inspection, the plugin seems to be a little buggy.
    I could only get it working using the files on the demo page directly. The downloadable files din’t work for me.

    Anyway, basic setup:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery Custom Box Plugin Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/demo/css/demo.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.css">
      </head>
    
      <body>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.js"></script>
      </body>
    </html>
    

    Then for a non-ajax modal, you need the markup on the same page:

    <div id="modal" style="display: none;" class="modal-example-content">
      <div class="modal-example-header">
        <button type="button" class="close" onclick="$.fn.custombox('close');">&times;</button>
        <h4>jQuery Custombox</h4>
      </div>
      <div class="modal-example-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
    

    Then a trigger (note that the href is the same as the id for the modal):

    <a href="#modal" class="list-group-item" id="sidefall">Sidefall</a>
    

    Then some JS to add the behaviour:

    <script>
      $('#sidefall').on('click', function () {
        $.fn.custombox( this, {
          effect: 'sidefall'
        });
        return false;
      });
    </script>
    

    The whole thing:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery Custom Box Plugin Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/demo/css/demo.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.css">
        <style>p { padding: 10px;}</style>
      </head>
    
      <body>
    
        <a href="#modal" class="list-group-item" id="sidefall">Sidefall</a>
    
        <div id="modal" style="display: none;" class="modal-example-content">
          <div class="modal-example-header">
            <button type="button" class="close" onclick="$.fn.custombox('close');">&times;</button>
            <h4>jQuery Custombox</h4>
          </div>
          <div class="modal-example-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.js"></script>
        <script>
          $('#sidefall').on('click', function () {
            $.fn.custombox( this, {
              effect: 'sidefall'
            });
            return false;
          });
        </script>
      </body>
    </html>
    

    With the AJAX example, you start with the same base, but put the modal contents into a second file:

    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery Custom Box Plugin Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/demo/css/demo.css">
        <link rel="stylesheet" href="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.css">
        <style>p { padding: 10px;}</style>
      </head>
    
      <body>
        <p>
          <a href="ajax.html" id="ajax_example">Ajax Example</a>
        </p>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://www.jqueryscript.net/demo/Responsive-jQuery-Modal-Window-Plugin-with-CSS3-Transitions-Custombox/src/jquery.custombox.js"></script>
        <script>
          $('#ajax_example').on('click', function () {
            $.fn.custombox( this, {
              effect: 'newspaper'
            });
            return false;
          });
        </script>
      </body>
    </html>
    

    ajax.html

    <div class="modal-example-content">
      <div class="modal-example-header">
        <button type="button" class="close" onclick="$.fn.custombox('close');">&times;</button>
        <h4>jQuery Custombox with AJAX!</h4>
      </div>
      <div class="modal-example-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
    

    HTH

    Yeah seems quite buggy… I can’t get it to work through ajax but on page was fine. Shame cause I the push effect would have suited…nevermind, I’ll just go with something else.

    Thanks again Pullo

    Have gone with featherlight…its well documented and working as intended :wink: But now I have another problem, which I’m not sure how to do…I’ll make a new post for this though, as it isn’t related.

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.