Solved

Could you point a jQuery code to make a form control enabled after it had been disabled?

Posted on 2016-10-03
16
74 Views
Last Modified: 2016-10-10
Hi Experts

Could you point a jQuery code to make a form control enabled after it had been disabled?

I'm running a form with 02 modals: one for data edition and another just to visualize data.

The control names are the same in the 02 modals - is it a problem?

If I first run the edition modal I can edit certain controls, but if I first use the other for visualization and then for edition the data are no longer editable.

I tryed to use this jQuery code with no success:
                $( ".custo" ).prop( "disabled", false );
                //
                 $(".custo").show();

Open in new window


Could you suggest something?

Thanks in advance
0
Comment
Question by:Eduardo Fuerte
  • 8
  • 8
16 Comments
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41827119
Hi Eduardo. The code you are using is correct. You can try this: give to your modals 2 ids the first one id="edit" and the second id="view" then, when you disable elements do this
 $( "#view .custo" ).prop( "disabled", true );

Open in new window

This way you'll disable only elements within the view modal nd you will go :)
0
 

Author Comment

by:Eduardo Fuerte
ID: 41827960
Hi Marco!

I'm still using this aproach you pointed  id="edit" and the second id="view" .

If I 1st open the "edit" modal I can edit the values.

If I 1st open the "view " modal and then the "edit" modal the textboxes are no longer editable - I have to manually reload the form to make possible to edit again.

To complicate a little more the "view" mode must habilitate 02 combos.


The jQuery I use

  $("#divReembolso").hide();  // Edit modal
        $("#divReembolso_v").hide(); // View Modal
        
		//Refering to edit modal
        $("#houve_custo").change(function() {
            var serv = $( "#houve_custo option:selected" ).text();

            if (serv != 'Sim')
            {
                $(".custo").hide();
                $("#divReembolso").hide();
            }
            else
            {
                 $(".custo").show();              
                 $("#divReembolso").show();
            }
        });

        $("#houve_reembolso").change(function() {
            var serv = $( "#houve_reembolso option:selected" ).text();''
            if (serv != 'Sim')
                $(".reembolso").hide();
            else
                $(".reembolso").show();
                
        });
		// End refering edit modal
		
		//Refering view modal
         $("#houve_custo_v").change(function() {
            var serv_v = $( "#houve_custo_v option:selected" ).text();

            if (serv_v != 'Sim')
            {
                $(".custo_v").hide();
                $("#divReembolso_v").hide();
                
            }
            else
            {
                 $(".custo_v").show();
                $("#divReembolso_v").show();
               
            }
        });

        $("#houve_reembolso_v").change(function() {
            var serv = $( "#houve_reembolso_v option:selected" ).text();

            if (serv != 'Sim')
                $(".reembolso_v").hide();
            else
                $(".reembolso_v").show();
        });
		// End refering edit modal

Open in new window


The edition mode - "edit" modal:  
img001
The view mode - "view" modal: (with "_v" sufix in jQuery)
img002
Could you check?
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41828146
I think there is a misunderstanding here.
Ok you use 2 ids: #divReembolso for the Edit modal and #divReembolso_v for the View Modal.
But I don't see the code you use to enable/disble form elements. lso I would like to see the markup of the 2 divs.

What I ment is: if you use the modal div in your jQuery selector the action will affect only the correct element.
Let say you have something like this:
<div class="modal fade" id="divReembolso">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <input type="text" class="custo" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

You could use something like
$('#divReembolso .custo').prop("disabled", true);

Open in new window

and
$('#divReembolso .custo').prop("disabled", false);

Open in new window

This way only elements with 'custo' class within the modal with id='divReembolso ' will be affected.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41832371
Hi

Turning back to this question:

Using  the 02 modals with 02 id(s)

1st Modal
 <div id="edit" class="modal fade" tabindex="-1" role="dialog" id="divEdit">

...
2nd Modal
<div id="view" class="modal fade" tabindex="-1" role="dialog" id="divView">
...

Open in new window


Since if the view modal is first called then when edit modal is called its controls are disabled.

My dificulty is in how  jQuery must to be coded in a manner that if  id=id="divEdit"  it always enable all the modal controls.  

I guess by using the code you point:
$('#divReembolso .custo').prop("disabled", false);

Open in new window

0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41832391
Yes, but I see in your last comment that you set 2 ids for each modal: for the view modal you have both id="view" and id="divView", for the edit modal you have both id="edit" and id="divEdit".
Use only one div, otherwise jQuery will fail or will have some unexpected and unpredictable beahior.

Anyway, yes use the div of the edit modal you want modify in your selector: following code should work depending on the div you are using for the edit modal:
$('#divReembolso .custo').prop("disabled", false);

