Solved

Could you point how to enable a right bar form control after it had been disabled?

Posted on 2016-10-10
27
72 Views
Last Modified: 2016-10-20
Hi Experts

Could you point how to enable a right bar form control after it had been disabled?

Under certain conditions a right bar control is disabled:

img001

Accordingly to:
<!-- Begin: Right bar  -->
<aside class="tray tray-right tray290" data-tray-height="match">
    <div class="row">
        <div class="col-xs-12 pln">
            <button 
                class="btn btn-primary btn-gradient btn-alt btn-block item-active save_button" 
                id="create" 
                style="width:100%" 
                type="submit">Novo</button>
        </div>
    </div>
    <hr class="short">

<form id="pesquisar_groups_form">
            <div class="admin-form">
                <h4>Pesquisar</h4>
                <div class="row">
                    <div class="col-xs-12 mb15">
                        <div class="input-group">
                            <span class="input-group-addon ">
                                <i class="fa fa-search c-gray"></i>
                            </span>
                            <input type="text" name="sise" id="sise" class="form-control gui-input br-light light" placeholder="SISE">
                        </div>
                    </div>
                </div>
                
                <div class="row">
                <div class="col-xs-12 mb15">
                    <div class="input-group">
                        <span class="input-group-addon ">
                            <i class="fa fa-search c-gray"></i>
                        </span>
                        <span class="select">
                            <select id="fk_seguradora" name="fk_seguradora">
                                <option value="" selected="selected">...Seguradora...</option>
                                <option value="1">XXXXX</option>
                                <option value="2">YYYYY</option>
                                <option value="3">ZZZZZ</option>
                            </select>
                        </span>
                    </div>
                </div>
               </div>
                ....
            </div>
        </form>
    </aside>
    <!-- End: Right bar-->

</section>

Open in new window


What I tryed in jQuery :

        $('#pesquisar_groups_form input').prop("disabled", false);

Open in new window

Could you suggest something?
Thanks in advance
0
Comment
Question by:Eduardo Fuerte
  • 14
  • 7
  • 4
  • +2
27 Comments
 
LVL 22

Expert Comment

by:Ferruccio Accalai
ID: 41836976
Try using
 $('#pesquisar_groups_form input').removeAttr('disabled');
0
 

Author Comment

by:Eduardo Fuerte
ID: 41837007
Hi

It doesn't work.

I tryed to enable the div that has the control (accordingly with the code above)
 $("#admin-form: input").attr("disabled", false);

Open in new window


Not success too.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41837037
? ? the -
     <select id="fk_seguradora" name="fk_seguradora">

is a SELECT, which may not correspond to the "input" filter you use

if you are just targeting that SELECT you may can use it's ID -
      $("#fk_seguradora").removeProp("disabled");
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41837124
Just this:
$('#pesquisar_groups_form input, #pesquisar_groups_form select').prop("disabled", false);

Open in new window


See it in the usual page: http://test.webintenerife.com/2modals_selectors.php
0
 

Author Comment

by:Eduardo Fuerte
ID: 41837328
Hi Slick812

If I use the modal edit the combo is no longer enabled until relaod the page.


Marco

I applied your code and didn't work.  I don't see the filter feature in the page you pointed.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41837497
in your Question you give the event "condition" for -
      "after it had been disabled?"

and in your last comment you say =
     "If I use the modal edit the combo is no longer enabled"

and when the SELECT control is written to the page as -
      <select id="fk_seguradora" name="fk_seguradora">

it is NOT disabled as would be in this control creation -
      <select id="fk_seguradora" name="fk_seguradora disabled">

so this SELECT starts out as being Enabled?

So there is an event at some point on the operations of the page that  you have just told us about as "after it had been disabled?"

So how can we help you in getting this SELECT back to being enabled, , , , , if you do not tell us how it gets to be "disabled" ? ?

