未捕获的TypeError：无法设置未定义的属性“display”

Question

I am in the process of migrating an existing platform to a new server. I am taking the opportunity to upgrade PHP ect and standardise/debug the code as the previous maintainers have had different standards.

I have opted for PHP version 5.4.33 for now, once I have managed to move everything over to mysqli I will look to go to a more recent version. I didnt think anything server side would make a difference to AJAX/JS? As far as I am aware is it not client side?

Since I have moved the code over I am having issues with AJAX/JS. I am not the greatest at AJAX/JS and could use some assistance please. Even though every submit works differently through the entire platform I do not want to remove the AJAX/JS that already exists. I will most likely use it as an opportunity to how to use it as it makes end user experience smoother.

Using Chrome to debug I am receiving the following error on clicking the Save button:

Uncaught TypeError: Cannot set property 'display' of undefined
email_user
onclick

This is the Save button code

<span id="loading" style="color: red; font-size: x-small; display: none; text-decoration: blink;">Loading... Please wait..</span><input type="button" value="Save" class="save" onclick="if(validate()){ email_user(); }" />

This is the function code for validate()

function validate() {

    var errorString = "";

    if(isBlank(document.getElementById("forename").value)) {
        errorString += " - Please input a forename
";
    }
    if(isBlank(document.getElementById("surname").value)) {
        errorString += " - Please input a surname
";
    }
    if(isBlank(document.getElementById("company_name").value)) {
        errorString += " - Please select a company
";
    }

    if(document.getElementById("username").value != "" || document.getElementById("password").value != "") {
        if(isBlank(document.getElementById("username").value)) {
            errorString += " - Please input a username
";
        }
        if(isBlank(document.getElementById("password").value)) {
            errorString += " - Please select a password
";
        }
    }

    //if not a solicitor then cases mandatory
    if(document.getElementById("company_role_type_id").value == 2) { 
        if(document.getElementById("other_view_if").value == "") {
            errorString += " - Please select who can view your cases
";
        }
    }
    if(document.getElementById("company_role_type_id").value == 3) { 
        if(document.getElementById("other_view_ea").value == "") {
            errorString += " - Please select who can view your cases
";
        }
    }

    if(errorString) {
        alert('Please correct the following items:-

'+ errorString);
        return false;
    }
    else {

        return true;
    }
}

This is the function code for email_user()

function email_user(){

if(skip_email == true){ $('user').submit(); }

var url  = 'email_user.php';
var params = '?' + $('user').serialize() + '&from_edit=1';

$('loading').style.display = 'inline';

var myAjax = new Ajax.Request(
                    url,
                    {
                            method: 'get',
                            parameters: params,
                            onComplete: show_response
                    });

function show_response(this_request){

//alert(this_request.responseText);

    var reply = this_request.responseText.evalJSON(true);

    if(reply['status'] == false){ var blah = ''; }

    else{ alert(reply['message']); }

//$('loading').style.display = 'none';

    $('user').submit();

    }

}

Thinking about it, maybe it is more to do with the Apache version?? Just in case Apache version is 2.2.15.

Any assistance you guys can give me will be greatly appreciated! If you need any more information please let me know.

Kind Regards,

n00bstacker

Answer 1

As previously stated in comments, your code has some issues, your line (the one that is triggering the error, can be optimized in the following way:

$('#loading').css("display","inline"); //Selector is ok now... 

In the other hand, I also noticed that you have a second selector $('user') that won´t work. Remember that anything without a dot, or a sharp will be considered as an element selector (loading, and user elements, won´t exist in your document unless you created it.

Remember:

$("#myId") //id selector
$(".myClass") //class selector

If "user" is the form name, the code may work. Remember that you want to catch the form submit event.

Regards,

Guillermo