Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Metronic Laravel Custom Javascript not working


hi Metronic Team

I am trying to add a product page to my Laravel project, but the JavaScript isn't functioning properly.

Code part :

1. add-product.blade.php

>

<button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">
<span class="indicator-label">Save Changes</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>

@push("scripts")
<script type="text/javascript" src="{{ asset("assets/js/custom/apps/ecommerce/catalog/save-product.js") }}"></script>
@endpush


2. Inspect web page

>

<!--begin::Custom Javascript(optional)-->
<script src="http://127.0.0.1:8000/assets/js/custom/widgets.js"></script>
<script src="http://127.0.0.1:8000/assets/js/custom/apps/chat/chat.js"></script>
<script src="http://127.0.0.1:8000/assets/js/custom/utilities/modals/upgrade-plan.js"></script>
<script src="http://127.0.0.1:8000/assets/js/custom/utilities/modals/create-app.js"></script>
<script src="http://127.0.0.1:8000/assets/js/custom/utilities/modals/users-search.js"></script>
<script src="http://127.0.0.1:8000/assets/js/custom/utilities/modals/new-target.js"></script>
<!--end::Custom Javascript-->
<script type="text/javascript" src="http://127.0.0.1:8000/assets/js/custom/apps/ecommerce/catalog/save-product.js"></script>


Issue

>
When I click "Save Changes," it should trigger the handleSubmit function in save-product.js, but it is not working.

Could you please help me with making the JavaScript code work properly? I am having trouble with it and would appreciate your guidance. Thank you.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


It seems that you are trying to use Quill.js and submit its contents in a form. However, using a div element as the editor container will not work, because div elements are not part of the form data. You need to use a hidden input element instead, and update its value with the editor’s innerHTML whenever the content changes. Here is an example of how you can do that:


<form method="post" >
<!-- Create the toolbar container -->
<div >
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div >
<p>Hello World!</p>
</div>

<!-- Create a hidden input element -->
<input type="hidden" name="description" >

<input type="submit" value="Save">
</form>

<!-- Initialize Quill editor -->
<script>
var editor = new Quill("#editor", {
modules: {
toolbar: "#toolbar"
},
theme: "snow"
});

// Update the hidden input value whenever the editor changes
editor.on("text-change", function() {
var html = editor.root.innerHTML;
document.getElementById("hiddenInput").value = html;
});
</script>



Hi Faizal, thank you so much for helping me out.
Everything is working perfectly now. Thanks again, brother!

I am using first solution without $this

// Example in your controller
use App\Core\Layout\BaseController;

class YourController extends BaseController {
public function yourMethod() {
// Add "formrepeater" vendor
addVendors(["formrepeater"]);

// Your other code...
}
}


I just have one more question, if you don't mind. Could you please help me with it?

I have created a form to submit a request to store data, I am using form.submit() but the description value is still null.

I know this description using quill, can you help me to fix the quill description to be included in the form request?

this is the screenshot :

1. try fill description form with quill.js
<img src="https://i.ibb.co/pPzZBRp/2023-11-30-11-09.png" alt="2023-11-30-11-09" border="0" />

2. blade & quill.js file
<img src="https://i.ibb.co/6Hj5FHN/2023-11-30-11-06.png" alt="2023-11-30-11-06" border="0" />
<img src="https://i.ibb.co/L6bdd3g/2023-11-30-11-10.png" alt="2023-11-30-11-10" border="0" />

3. form.submit()
<img src="https://i.ibb.co/CtKmfYY/2023-11-30-11-12.png" alt="2023-11-30-11-12" border="0" />

4. request result description is null
<img src="https://i.ibb.co/TT5LKXZ/2023-11-30-11-08.png" alt="2023-11-30-11-08" border="0" />

Help me to fix description value to a form.submit is still null even though I have already fill the description value.



Hi,

There are a couple of steps you can take to address the problem.

In your controller, make sure you include the 'formrepeater' vendor by using the addVendors method. This step is essential for loading the necessary JavaScript files for the form repeater plugin.

// Example in your controller
use App\Core\Layout\BaseController;

class YourController extends BaseController {
public function yourMethod() {
// Add "formrepeater" vendor
$this->addVendors(["formrepeater"]);

// Your other code...
}
}


If the above step did not work. Move to this step. In recent formrepeater update, it might be the path has been changed. Navigate to the /resources/mix/vendors/formrepeater/ directory and update the formrepeater.bundle.js file with the following code:

module.exports = [
"node_modules/jquery.repeater/src/lib.js",
"node_modules/jquery.repeater/src/jquery.input.js",
"node_modules/jquery.repeater/src/repeater.js",
];


After making these changes, run the following command to rebuild your assets:

npm run dev

This command will compile your assets with the updated configuration.
After completing these steps, check if the JavaScript for the form repeater plugin is now functioning as expected on your product page.

If you encounter any further issues or have additional details to share, feel free to let me know.



Hello,