So You need to "prevent" the page operation "progression of events" that you say disables this SELECT control.. . . But you do NOT show anything like a "click event" or user page scroll th
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41838179
Under certain conditions a right bar control is disabled:
Under which conditions - the code you posted does not have the attribute "disabled" specified for the <input> control so where is that coming from? Are you sure it is disabled in the HTML disabled context?

Can you post the rendered HTML of the page?
1
 

Author Comment

by:Eduardo Fuerte
ID: 41839043
Hi

Making it comprehensive as needed:

When the page opens the left lateral controls, used as filters are all enabled:
img001
After the "gear" control is opened -  a menu apper, chosing "Visualizar" an view modal is oppened.
img002
Then when the modal is closed, 02 controls are disabled.
img003
The code:
codigo_tela.txt
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41839079
Can we rather see the rendered html - without the rest of your backend code and data - we can't see what is going on.

Can you right click on the disabled controls and view in the console - then right click on the container for the control (the closest parent) and copy the HTML and paste it here.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41839103
I inspect the disabled element:

img_EE_111016_005-1-.png
0
 

Author Comment

by:Eduardo Fuerte
ID: 41839108
Correspondent HTML code:

	<!-- Begin: Barra a direita -->
    <aside class="tray tray-right tray290" data-tray-height="match">
        <div class="row">
            <div class="col-xs-12 pln">
                <button 
                    class="btn btn-primary btn-gradient btn-alt btn-block item-active save_button" 
                    id="create" 
                    style="width:100%" 
                    type="submit">Novo</button>
            </div>
        </div>
        <hr class="short">
        <form id="pesquisar_groups_form">
            <div class="admin-form">
                <h4>Pesquisar</h4>
                <div class="row">
                    <div class="col-xs-12 mb15">
                        <div class="input-group">
                            <span class="input-group-addon ">
                                <i class="fa fa-search c-gray"></i>
                            </span>
                            <input type="text" name="sise" id="sise" class="form-control gui-input br-light light" placeholder="SISE">
                        </div>
                    </div>
                </div>
                
                <!--EF Set/2016 --- Novos campos de filtro -->
                <div class="row">
                <div class="col-xs-12 mb15">
                    <div class="input-group">
                        <span class="input-group-addon ">
                            <i class="fa fa-search c-gray"></i>
                        </span>
                        <span class="select">
                            <select id="fk_seguradora" name="fk_seguradora">
                            
                                <!-- EF 2016/Out - 03
                                <option value="" selected="selected">...Seguradora...</option>
                                -->
                                <option value="" selected="selected">...Cliente Corporativo...</option>
                                <option value="1">Ace</option>
                                <option value="2">Zurich</option>
                                <option value="3">Banco Safra</option>
                            </select>
                        </span>
                    </div>
                </div>
               </div>

....

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41839541
@Eduardo,

We need more than that - there is obviously JavaScript at play here - which is probably what is behind the disabled. The HTML you have posted does not contain anything that shows an element is disabled - we need to see the full picture.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41839590
@Eduardo - I missed your post of your screen shot.

Based on that I have the following comments.
From your original post
 $('#pesquisar_groups_form input').prop("disabled", false)

Open in new window

The control you are highlighting in the image is a <select> not an <input> so the code above will not target it you would either need
 $('#pesquisar_groups_form select').prop("disabled", false)

Open in new window

Or better
 $('#fk_seguradora').prop("disabled", false)

Open in new window


Having said that - your screen shot shows that the <select> has no options - whereas the code you posted has options - so (from what I can see) something is removing those options from the <select> - and possibly doing the disable at the same time. This means that adding the code above to page load might not have the desired effect as the process that is removing the options (and potentially disabling the control) runs afterwards.

Try the suggestion above and if that does not work then we will need to see more of the code - specifically the javascript on the page.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 33

Expert Comment

by:Slick812
ID: 41840477
OK, , I have TRIED to look over the code you have in the -
    codigo_tela.txt
and I have also looked at the image of the -
   "I inspect the disabled element:"

