changing panel (or any other component) properties from js

web
mobile

Topic: changing panel (or any other component) properties from js

sundance pro premium asked 4 months ago

Hello,

I would like to use panels as status indicators. Changing text is working. How can I change panel color using JS? See snippet for testing.

Expected behavior

Changing panel properties (color, header text) on events

Actual behavior

Resources (screenshots, code snippets etc.) HTML:

<div class="card bg-light" id="myCard">
  <div class="card-header">
    <h5 class="elegant-color-text" id="headerText">Header </h5>
  </div>
  <div class="card-body">                   
    <div class="card-title" id="subTitle" text>Subtitle</div>
  </div>
</div>

<button type="button" id="btn1" class="btn btn-outline-red btn-rounded btn-sm px-2">
  SET<i class="fas fa-pencil-alt mt-0"></i>
</button>

JS:

$('#btn1').click(function(e) {
   e.preventDefault();

  $element = document.getElementById("headerText");
  $element.innerHTML = 'HEADER CHANGED' ;

  $element = document.getElementById("subTitle");
  $element.innerHTML = 'Subtitle changed' ;

  $element = document.getElementById("myCard");
  $element.class = "card text-white bg-success mb-3";

}); 

Piotr Obrebski staff answered 4 months ago

Hi sundance,

We suggest using jq with mdb jq package not default js functions as getElementById. Try to always declare variables inside the desired scope by adding ver/let/const in the declaration. Always use different variable names when assigning some element from dome to use this variable in the future.

I forked from your snippet to serve your development needs. I suggest you styling our component with classes that mdb provides instead of adding custom styles by css function

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1042512

If you need additional help I am here for you.

Best Regards, Piotr


sundance pro premium commented 4 months ago

Hi Piotr,

Thank you for useful hints. Your solution advised seems to be perfect.

Best regards,

István


sundance pro premium commented 4 months ago

Hi Piotr,

I faced with a strange problem. Changing card background color does not work with danger color:

const $card1 = $("#card1"); $card1.addClass("card text-white bg-danger mb-3");

It works only with some other colors, like info, secondary, success etc.

Best regards,

István


Piotr Obrebski staff commented 4 months ago

You don't have to add classes that already exist in the component you are editing. just add a new class that should add colour. You also should remove the class that sets the styling before you add a new one. For example, If your card had class bg-success before $card1.addClass("bg-danger"); you should have a line $card1.removeClass("bg-success");


sundance pro premium commented 4 months ago

OK, understood :) Thaks for advise.
Is there a getClass method to remove unknown class? I mean if added class (in this case background color) depends on an earlier condition (e.g. on a database value), before removing how can I define its actual value? E.g. $card1.removeClass($card1.getClass()); ? Btw, where can I find a tutorial on managing classes?


sundance pro premium commented 4 months ago

I found a solution, even this is not so "smart" than using somekind of getClass():

// color initialization $class = "bg-light";

... // repeatable action: $opmode1.removeClass($class); $newClass = "bg-danger"; // any color, depending on conditions $opmode1.addClass($newClass); $class = $newClass;


Piotr Obrebski staff commented 4 months ago

This is actually an almost perfect solution, just don't add $ before the name of the variable. This is commonly used to point that variable contains a jQ object. Additionally, add var before the variable name to make this local variable, not a global one.


sundance pro premium answered 4 months ago

I modified snippet. Changing color is working on panel, and on background of card text, but not on the whole card. How could I change the complete appearance of a card like demonstrated in the tutorial?

How could I apply this method on other components, like badges, etc.? Where can I find default properties of cards? I did not find them in mdb.js as I did in case of EasyPieChart defaultOptions.


sundance pro premium answered 4 months ago

Hi Piotr,

I experienced very strange behaviour. See snippet! Just play with comments, and change $reg_dec1 from 0 to an other value, and back.

Best regards,

István


sundance pro premium commented 4 months ago

Color changing is working only if default color in html code is bg-danger. JS can turn to bg-success. If default color different from bg-danger, eg. bg-light or bg-success, js could turn into bg-success, bg-info, etc. but not able to turn to bg-danger.

István


Piotr Obrebski staff commented 4 months ago

You have to remove the class that was adding styles before adding the new one. This weird behaviour occurs only when you have more than one class that styles the same thing for example when your component has class bg-danger and bg-success. The class that will add styling will be the one that is lower in our code. This is not supported by any library including mdb


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.8.5
  • Device: PC
  • Browser: Chrome
  • OS: Windows 7 Prof. 64-bit
  • Provided sample code: No
  • Provided link: Yes