I have upgraded from free MDB to MDB pro but many things sto

Topic: I have upgraded from free MDB to MDB pro but many things stopped working such as dropdowns and autocomplete

MarkusMessemer free asked 1 year ago

The autocomplete works fine with jquery when I use free MDB but with pro its nor working

my Filed (I am generating this element from DOM)

My javascript part: $(document).on("keyup",".ingredient_recipe_name",function(){ $(this).autocomplete({ source: 'ajax/recipe/search_recipe.php',

  minlength: 1,

  select: function(event, ui) {
    $(this).closest("td").find(".ingredient_recipe_id").val(ui.item.id);
    $(this).closest("tr").find(".ingredient_recipe_weight_details").val(ui.item.specific_weight);
    $(this).closest("tr").find(".ingredient_recipe_weight_details").attr("decimal_count",ui.item.decimal_count);
    $(this).closest("tr").find(".ingredient_recipe_weight_details").attr("per_piece_weight",ui.item.per_piece_weight);
    $(this).closest("tr").find(".ingredient_recipe_weight_details").attr("unit_type",ui.item.type);
    $(this).closest("tbody").find("tr.options").remove();
  }
})

})

error: index.js:158 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')

Add comment

MarkusMessemer free answered 1 year ago

0 0 Best answer

No Dropdown is working nor by old bootstrap methods nor by method provided in your documentation. I don't understand why pro version is so unstable I am using 6.4.2 I tried to implement mdb 7 but there in your index.html the file mdb.min.js is missing

here you can find the code for dropdown: https://mdbootstrap.com/snippets/standard/markusmessemer/5809501#

Kamila Pieńkowska staff commented 1 year ago

mdb.min.js is missing because we no longer provide it. There are mdb.umd.min.js and mdb.es.min.js

This release was a major release with a lot of breaking changes. Upgrading is not as easy as installing a higher version. Here are list of all changes: https://mdbootstrap.com/docs/standard/getting-started/migration-guide https://mdbootstrap.com/docs/standard/getting-started/changelog/#v7-0-0

If you don't use the newest version you need to use legacy docs: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/ There you can see examples with pure JS for version 6.4.2

Whichever version you choose components won't work if you use bootstrap -bs attributes. It'e easier to copy examples from documenting and build from that type all needed code.

mdb.min.js is missing because we no longer provide it.
There are <code>mdb.umd.min.js</code> and <code>mdb.es.min.js</code>

This release was a major release with a lot of breaking changes.
Upgrading is not as easy as installing a higher version.
Here are list of all changes:
<a href="https://mdbootstrap.com/docs/standard/getting-started/migration-guide" target="_blank">https://mdbootstrap.com/docs/standard/getting-started/migration-guide</a>
<a href="https://mdbootstrap.com/docs/standard/getting-started/changelog/#v7-0-0" target="_blank">https://mdbootstrap.com/docs/standard/getting-started/changelog/#v7-0-0</a>

If you don't use the newest version you need to use legacy docs: <a href="https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/" target="_blank" rel="nofollow">https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/</a> There you can see examples with pure JS for version 6.4.2

Whichever version you choose components won't work if you use bootstrap <code>-bs</code> attributes. It'e easier to copy examples from documenting and build from that type all needed code.

Please insert min. 15 characters.

MarkusMessemer free commented 1 year ago

if you are not using mdb.min.js then why it is in your index.html file? what you guys are selling? I find no proper documentation for any thing. Your snippets are even incomplete I was just searching the onSelect event for asynchronous search and I found nothing no where.

I dont think MDB is useful for me. I am think about to cancel the subscription

Grzegorz Bujański staff commented 1 year ago

We are sorry for that. We will fix it as soon as possible. Each component has an API tab where you will find a list of events. I assume the event you need is itemSelect.mdb.autocomplete. This event fires immediately when the autocomplete item is selected.

Grzegorz Bujański staff commented 1 year ago

MDB 7.0.0 introduces many changes. At first glance, it may look like package instability after an update. But changes are part of the developing process. We are developing MDB all the time. Each new version of MDB is intended to make our package more attractive. Because the new version contains many changes that break backward compatibility, it is version 7.0.0, not 6.5.0. We use semantic versioning. Which means that changing the first digit of the version number means backwards incompatible changes. More information on this can be found here: https://docs.npmjs.com/about-semantic-versioning.