and your problem seems to be caused by the DATATABLE, , it looks like it has a "clickable" GEAR symbol in it that you say -
     After the "gear" control is opened -  a menu apper, chosing "Visualizar" an view modal is oppened.

and then the JAVASCRIPT that is used when the view modal "Visualizar" is clicked to close that MENU. . .  I can not find in the codigo_tela.txt  code anything about the "MENU" that pops up . . . AND I can not find the DATATABLE "gear" control or click event for tha "Visualizar" javascript that disables the two search Selects in the Pesquisar form. This seems to be some JAVASCRIPT trace and look for the code of that "Visualizar" javascript click that disables the selects? ? I looked in your code for the meeta-view class in your object inspector SELECT, but that meeta-view is NO WHERE in that codigo_tela.txt  code, , so I wonder if there might be some confusion about the various "pop ups" and controls and id that are referenced here? ? ? I do not think that any code like -
      $("#fk_seguradora").removeProp("disabled");

will do anything, UNLESS in the javascript the code that disables the selects can be found? ? ?
0
 

Author Comment

by:Eduardo Fuerte
ID: 41841824
Hi

@Slick812
The controls are disabled just when the "view" modal is opened, the datatable's gear option is just a menu for doing that. If I open the "edit" modal , via the same menu gear, the controls aren't disabled.

You suggest to check at every javascript - one by one?
img001

@Julian
Based on what you posted I code:

