Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #16600

    Hi,

    I’m using the HTML Newscast template.

    I have created a nice popup window, using Facebox. Unfortunately, the contact form won’t send as a popup.

    Using AJAX call for form submission, the page reloads before the form gets sent.

    In custom.js, I added onsubmit=”return false;” hoping the browser window wouldn’t reload. Like so:

    $.ajax({

    type: “POST”,

    url: options.sendPath,

    data:send.datastring,

    success: function()

    {

    }

    });

    }

    // Prevent the default form submission occurring

    return false;

    }

    Which doesn’t do the trick:( I spent many hours trying other stuff but I think it’s the brower’s reloading of the page on submit that prevents the form being sent.

    What code can I add/ alter on custom.js to make the contact form send from a popup?

    Cheers!

    #92140

    Hi,

    Would you please tell us the url where this form resides and what on the page activates the popup?

    Thanks,

    Nick

    #92141

    Hi Nick,

    This is the url:

    http://www.ankawebdesign.com/facebox/

    The button ‘Book now’ activates the popup. The popup works fine – using Facebox – the email form however won’t send.

    Thanks!

    #92142

    PS

    On index.html I added (header tags):

    <script>

    // wait for the DOM to be loaded

    $(document).ready(function() {

    // bind ‘myForm’ and provide a simple callback function

    $(‘#book_form’).ajaxForm(function() {

    alert(“Thank you for your comment!”);

    });

    });

    </script>

    #book_form matching the form ID on the php page containing the form (eform3.php). But that didn’t help either..

    #92143

    Hi,

    There quite a few errors on the page including one in the line you mentioned with #book_form

    Uncaught TypeError: Object #<Object> has no method 'ajaxForm' /facebox/:53

    $('#book_form').ajaxForm(function() {

    The error is caused usually when jquery is loaded twice, or loaded in wrong sequence (jquery must come first), or if the js file is not being loaded at all. Looking at the errors, there are 2 jquery’s on the page , and a bunch of .js files are not being loaded. Would you please fix the following things:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.a*n.com/facebox/css/sidetabs.css

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.a*n.com/facebox/js/prettyPhoto/js/jquery.prettyPhoto.js

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.a*n.com/facebox/js/custom.js

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.a*n.com/facebox/js/jquery.js

    Uncaught TypeError: Object #<Object> has no method 'ajaxForm' /facebox/:53

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.a*n.com/facebox/undefined

    GET http://www.a*n.com/Blue%20Boat%20NEW/web-content/images/highlight.png 404 (Not Found) highlight.png:1

    Errors 5 and 6 are caused by the other ones you should be able to fix, and the form should start working at that point. Please let us know how its going.

    Thanks,

    Nick

    #92144

    Hi Nick,

    Thank you. Oops, you’re right, I’m sorry. I tried to simplify and uploaded to a new folder but forgot to upload the js folder. Now amended.

    Unfortunately still no luck. On index.html I now have:

    <!– Facebox jquery –>

    <script src=”facefiles/jquery-1.2.2.pack.js” type=”text/javascript”></script>

    <!– Newscast jquery and javascripts –>

    <script type=’text/javascript’ src=”js/jquery.js”></script>

    <script src=”js/prettyPhoto/js/jquery.prettyPhoto.js” type=”text/javascript” charset=”utf-8″></script>

    <script type=’text/javascript’ src=”js/custom.js”></script>

    <!– Facebox javascript and css –>

    <link href=”facefiles/facebox.css” media=”screen” rel=”stylesheet” type=”text/css” />

    <script src=”facefiles/facebox.js” type=”text/javascript”></script>

    <script type=”text/javascript”>

    jQuery(document).ready(function($) {

    $(‘a[rel*=facebox]‘).facebox()

    })

    </script>

    Is this an acceptable order of scripts to be loaded?

    I also deleted the script to wait for the DOM to be loaded. I was hoping it would prevent the browser window reloading before the form gets sent. But your error:

    Uncaught TypeError: Object #<Object> has no method ‘ajaxForm’ /facebox/:53

    suggests ‘ajaxForm’ is not the right name?

    In custom.js (Newscast), I see:

    (function($)

    {

    $.fn.kriesi_ajax_form = function(options)

    {

    Should ‘ajaxForm’ be replaced by ‘kriesi_ajax_form’?

    Like so:

    <script>

    // wait for the DOM to be loaded

    $(document).ready(function() {

    // bind ‘myForm’ and provide a simple callback function

    $(‘#book_form’).kriesi_ajax_form(function() {

    alert(“Thank you for your comment!”);

    });

    });

    </script>

    Do you think this script is needed at all?

    Thanks,

    Anka

    #92145

    Hi,

    The thing is, you have two jqueries there which is not a good idea.

    First lets update the facebox to the latest version 1.3 from your 1.1 https://github.com/defunkt/facebox (src directory_ which runs of jquery 1.4.2, same as the theme, so that the extra jquery can be thrown out to simplify life. I don’t see why it wouldn’t work after the upgrade. Please check in the examples directory on github , there is one example i believe nearly identical to yours and just copy it lol. Why reinvent the wheel.

    Let us know how it’s going,

    Nick

    #92146

    Hi Nick,

    Sorry, still no luck.

    Current code:

    <!– jquery –>

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>

    <!– Newscast javascripts –>

    <script src=”js/prettyPhoto/js/jquery.prettyPhoto.js” type=”text/javascript” charset=”utf-8″></script>

    <script type=’text/javascript’ src=”js/custom.js”></script>

    <!– Facebox javascript and css –>

    <link href=”facefiles/facebox.css” media=”screen” rel=”stylesheet” type=”text/css” />

    <script src=”facefiles/facebox-1.3.js” type=”text/javascript”></script>

    <script type=”text/javascript”>

    jQuery(document).ready(function($) {

    $(‘a[rel*=facebox]‘).facebox()

    })

    </script>

    Upgrading facebox to version 1.3 changes the way the window pops up – and not in a good way:)

    Throwing out <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script> means no popup at all.

    I don’t see any relevant examples in the github examples directory? (making use of a form inside a popup)

    I still think it’s more of a question of the popup closing before the form gets sent than anything else..?

    Cheers.

    #92147

    Hi,

    Sorry for the delay. Ok I got a few working examples this time guaranteed. Sorry but I would prefer to leave writing any new code to the very last resort. I prefer to adapt code since its tested already and less chance of a nasty surprise down the line.

    Here are three solutions specific to your exact problem. The first link is a functional form that submits and closes using facebox – the button on right side opens the popup etc…

    http://www.freecss.info/tutorial/contact/index.html

    These two below are also specific step by step fixes for people experiencing your identical issue.

    http://stackoverflow.com/questions/3868273/jquery-validate-may-have-broken-facebox-pop-up

    http://old.nabble.com/Validation-and-Facebox-td22187264s27240.html

    Thanks,

    Nick

    #92148

    Hi Nick,

    Ok, I went through your links. So the issue seems that Facebox is using the clone() method to move the DOM elements around in $.facebox.fillFaceboxFromHref?

    I’m trying to modify the Facebox script, and add in the variables dom and dom_data in the main declaration of facebox. Not sure where to change what as the js file I have seems more recent than the one on http://stackoverflow.com/questions/3868273/jquery-validate-may-have-broken-facebox-pop-up

    In my current facebox.js:

    if (settings) $.extend($.facebox.settings, settings)

    $(‘body’).append($.facebox.settings.facebox_html)

    Do you know how to add:

    dom_data: null,

    dom: null,

    ?

    My knowledge of javascript isn’t that advanced I’m afraid.

    In the meantime, I got another modal form (not the Newscast form) to work fine using Fancybox.

    #92149

    Hi,

    **I just noticed that you don’t have an actual destination in your form as to where to submit it to and I don’t see any jquery in your page that will ‘catch’ the form once it’s submitted. So the form does get submitted into the page which has no code in place to process the submission, so the post from the form is ignored.

    Only the contact page has the code which is waiting for the contact form submission.

    Please check that in the template for the page you want to have the facebox form on, has the following code at the very top of the template. However if you found another way of getting the functionality you want, then that’s great too!

    <?php
    $name_of_your_site = get_option('blogname');
    $email_adress_reciever = $k_option['contact']['email'];

    if(isset($_POST['Send']))
    {
    include('send.php');
    }
    ?>

    Only the contact page has the code which is waiting for the contact form submission.

    As to the URLs I pasted in previous message:

    http://www.freecss.info/tutorial/contact/index.html <– the purple contact box on the right side opens up the same box as on your site, verifies the fields and when you click submit, displays a thank you message. This is a free tutorial site so they don’t mind if we borrow the code since that’s why its there.

    Lets look at the code for

    (1) box itself [ http://www.freecss.info/tutorial/contact/facebox/facebox.js ]

    (2) verification of the form fields [ http://www.freecss.info/tutorial/contact/jquery.form.js ] (you should add it to your website)

    (3) inline jquery

    <script type="text/javascript">
    $(document).ready(function(){
    $('#submitform').ajaxForm({
    target: '#error',
    success: function() {
    $('#error').fadeIn('slow');
    }
    });
    $('a[rel*=facebox]').facebox()
    });
    </script>

    Just copy everything from that page, put it on your site, change the names of the form fields to what you want, and you will have a working copy in 10 minutes, instead of spending hours trying to figure out where the problem is with your adaption.

    Thanks,

    Nick

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Creating popup contact form (modal popup)’ is closed to new replies.