March 4, 2012

jQuery code conflicts

Question by user1220022

Apologies for the generic title.

I have two jQuery files, one handles form submissions and one handles page hyperlinks.

The form submission checks that the form entries are not blank, if it is – it informs the user and will display an error message, when the form is filled in the form data is passed to a processing file.

The hyperlinks loads new page data into a div, this new page data often includes forms as handled by the processing file.

I don’t know why – but ~60% of the time the form submission will ‘refresh’ on click and load the main index page OR the page last visited. This seems entirely random.

I can’t see why this is happening and if anyone can show me I would greatly appreciate it.

Form submission code:

$(document).ready(function(){

    $('.ajax_form').submit(function() {

        // check for empty inputs
        var errors = 0;
        $(".ajax_form :input").map(function(){
            if(!$(this).val()) {
                errors++;
            }  
        });

        // if empty inputs inform user
        if(errors > 0){
            $('#results').text("All fields are required");
            return false;
        }

        // hide form and show loader
        $(".ajax_form").slideUp("normal");
        $('#results').html('<span id="load">Loading..</span>');

        // post data to processing file
        $.post(
            'processing.php',
            $(this).serialize(),
            function(data){
                $("#results").slideDown("normal");
                $("#results").html(data)
            }
        );

        return false;

    });

});

Navigation code:

$(document).ready(function(){

    // if hash is already set, load linked data
    var hash = window.location.hash.substr(1);
    $('#nav li a').each(function(){
        if(hash == $(this).attr('href')){
            var toLoad = hash + '.php';
            $('#content').load(toLoad)
        }
    });

    // each menu item on click load linked data
    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href') + '.php';
        window.location.hash = $(this).attr('href');

        $('#content').prepend('<span id="load">Loading..</span>');
        $('#content').hide();
        $('#content').load(toLoad);
        $('#content').slideDown('normal');

        return false;

    });

});

Answer by Starx

Your form refreshes because before reaching the part of return false;, the scripts breaks
somewhere before.

Use firebug or similar to detect this. Be sure to handle all outcomes or every condition.

May be a quick dry run can detect the gaps.

...

Please fill the form - I will response as fast as I can!