$(function () {
      $('#view').on('show.bs.modal', function () {
    		$('#view input').prop("disabled", false);
            
            
             //$('#pesquisar_groups_form input, #pesquisar_groups_form select').prop("disabled", false);
            
            $('#pesquisar_groups_form input').prop("disabled", false);
            $('#pesquisar_groups_form select').prop("disabled", false)
            $('#fk_seguradora').prop("disabled", false)
            //----------------- 
   
        });
   ....

Open in new window


Unfortunatelly with no effect.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41841848
Sorry.


I guess the reason is a repeated id for that combos in the modal view and in the right bar filter. I'm better checking it.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41841863
Try the suggestion above and if that does not work then we will need to see more of the code - specifically the javascript on the page.
From what I can tell the underlying HTML does not have the disabled property set - so it is probably being set after the fact by JavaScript. Did you code the menu and popups or is part of a plugin?
0
 

Author Comment

by:Eduardo Fuerte
ID: 41842009
I'm better checking since I'm new in this project. It seens it's a part of datatables plugin.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41844953
Sorry the delay.

Realy, the view uses a helper - this helper manipulates datatables plugins. Finding what this helper does is not a very direct task, maybe it changes the forms behaviour, making it a little "impredictable"

View (with parts that calls the Codeigniter helpers)
index_EE_151016.php
0
 

Author Comment

by:Eduardo Fuerte
ID: 41844959
The helpers:

datatables_helper
datatables_helper_EE_151016.php

datatables_ajax_gerar_helper  (at line 27 the view modal was created)
datatables_ajax_gerar_helper_EE_1510.php

datatables_crud_modal_helper (called at the end of the index)
datatables_crud_modal_helper_151016.php

Probably something here could explain the "impredictable" - control's enabled / disabled behaviour when the view modal is called.

The view modal was recently created by me just using little references I had.

Sorry if I am asking a hard effort from you. One thing I know... you are very capable!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41844962
@Eduardo,

Apologies but I am getting a bit lost. The question is about how to enable a control that is disabled. The code we have seen so far is not enough to build a comprehensive understanding of what we are dealing with - and nowhere in that code does there appear to be a disabled property - so something else is setting that property after page load. Datatables is in there somewhere but whether this is part of the Datatable on the page or a feature that has been bolted on - I am not clear.

So the question is did you write the code for the sidebar menu or is that part of some plugin?
0
 

Author Comment

by:Eduardo Fuerte
ID: 41844982
Hi

Here is the complete index - the sidepart menu starts at line 1101 until 1265
 index_complete_EE_151016.php

... a helper that is called at very beginning of the index.
breadcrumb_helper_EE_151016.php

I omited some helpers that I know out of context - If you find a "gap" I can give you later.

Maybe you conclude the helpers called by the view doesn't cause any sidebar enable/ disable unpredictable behaviours...
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 total points
ID: 41845003
I don't think we are going to be able to help you based on the code you have posted. This is something we need to see happening. I get the feeling that there is a missing piece that we have not seen yet which might only become obvious seeing the page in action.

What I did notice was in the code you posted (first link) there are a lot of places where .prop({disabled} : true / false}) is used - I would go through each one of those and try to see if there is not a side effect where one of those is triggering the disabled.

Something is setting the disabled property - to find it though we need the full picture.

Bottom line though - without being able to see it happening - and not having full access to the underlying HTML / JavaScript / CSS source - very difficult to fix.
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 400 total points
ID: 41845081
I am reluctant to say much at this point, because this page output seem very complicated with many PHP included files and many Javascript files (jquery, bootstrap, datatables, datatables-add-on) and in your files that you have shown (php files) the datatables seem to be formed in PHP code and in Javascript, which to me is more difficult to look for and find page javascript problems because you have PHP echo output that looks like it is from a PHP datatable "format" plugin.

However you did trace the popup menu link creation to this -
      <a href="#" class="crud-view" data-id="' . $result_model->{$primary_key} . '">Visualizar</a>
and to me the thing that was DIFFERENT from the -
      <a href="#" class="crud-gerar" data-id="' . $result_model->{$primary_key} . '">Gerar Guia</a>
      <a href="#" class="crud-edit" data-id="' . $result_model->{$primary_key} . '">Editar</a>

was this class -
      class="crud-view"

so in the javascript (don't ask me which one) , I would look for -
       $(".crud-view").on("click", function(){

to see what that menu click would do.
But you have javascript in the .js files and the .php files

I looked in only some of the php files you show here, but in a text search for "crud-view" I did not find it in any javascript? ? ?

I know how frustrating this is for you, because I have done it in trying to find bugs or change the operations of a PHP output page with all kinds of php and javascript files and code.
I really do not have time to look through all of the php code you have given here.
I did not mean to suggest that you look in all of the code. what I meant to say was to use the browser object inspector to "Narrow" and "Reduce" the places (files) and code that you need to look through.
1
 

Author Comment

by:Eduardo Fuerte
ID: 41846471
Hi

Thank you for replies.

I'm trying to make the site running internet - actually it's still local, to make it visible and get a  better position from you.

Amazingly something is preventing it to runs, maybe a .htaccess issue. I'm trying to solve it  and maybe will ask here in this topic.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41851862
@Slick 812

You're perfectly right.


	$("#view")
		.on("view", function(e, data) {

		var $form = $(this);

			$.each(data, function(field, value) {
				
				var
					avoid = ' . json_encode($options['edit']['avoid']) . ',
					$field = $form.find(\'[name="\' + field + \'"]\'),
					tag = ($field.length ? $field.prop("tagName").toLowerCase() : undefined)
				;


				//EF 2016/Out - 06 - Desabilita incorretamente no modal view - Verificar -----
				//if(field != "id" && field != "idinterface_users" && field != "_pass" && field != "_pass2")
				//	$("#"+field).attr("disabled",true);$("#view")
		.on("view", function(e, data) {

		var $form = $(this);

			$.each(data, function(field, value) {
				
				var
					avoid = ' . json_encode($options['edit']['avoid']) . ',
					$field = $form.find(\'[name="\' + field + \'"]\'),
					tag = ($field.length ? $field.prop("tagName").toLowerCase() : undefined)
				;


				//Disabled-----

                                    //if(field != "id" && field != "idinterface_users" && field != "_pass" && field != "_pass2")
				//	$("#"+field).attr("disabled",true);

Open in new window


A helper outputs this code at the end of the page.
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41851865
Thank you for assistance and patience!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 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

12 Experts available now in Live!

Get 1:1 Help Now