Search code examples
javascriptjqueryprototypejs

Set Value with prototype fails inside prototype.js


I have a prototype.js class like this:

UserEditor = Class.create({

dataEditorDisplayed: function(editor) {
    this.UserPhotoUploadEditor.clearFields();
    $(idatabase.FIELD_SITE_ID).instance.disable();
    $(idatabase.FIELD_CHANGE_PASSWORD).instance.enable();
    this.photoName = this.photoUrl.getValue();
    if (this.photoName == null || this.photoName == "") {
        this.photoName = this.DEFAULT_PHOTO;
        this.newPhoto = "1";
    } else {
        jQuery("#fileDiv").removeClass("fileupload-new").addClass("fileupload-exists");
        jQuery('#fileDiv').prepend('<input type="hidden" value="" name="">');
        jQuery('#fileThumb').prepend('<img id="uploaded_img" src="theImg.png"/>');
        jQuery("#uploaded_img").attr("src",this.UPLOADS + this.photoName);
        this.newPhoto = "0";
    }
},

beforeEditorButtonClick: function(browser, toolType) {
    switch (toolType) {
        case browser.BUTTON_SAVE:
            if (this.newPhoto == "1") {
                this.UserPhotoUploadEditor.uploadFile();
                return false;
            }
    }
    return true;
},
});

jQuery('#change_clicked').on('click',function(){
UserEditor.newPhoto.val("1");
});

What I'm trying to do is , If user press the button with change_clicked id, I want to set this.newPhoto = "1" before switch statement. But everytime I try it's always 0. What's wrong, any ideas?

EDIT: HTML PART

<form id="file_upload_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="ajax/user_photo_upload.ajax.php">
    <h3 class="form-section map_header"><img src="_themes/1/img/map_photo_upload.png"> <?=$core->l("photo_upload");?></h3>
    <div class="row-fluid">
        <div class="span12">
            <div class="control-group">
                <label class="control-label">
                    <i class="icon-eye-open"></i>
                    <?=$core->l("upload_select_image")?>
                    <span class="formRequiredElement">*</span>
                </label>
                <div class="controls">
                    <div class="fileupload fileupload-new" data-provides="fileupload" data-name="myimage" id="fileDiv" >
                        <input type="hidden" value="1" name="myimage">
                        <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                            <img src="_themes/images/no_image.gif" id ="photo"/>
                        </div>
                        <div class="fileupload-preview fileupload-exists thumbnail" id ="fileThumb" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                        <div class="photoUploadAlign">
                            <span class="btn btn-file btn green"><span class="fileupload-new"><?=$core->l("select_image")?></span>
                            <span class="fileupload-exists" id="change_clicked"><?=$core->l("change_image")?></span>
                            <input type="file" class="default" name="file" id="file"></span>
                            <a href="#" class="btn fileupload-exists btn red" data-dismiss="fileupload" id="remove_clicked"><?=$core->l("remove_image")?></a>
                        </div>
                    </div>
                    <span class="label label-important"><?=$core->l("warning")?></span>
                    <span><?=$core->l("warning_note")?></span>
                    <iframe id="upload_target" name="upload_target" src="" style="display:none;width:0;height:0;border:0px solid #fff;"></iframe>   
                    <input type="reset" id="clearFields" style="display:none"/>
                </div>
            </div> 
        </div>
    </div>
</form>

Solution

  • Well, I've found the solution, and i'm writing here in case anyone else facing this problem sees,

    Changing

    beforeEditorButtonClick: function(browser, toolType) {
        switch (toolType) {
            case browser.BUTTON_SAVE:
                if (UserEditor.newPhoto == "1") {
                    this.UserPhotoUploadEditor.uploadFile();
                    return false;
                }
        }
        return true;
    },
    

    and after Prototype class :

    UserEditor.newPhoto = "0";
    jQuery('#change_clicked').on('click',function(){
    UserEditor.newPhoto = "1";
    });
    jQuery('#remove_clicked').on('click',function(){
    UserEditor.newPhoto = "1";
    });
    jQuery('#select_clicked').on('click',function(){
    UserEditor.newPhoto = "1";
    });
    

    Solves the problems.