Member Avatar for methuselah90

after finding out that i couldn't use form submit (which refreshes the page) alongside bockui i have decided to move onto ajax. i am not too good at ajax but i get the gist of it. but now block ui does not wish to work at all. here is the javascript i am using:

<script>
$(document).ready(function() {

    //if submit button is clicked
    $('#submit').click(function () {        

        //Get the data from all the fields
        var status = $('input[name=status]');
        var pRent = $('input[name=pRent]');
        var rentPaid = $('input[name=rentPaid]');
        var pDate = $('input[name=pDate]');

        //Simple validation to make sure user entered something
        //If error found, add hightlight class to the text field
        if (status.val()=='') {
            status.addClass('hightlight');
            return false;
        } else status.removeClass('hightlight');

        if (pRent.val()=='') {
            pRent.addClass('hightlight');
            return false;
        } else pRent.removeClass('hightlight');

        if (rentPaid.val()=='') {
            rentPaid.addClass('hightlight');
            return false;
        } else rentPaid.removeClass('hightlight');

                if (pDate.val()=='') {
            pDate.addClass('hightlight');
            return false;
        } else pDate.removeClass('hightlight');

        //organize the data properly
        var data = 'status=' + status.val() + '&pRent=' + pRent.val() + '&rentPaid='
        + rentPaid.val() + '&pDate=' + pDate.val();

        //disabled all the text fields
        $('.text').attr('disabled','true');

        //show the loading sign
        $('.loading').show();

        //start the ajax
        $.ajax({
            //this is the php file that processes the data and send mail
            url: "resources/process.php",   

            //GET method is used
            type: "GET",

            //pass the data         
            data: data,     

            //Do not cache the page
            cache: false,

            //success
            success: function (html) {              
                //if process.php returned 1/true (send mail success)
                if (html==1) {                  

                    //blockui

            $.blockUI({ message: $('#question'), css: { width: '1024px' } });  
        $('#yes').click(function() { 
            // update the block message 
            $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 

            $.ajax({ 
                url: 'wait.php', 
                cache: false, 
                complete: function() { 
                    // unblock when remote call returns 
                    $.unblockUI(); 
                } 
            }); 
        }); 

        $('#no').click(function() { 
            $.unblockUI(); 
            return false; 
        }); 

                //if process.php returned 0/false (send mail failed)
                } else alert('Sorry, unexpected error. Please try again later.');               
            }       
        });

        //cancel the submit button default behaviours
        return false;
    }); 
});

process.php

<?php
//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$status = ($_GET['status']) ? $_GET['status'] : $_POST['status'];
$pRent = ($_GET['pRent']) ?$_GET['pRent'] : $_POST['pRent'];
$rentPaid = ($_GET['rentPaid']) ?$_GET['rentPaid'] : $_POST['rentPaid'];
$pDate = ($_GET['pDate']) ?$_GET['pDate'] : $_POST['pDate'];
?>

any thanks would be appreciated. God bless you in advance!

  • 2 Contributors
  • 2 Replies
  • 389 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

A quick inspection of the snippets points to a server-response problem rather than the blockUI call itself. The PHP shown only reads incoming fields and does not emit a success value, so the AJAX success branch that contains the $.blockUI call will never be taken. As observed, strict string/number equality is unlikely to be the root cause here — loose equality will coerce — but an empty response, extra HTML, or stray whitespace will still prevent the expected branch from running.

Common quick checks: use the browser DevTools Network tab to view the exact response body for resources/process.php; look in the Console for JS errors (e.g. “$.blockUI is not a function” means the plugin is missing or loaded in the wrong order); verify the blockUI plugin is loaded after jQuery (typeof $.blockUI should be "function"); and log the AJAX response to the console to see what the page actually returned.

A cleaner, more reliable pattern is to send structured data and expect JSON. Example AJAX pattern (build data as an object, use POST, and enable dataType: 'json'):

$.ajax({
  url: 'resources/process.php',
  method: 'POST',
  dataType: 'json',
  data: {
    status: $('input[name="status"]:checked').val() || '',
    pRent: $('input[name="pRent"]').val(),
    rentPaid: $('input[name="rentPaid"]').val(),
    pDate: $('input[name="pDate"]').val()
  },
  beforeSend: function() {
    $('.text').prop('disabled', true);
    $('.loading').show();
  },
  success: function(resp) {
    if (resp && resp.success) {
      $.blockUI({ message: $('#question').clone(true).show(), css: { width: '600px' } });
    } else {
      console.log('server returned error', resp);
      alert(resp && resp.error ? resp.error : 'Unexpected response');
    }
  },
  error: function(xhr, status, err) {
    console.log('ajax error', status, err, xhr.responseText);
  },
  complete: function() {
    $('.text').prop('disabled', false);
    $('.loading').hide();
  }
});

On the PHP side return clean JSON and avoid trailing output/whitespace (omitting the closing ?> is a simple way to prevent accidental whitespace):

<?php
header('Content-Type: application/json; charset=utf-8');
// validate/process, send mail...
echo json_encode(['success' => true]);

Additional notes: prefer .prop('disabled', true) instead of .attr, use input[name="status"]:checked for radio groups, avoid hard-coded widths that can hide content, and bind handlers to dynamic elements with delegated events (for example, $(document).on('click', '#yes', ...)) or attach them after $.blockUI. These changes make the flow more robust and simplify debugging.

Recommended Answers

All 2 Replies

Member Avatar for Airshow

Jeansymolanza,

I guess resources/process.php returns '1' or '0', which are strings not numbers, so html==1 will always return false.

Try html=='1' .

Airshow

Edited by Airshow because: n/a
Member Avatar for Airshow

Correction -

Sorry html==1 returns true even when html=='1' .

The problem must be elsewhere in the code.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.