Open in new window

$('#divEdit .custo').prop("disabled", false);

Open in new window

$('#edit .custo').prop("disabled", false);

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41832427
I correct to have just one id for each modal  (edit/ view)

But when div="edit" is clicked all its controls must to be enabled

I tryed this - doesn't work

        $("#edit").click(function(){
            $('#edit').prop("disabled", false);
       });

Open in new window

0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41832444
And the element class?
       $("#edit").click(function(){
            $('#edit .custo').prop("disabled", false);
       });

Open in new window

The modal has not a property "disabled". Maybe you can ise this:
       $("#edit").click(function(){
            $('#edit input').prop("disabled", false);
       });

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41832489
    $("#edit").click(function(){
            $('#edit input').prop("disabled", false);
       });

Open in new window

doesn't work for all the elements.

I guess it's necessary to enable the elements one by one...
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41832706
Hi Eduardo, I'm not able to find where you posted the whole code of the modal... Anyway, why you use
$("#edit").click

Open in new window

This would mean that inputs should be enabled clicking on the modal. You should put the enabling code in the click event of the button which shows the modal (or within the code which shows the modal)
0
 

Author Comment

by:Eduardo Fuerte
ID: 41833521
Marco

I used this event, obtained elsewhere, called when the modal is shown

    $('#edit').on('show.bs.modal', function () {   
            $('#edit .custo').prop("disabled", false);
            $('#edit .reembolso').prop("disabled", false);        
            $('#edit .custo').show();
            $('#edit .reembolso').show();
        });

Open in new window

0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41833855
And does it work now?
0
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 41833928
Do you remember the issue to get the correct serv value to download a file?
I used those two really simple modal to do a test and the single line
$('#edit input').prop("disabled", false);

Open in new window

works fine for both text input I placed in the modals: http://test.webintenerife.com/2modals_selectors.php (you can take a look at the source through developer tools)

So you have something different which prevent the correct code to work, but what is it?

I used the whole modal markups you gave me in the other question (see working code http://test.webintenerife.com/2modals_disabling.php) and I found that you are using some jquery code within the page. In my example  that code starts in line 264:
<script type="text/javascript">
	//Carrega o Dropdown de motivo_reclamação de acordo com a origem selecionada
	$(function () {
		$("#fk_origem_problema").change(function () {
			var serv = $('#fk_origem_problema').val();
			$(".validar.field.select.fk_motivo_reclamacao").empty();
			$.ajax({
      			        url: base_url('reclamacao/get_motivo/' + serv),
				type: 'post',
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				data: serv,
			success: function (data) {
				$(".validar.field.select.fk_motivo_reclamacao").append(data);
			},
			error: function (jqXHR) {
				bootbox.alert(jqXHR.responseText);
                        }
		});
	});
});
</script>

Open in new window

Now, if you put the link to jquery at the bottom of the page, this code produces an error ($ is undefined: you can see it in the console) which prevents all javascript to work, so in my example I put jquery in the head section and the single line to disable/enable controls works perfectly: you have just to adda line to enable/disable select...
0
 

Author Comment

by:Eduardo Fuerte
ID: 41836792
Hi Marco


Thank you for so elaborated reply.

I applied just this part:

  $('#edit').on('show.bs.modal', function () {
    		$('#edit input').prop("disabled", false);
   });

Open in new window


And it's sufficient, running ok.
Since the view modal doesn't has a save button, and because this code:

  //  	$('#view').on('show.bs.modal', function () {
//    		$('#view input').prop("disabled", true);
//    	});

Open in new window


makes the control values dificultly readeble, I didn't use it.

Just one thing isn't clear yeat:

The jQuery code block:

<script type="text/javascript">
	//Carrega o Dropdown de motivo_reclamação de acordo com a origem selecionada
	$(function () {
		$("#fk_origem_problema").change(function () {
			var serv = $('#fk_origem_problema').val();
			$(".validar.field.select.fk_motivo_reclamacao").empty();
			$.ajax({
      			        url: base_url('reclamacao/get_motivo/' + serv),
				type: 'post',
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				data: serv,
			success: function (data) {
				$(".validar.field.select.fk_motivo_reclamacao").append(data);
			},
			error: function (jqXHR) {
				bootbox.alert(jqXHR.responseText);
                        }
		});
	});
});
</script>

Open in new window


You mentioned was transfered at the bottom of the page, looks in your code at the same place it was before, did I misunderstanding something?
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41836807
No. I have just used an outdated version of your script, without worrying about anything but the current issue :)
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41836858
Cleared.

Thank you for so elaborated reply!
0
 

Author Comment

by:Eduardo Fuerte
ID: 41836860
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now