Each of our components that has additional options, methods, and events includes an API tab in the documentation at the very top of the page. There you will find all the information about our methods, events, and options and how to use them. Take into account that we create our own product. So the names of our events and options may differ from the names in other UI kits.

We will be happy to help you with our package if you are not sure how to use our components. But you have to take into account that MDB is based on Bootstrap and supports jQ, but our solutions may differ from those of Bootstrap and jQueryUI.

MDB 7.0.0 introduces many changes. At first glance, it may look like package instability after an update. But changes are part of the developing process. We are developing MDB all the time. Each new version of MDB is intended to make our package more attractive. Because the new version contains many changes that break backward compatibility, it is version 7.0.0, not 6.5.0. We use semantic versioning. Which means that changing the first digit of the version number means backwards incompatible changes. More information on this can be found here: <a href="https://docs.npmjs.com/about-semantic-versioning" target="_blank" rel="nofollow">https://docs.npmjs.com/about-semantic-versioning</a>.

Each of our components that has additional options, methods, and events includes an API tab in the documentation at the very top of the page. There you will find all the information about our methods, events, and options and how to use them. Take into account that we create our own product. So the names of our events and options may differ from the names in other UI kits.

We will be happy to help you with our package if you are not sure how to use our components. But you have to take into account that MDB is based on Bootstrap and supports jQ, but our solutions may differ from those of Bootstrap and jQueryUI.

Please insert min. 15 characters.

Add comment

Grzegorz Bujański staff answered 1 year ago

0 0 Best answer

Autocomplete also consists of a wrapper and this is where init autocomplete should be done. Check out this snippet: <a href="https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5806612#html-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5806612#html-tab-view</a>

The code you prepared has one more error. Currently you listen for keydown, get data from the API, and then do an Autocomplete init. This means that each character entered triggers a query, retrieves data and initializes autocomplete.

This solution is good if you have a large dataset and don't want to download it all at once. But it would require a change in the code. You would have to modify the code in such a way that keydown checks whether an instance of the Autocomplete class exists. If so, you should use the dispose method to destroy the current Autocomplete instance and re-init it. Additionally, I would consider running a query if, for example, 2 seconds have passed after entering a character. Something like this: <a href="https://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up" target="_blank" rel="nofollow">https://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up</a>

If you don't care about this and just need to download the data once, consider downloading the data after the page loads instead of after you start typing characters into the input

Please insert min. 20 characters.

Autocomplete also consists of a wrapper and this is where init autocomplete should be done. Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5806612#html-tab-view

The code you prepared has one more error. Currently you listen for keydown, get data from the API, and then do an Autocomplete init. This means that each character entered triggers a query, retrieves data and initializes autocomplete.

This solution is good if you have a large dataset and don't want to download it all at once. But it would require a change in the code. You would have to modify the code in such a way that keydown checks whether an instance of the Autocomplete class exists. If so, you should use the dispose method to destroy the current Autocomplete instance and re-init it. Additionally, I would consider running a query if, for example, 2 seconds have passed after entering a character. Something like this: https://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up

If you don't care about this and just need to download the data once, consider downloading the data after the page loads instead of after you start typing characters into the input

MarkusMessemer free commented 1 year ago

I followed your snippet I don't get my ajax fired when i enter something in the field and get this error index.js:158 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') at M0._initDropdown (index.js:158:26) at M0._init (index.js:142:10) at new M0 (index.js:96:10) at HTMLInputElement. (index.js:677:16) at Function.each (jquery.js:383:19) at jQuery.fn.init.each (jquery.js:205:17) at jQuery.fn.init.jQueryInterface [as autocomplete] (index.js:668:17) at HTMLInputElement. (autocomplete.js:59:13) at HTMLDocument.dispatch (jquery.js:5145:27) at elemData.handle (jquery.js:4949:28)

when I try to again write something I get ajax fired and get this data in response: [{"value":"Chicken Soup","id":"1","unit":"2","type":"2","specific_weight":"2.43","recipe_per_weight_unit":"5.006","decimal_count":"3","approximation":"0"}]