Thank you for reaching out. To better assist you, could you please check the console log for any JavaScript errors when you click "Save Changes"? This will help us identify if there are any issues with the execution of the JavaScript code.

You can open the browser's developer tools (usually by pressing F12 or right-clicking on the page and selecting "Inspect"), go to the "Console" tab, and look for any error messages.

Once you identify any errors, please share them with us.

Looking forward to resolving this issue for you.



Hi bro, I hope this reply can help clear things up.

This section of the code, has been thoroughly checked to ensure proper functionality.


add-product.blade.php
add-product.blade.php img link
<img src="https://cdn.loom.com/images/thumbnails/a24cc7f08f7d40ccadfd53242e14a0eb.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4ubG9vbS5jb20vaW1hZ2VzL3RodW1ibmFpbHMvYTI0Y2M3ZjA4ZjdkNDBjY2FkZmQ1MzI0MmUxNGEwZWIuanBnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzAwOTI3NTU3fX19XX0_&Key-Pair-Id=APKAJQIC5BGSW7XXK7FQ&Signature=CoeDMgxNVPWoK4HU4OWkk7K5VKfz4LLe7O6UdlDOQUsAC3TD9X%7E2W3HRh40pxcix0XcG%7Edtsx%7EKoGEWuY9Xgp2s1OCf0TDd8unAiTRnAeim0-njvIf6KUEboNKf7fvyr7RMKetcCPKhnEhxLSL39luFRc-60LRMWTO%7EXJY4jOZOHxkloO6WPcQgeduOMEZDDkzQN7mmsbchwLhH5fMPn3aCpFhyX0hJwIIBuAQ7vd12jWJ7zQ3LgGmDcgzCFBbnsFicTFc37I90SJoUA46Rd9bo-0P3mcOHENgvQBFlg5A0Ocl81fl09jVoqQe7w-b78qqxfQQ54L2LGWK0s9QIwRg__" />

When clicking the "Save Changes" button, the JavaScript code seems to be malfunctioning.


console inspect after "Save Changes" clicked
Console img link
<img src="https://cdn.loom.com/images/originals/9c69a8ce527d40e78e19f5966f5117ae.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4ubG9vbS5jb20vaW1hZ2VzL29yaWdpbmFscy85YzY5YThjZTUyN2Q0MGU3OGUxOWY1OTY2ZjUxMTdhZS5qcGciLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3MDA5Mjc0NDF9fX1dfQ__&Key-Pair-Id=APKAJQIC5BGSW7XXK7FQ&Signature=iiFWD8YYc9SN8HNQcDCZfbx9gwlOdhqB8MbLRQYbMc27OXSbAksDRTV68pJq9BuqqVqjjAIFega1HkJk504Am-hk68c74t6OYBmF%7EA1qkzHixAVeIALDjOTyxeFMer0lnJavmnZC--NNrT611aDOD4re7xiKR4CWaSFdXA5A1sOuVMMQIo3VT8AIUyAR5IGP-f2LsCyl4jggdWV5iZJYCu7arjUPW5TH6GlDpmjYnTOy7vLyCJ9Qgl6W5nE18rxsDg3qA-bl9vPjAy6LLVdp7w5FOd14M5hvYHVEuAtxY%7ENh30Fw0jIt03tpTmlmojrkrNN2RCdIqUD5dkDw018Szg__&_gl=1*1ehpi9d*_gcl_au*ODQ0OTU1ODIwLjE3MDA3Mzc2NDM." />

What I was expecting was an HTML layout that something like this.


When you fail to fill in a required field, a modal error validator is triggered.
Expected result img link
<img src="https://cdn.loom.com/images/thumbnails/25f4ece118724eea896657b05c61296b.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4ubG9vbS5jb20vaW1hZ2VzL3RodW1ibmFpbHMvMjVmNGVjZTExODcyNGVlYTg5NjY1N2IwNWM2MTI5NmIuanBnIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzAwOTI3NTAyfX19XX0_&Key-Pair-Id=APKAJQIC5BGSW7XXK7FQ&Signature=NVCveB-dZ0jS6ce--wA3s-Mgsj%7EaLyR3jQ2Ra6ZKq376MsW1yFWOMw%7EBtjFYB90VvFmSFR-Hk1ufXgAuDWdjTCTSZrvm5SKCqq7cIaYvF1tkSR7m2%7EoIL98T0MhPTC2gkZdv%7EUUnW4jbg5xHMix4Za6hzWQpOO9gUD1p%7E1-qcETrVC4PFOaFNAV306uGVivbFOhy3qt%7ETgAoDZtjlxemF7FAnIEtKg%7EBkFUyIq2BGITwDguP%7Ep0mjorWPq3pb--HP84A3NrfPBbROrBkI-uagdj6jdsnX3P9h2PKn2ZSbhBVSK7JFQ6gnhpHKHp8Kt7wWNB153gwgiVrRI%7EgK%7EP0sQ__" />

"Please help me. Thank you."
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(