changing panel (or any other component) properties from js

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

sundance asked 5 years 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";

});

Add comment

MDBootstrap staff pro premium priority answered 5 years ago

1 0 Best answer

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 commented 5 years ago

Hi Piotr,

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

Best regards,

István

sundance commented 5 years 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

MDBootstrap staff pro premium priority commented 5 years 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 commented 5 years 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 commented 5 years 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;

MDBootstrap staff pro premium priority commented 5 years 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.

Add comment

sundance answered 5 years ago

0 0 Best answer

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.

Add comment

sundance answered 5 years ago

0 0 Best answer

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 commented 5 years 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

MDBootstrap staff pro premium priority commented 5 years 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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.8.5
Device: PC
Browser: Chrome
OS: Windows 7 Prof. 64-bit
Provided sample code: No
Provided link: Yes

sundance

207Support score
13Questions 14Answers

1Snippets likes 5Snippets