but the data is not populating in the dropdown instead I am getting this error: index.js:331 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at M0._updateResults (index.js:331:14) at index.js:291:12

I followed your snippet
I don't get my ajax fired when i enter something in the field and get this error
index.js:158 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')
 at M0._initDropdown (index.js:158:26)
 at M0._init (index.js:142:10)
 at new M0 (index.js:96:10)
 at HTMLInputElement. (index.js:677:16)
 at Function.each (jquery.js:383:19)
 at jQuery.fn.init.each (jquery.js:205:17)
 at jQuery.fn.init.jQueryInterface [as autocomplete] (index.js:668:17)
 at HTMLInputElement. (autocomplete.js:59:13)
 at HTMLDocument.dispatch (jquery.js:5145:27)
 at elemData.handle (jquery.js:4949:28)

when I try to again write something I get ajax fired and get this data in response:
[{"value":"Chicken Soup","id":"1","unit":"2","type":"2","specific_weight":"2.43","recipe_per_weight_unit":"5.006","decimal_count":"3","approximation":"0"}]

but the data is not populating in the dropdown instead I am getting this error:
index.js:331 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
 at M0._updateResults (index.js:331:14)
 at index.js:291:12

Please insert min. 15 characters.

MarkusMessemer free commented 1 year ago

Please check this again and read my commented portion in javascript: https://mdbootstrap.com/snippets/standard/markusmessemer/5803213#js-tab-view

Grzegorz Bujański staff commented 1 year ago

How can I reproduce this error? If I can't reproduce it, I won't be able to debug what's causing it

MarkusMessemer free commented 1 year ago

Please tell me for asynchronous search what is the event when I select an option. In conventional jquery autocomplete it was "select" for MDB PRO select and onSelect both are producing nothing and there is nothing in documentation about that

Add comment

MarkusMessemer free answered 1 year ago

0 0 Best answer

Its simple:my html element:

and my javascript part:

<pre class="prettyprint"><code>$(document).on("keyup",".ingredient\_recipe\_name",function(){ $(this).autocomplete({ source: 'ajax/recipe/search\_recipe.php', minlength: 1,

select: function(event, ui) { $(this).closest("td").find(".ingredient\_recipe\_id").val(ui.item.id); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").val(ui.item.specific\_weight); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").attr("decimal\_count",ui.item.decimal\_count); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").attr("per\_piece\_weight",ui.item.per\_piece\_weight); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").attr("unit\_type",ui.item.type); $(this).closest("tbody").find("tr.options").remove(); }})})
</code></pre>

The error is:error: <code>index.js:158 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')</code>

The same code runs fine with mdb free. but with MDB pro I am getting this error

Please insert min. 20 characters.

Its simple:my html element:

<input type="text" name="" class="form-control input_small ingredient_name">

and my javascript part:

