we have a button "save design" in page also we have option to upload image or text in the page. until user upload image or Add text, we dont want to display button "save design"

we are using below code for "save design"

_getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button id="submit-editorApply-{{rand}}" >SAVE DESIGN</button>' +
                '<button >Reset</button>' +
                '</div>';
        }
        return '';
    },


    initObservers: function()
    {
        if (this.config.editorEnabled) {
            $('submit-editorApply-' + this.config.rand).observe('click', this.submitApply.bindAsEventListener(this));
            $('submit-editorReset-' + this.config.rand).observe('click', this.submitReset.bindAsEventListener(this));
        }
    },

    submitApply: function(event)
    {
        Event.stop(event);
        this.option.apply();
    },

I tried below code to hide the "save design" until we upload image or text. i followed this link i added style="display: none; and than used show() jQuery method.

<script>
    $('submit-editorApply-').show();
    _getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button id="submit-editorApply-{{rand}}" style="display:none;" >SAVE DESIGN</button>' +
                '<button >Reset</button>' +
                '</div>';
        }
        return '';
    },

</script>

we have a button "save design" in page also we have option to upload image or text in the page. until user upload image or Add text, we dont want to display button "save design"

we are using below code for "save design"

_getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button id="submit-editorApply-{{rand}}" >SAVE DESIGN</button>' +
                '<button >Reset</button>' +
                '</div>';
        }
        return '';
    },


    initObservers: function()
    {
        if (this.config.editorEnabled) {
            $('submit-editorApply-' + this.config.rand).observe('click', this.submitApply.bindAsEventListener(this));
            $('submit-editorReset-' + this.config.rand).observe('click', this.submitReset.bindAsEventListener(this));
        }
    },

    submitApply: function(event)
    {
        Event.stop(event);
        this.option.apply();
    },

I tried below code to hide the "save design" until we upload image or text. i followed this link i added style="display: none; and than used show() jQuery method.

<script>
    $('submit-editorApply-').show();
    _getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button id="submit-editorApply-{{rand}}" style="display:none;" >SAVE DESIGN</button>' +
                '<button >Reset</button>' +
                '</div>';
        }
        return '';
    },

</script>

• javascript
• jquery
• css

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Mar 27, 2017 at 14:56 user6619012user6619012 7

• the save design button is not visible – Sagar V Commented Apr 3, 2017 at 7:21
• @SagarV i am working on that, give me a min, i will revert my changes..... – user6619012 Commented Apr 3, 2017 at 7:22
• Ok. ping me once you pleted. – Sagar V Commented Apr 3, 2017 at 7:22
• are you working on it again? – Sagar V Commented Apr 3, 2017 at 7:40
• 1 @SagarV sorry, give me some more time..... – user6619012 Commented Apr 3, 2017 at 7:41

 |  Show 2 more ments

7 Answers 7

Sorted by: Reset to default 3

Attach an event listener to those two input fields, which then checks if the field is filled. Only then you use $('#submit-editorApply-').show();.

Example:

$('#upload_field').on('change', function(){
    if($(this).val() !== ""){
        $('#submit-editorApply-').show();
    }
});

Hi well this might not be correct solution, but an example that works much similar to your codes, as in your codes you need an confirmation reply of successful upload of text or image to your server,

Here I have created two buttons one .save_design that needs to be hidden another .add_text or .add_image, now when your click .add_text a pop-up e-up for uploading of text or image which is just a div #box1 over-here, this is what you need to check, I have included textarea into it to check if any value has been added to it on blur of textarea and using condition I could check yes that includes some value, so similarly you need to check that for your upload that it isn't null, if not then .save-design fades-in.

$(document).ready(function(){
  $(".upload_text").on("click",function(){
  $("#box1").show();
});
$("#box1 > textarea").blur(function(){
	if($(this).val()){
 		$(".save_design").show();
  }
  else{
  		$(".save_design").hide();
     }  
	});
});

#box1{
  width:400px;
  height:200px;
  background:#ccc;
  position:absolute;
  display:none;
}
#box1 > textarea{
  border:0px; 
  background:transparent;
  width:99%;
  height:98%;
  resize:none;
}
.upload_text{
  width:150px;
  height:40px;
  background:orange;
  color:white;
  float:left;
  font-size:18px;
  text-align:center;
  padding-top:20px;
  margin-top:220px;
}
.save_design{
  width:150px;
  height:40px;
  background:orange;
  color:white;
  float:left;
  margin-left:10px;
  font-size:18px;
  text-align:center;
  padding-top:20px;
  margin-top:220px;
  display:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1"><textarea></textarea></div>
<div class="upload_text">Add text</div>
<div class="save_design">Save Design</div>

add this code in css

#aitcg-control-panel{
    display:none;
}

Use the .ajaxComplete function of jQuery to detect the ajax and if it is to the following url's show it.

Check the following code

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "aitcg/ajax/addText/" || settings.url === "aitcg/ajax/addImage/" ) {
    jQuery("#aitcg-control-panel").show();
  }
});

use jQuery instead of $ to select elements.

The above codes works fine when tested on browser.

If you are having any problem with the css,

Add the following instead of css.

jQuery(document).ready(function(){
    jQuery("#aitcg-control-panel").hide();
});

Provide a display: none; to your #aitcg-control-panel so that it is hidden on initial load.

#aitcg-control-panel {
  display: none;
}

Then you have to check if the file upload is successful without any error, and then show the Save design button.

jQuery('input[type="file"]').change(function() {
   if(jQuery(this).val()) {
      jQuery("#aitcg-control-panel").show();
   }
});

EDIT

To hide the SAVE DESIGN button, add the following code:

jQuery("svg text tspan").on("click", function() {
  if(jQuery(this).html() === "x") {
     jQuery("#aitcg-control-panel").hide();
  }
});

If you are using ajax to upload and apply image/text on svg simplly call jQuery("#aitcg-control-panel").show(); on that ajax's success(its may be the most easy way if u are using ajax).

It seems that you're using prototype JS and a normal $(selector) will not work like in jQuery.

You better use the vanilla JS queryselector

Example

var btn = document.querySelector('button[id^="submit-editorApply-"]')

//hide button
btn.style.display = "none";

//show button
btn.style.display = "block";

Note: CSS selector is like that because of the random numbers appeared at the end of the button ID which will not going to work from a prototype $() method as it only accepts the exact element ID

Try using delegate instead change, like this:

$('#upload_field').on('delegate', function(){

if($(this).val() !== ""){

    $('#submit-editorApply-').show();
}

});

credits to Danmoreng :)