$(document).on("keyup",".ingredient\_recipe\_name",function(){ $(this).autocomplete({ source: 'ajax/recipe/search\_recipe.php', minlength: 1,

select: function(event, ui) { $(this).closest("td").find(".ingredient\_recipe\_id").val(ui.item.id); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").val(ui.item.specific\_weight); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").attr("decimal\_count",ui.item.decimal\_count); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").attr("per\_piece\_weight",ui.item.per\_piece\_weight); $(this).closest("tr").find(".ingredient\_recipe\_weight\_details").attr("unit\_type",ui.item.type); $(this).closest("tbody").find("tr.options").remove(); }})})

The error is:error: index.js:158 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')

The same code runs fine with mdb free. but with MDB pro I am getting this error

Kamila Pieńkowska staff commented 1 year ago

We do not have a free version of the autocomplete component so I fail to understand how autocomplete could have stopped working for you.

This is not the full code needed for your example to run in the test environment. Please prepare a snippet that recreates the behavior you have trouble with.

Use our snippet environment and select the version of MDB you have in your project: https://mdbootstrap.com/snippets/

MarkusMessemer free commented 1 year ago

here it is: https://mdbootstrap.com/snippets/standard/markusmessemer/5803213

MarkusMessemer free commented 1 year ago

If you check the same code in MDB free version or with any other bootstrap version you will see its working and calling the ajax

Kamila Pieńkowska staff commented 1 year ago

That is because if you want to use ajax call you need to use autocomplete in the asynchronous way.

Here is an example that shows how to implement asyns .. await: https://mdbootstrap.com/docs/standard/forms/autocomplete/#section-async-search

MarkusMessemer free commented 1 year ago

this I already tried this gives error Autocomplete is not a function:

https://mdbootstrap.com/snippets/standard/markusmessemer/5803213#js-tab-view

I when I fetch results using ajax I am getting many other variables too I want to get them in javascript variables so that I could play around with them.

MarkusMessemer free commented 1 year ago

I want autocomplete field to get by class name because there might be dozens of field with same class name I want to use the context so that I could pass different variables I get from the api this code works fine for me when I use mdb free or any other version of bootstrap

$(document).on("keyup",".ingredient_name",function(){ $(this).autocomplete({ source: 'ajax/recipe/search_ingredient.php',

  minlength: 1,

  select: function(event, ui) {
    $(this).closest("td").find(".ingredient_id").val(ui.item.id);
    $(this).closest("tr").find(".ingredient_weight_details").val(ui.item.specific_weight);
    $(this).closest("tr").find(".ingredient_weight_details").attr("decimal_count",ui.item.decimal_count);
    $(this).closest("tr").find(".ingredient_weight_details").attr("per_piece_weight",ui.item.per_piece_weight);
    $(this).closest("tr").find(".ingredient_weight_details").attr("unit_type",ui.item.type);
    $(this).closest("tr").find(".open_data_set").attr("id",ui.item.id);
    $(this).closest("tbody").find("tr.options").remove();
    $.ajax({
      url:"ajax/recipe/get_details.php",
      method:"post",
      dataType:"json",
      data:{"get_losses":1,"id":ui.item.id},
      context:this,
      success:function(data){
        if (data.status=="1") {
          $(this).closest("tr").after(data.options);
          $(this).closest("tbody").find(".losses_select").select2()
        }
      }
    })

    $.ajax({
      url:"ajax/recipe/get_details.php",
      method:"post",
      dataType:"json",
      data:{"get_units":1,"specific_weight":ui.item.specific_weight,"unit":ui.item.unit,"type":ui.item.type},
      context:this,
      success:function(data){
        $(this).closest("tr").find(".ingredient_unit").html(data.options);
      }
    })

  }
})

})

I want autocomplete field to get by class name because there might be dozens of field with same class name I want to use the context so that I could pass different variables I get from the api
this code works fine for me when I use mdb free or any other version of bootstrap

$(document).on("keyup",".ingredient_name",function(){
 $(this).autocomplete({
 source: 'ajax/recipe/search_ingredient.php',

<pre class="prettyprint"><code> minlength: 1,

select: function(event, ui) {
    $(this).closest("td").find(".ingredient_id").val(ui.item.id);
    $(this).closest("tr").find(".ingredient_weight_details").val(ui.item.specific_weight);
    $(this).closest("tr").find(".ingredient_weight_details").attr("decimal_count",ui.item.decimal_count);
    $(this).closest("tr").find(".ingredient_weight_details").attr("per_piece_weight",ui.item.per_piece_weight);
    $(this).closest("tr").find(".ingredient_weight_details").attr("unit_type",ui.item.type);
    $(this).closest("tr").find(".open_data_set").attr("id",ui.item.id);
    $(this).closest("tbody").find("tr.options").remove();
    $.ajax({
      url:"ajax/recipe/get_details.php",
      method:"post",
      dataType:"json",
      data:{"get_losses":1,"id":ui.item.id},
      context:this,
      success:function(data){
        if (data.status=="1") {
          $(this).closest("tr").after(data.options);
          $(this).closest("tbody").find(".losses_select").select2()
        }
      }
    })

$.ajax({
      url:"ajax/recipe/get_details.php",
      method:"post",
      dataType:"json",
      data:{"get_units":1,"specific_weight":ui.item.specific_weight,"unit":ui.item.unit,"type":ui.item.type},
      context:this,
      success:function(data){
        $(this).closest("tr").find(".ingredient_unit").html(data.options);
      }
    })

}
})
</code></pre>

})

Please insert min. 15 characters.

Add comment

Kamila Pieńkowska staff answered 1 year ago