How can I trigger two functions

Hi I am a bit new to Laravel, I bought a template and I am trying to add Chatify to it, Chatify has its own Light/Dark mode and my template also has a light/dark mode, what I would like to do it have the template switch both.

These are the two functions, they are in different files.

` // Theme Change by Header Button - main App switch
$("#themeMood").on("click", function () {
if (currentTheme === "light") {
currentTheme = "dark";
} else {
currentTheme = "light";
}
localStorage.theme = currentTheme;
location.reload();
});

$("#grayScale").on("click", function () {
if ($("html").hasClass("grayScale")) {
$("html").removeClass("grayScale");
localStorage.effect = "";
} else {
$("html").addClass("grayScale");
localStorage.effect = "grayScale";
}
});
// Switch to Dark/Light mode - Chatify switch
$("body").on("click", ".dark-mode-switch", function () {
if ($(this).attr("data-mode") == "0") {
$(this).attr("data-mode", "1");
$(this).removeClass("far");
$(this).addClass("fas");
dark_mode = "dark";
} else {
$(this).attr("data-mode", "0");
$(this).removeClass("fas");
$(this).addClass("far");
dark_mode = "light";
}
});
`

The button in Chatify uses the dark-mode-switch class and the template uses the themeMood id I have tried adding the class to the template button but its not triggering the function, I tried moving the function to the same file, but still didn't work.

Any idea how I can get this to work?

Comments

[Mike Nomad]

How can I update the user table on click field dark_mode dark = 1 light = 0 ?

I created a route, and added this ajax

` $(document).ready(function () {
// Get the CSRF token from the tag
var csrfToken = $('meta[name="csrf-token"]').attr("content");

    // Theme Change by Header Button
    $("#themeMoodForm").on("change", function () {
        var darkMode = $('input[name="dark_mode"]').val();

        console.log("Dark Mode:", darkMode); // Debug statement

        $.ajax({
            url: "/update-theme",
            type: "POST",
            data: {
                dark_mode: darkMode,
                _token: csrfToken, // Use the CSRF token in the data
            },
            beforeSend: function (xhr, settings) {
                console.log("Data sent:", settings.data); // Debug statement
            },
            success: function () {
                // Reload the page after the database update
                location.reload();
            },
            error: function (error) {
                // Handle error, if needed
                console.log("Error: " + error.responseJSON.message);
            },
        });
    });
});

`
I wrapped a form around my buttons

<form id="themeMoodForm" action="{{ route('update-theme') }}" method="POST">
@csrf
<input type="hidden" name="dark_mode" value="{{ Auth::user()->dark_mode === 1 ? 'dark' : 'light' }}">
<button
id="themeMood" data-mode="{{ Auth::user()->dark_mode > 0 ? 1 : 0 }}"
class="h-[28px] w-[28px] lg:h-[32px] lg:w-[32px] lg:bg-gray-500-f7 bg-slate-50 dark:bg-slate-900 lg:dark:bg-slate-900 dark:text-white text-slate-900 cursor-pointer rounded-full text-[20px] flex flex-col items-center justify-center">
<iconify-icon
class="text-slate-800 dark:text-white text-xl dark:block hidden"
id="moonIcon"
icon="line-md:sunny-outline-to-moon-alt-loop-transition"></iconify-icon>
<iconify-icon
class="text-slate-800 dark:text-white text-xl dark:hidden block"
id="sunIcon"
icon="line-md:moon-filled-to-sunny-filled-loop-transition"></iconify-icon>
</button>
</form>

and created a ThemeController

` public function updateTheme(Request $request)
{
Log::info('updateTheme method executed');

    $user = Auth::user();

    if ($user) {
        $darkMode = $request->input('dark_mode') === "dark" ? 1 : 0;
        Log::info('Dark mode value: ' . $darkMode);

        $user->update(['dark_mode' => $darkMode]);
        $user->save();

        return redirect()->back()->with('success', 'Theme updated successfully.');
    }

    return redirect()->back()->with('error', 'User not found.');
}`

But checking the network log the output is always darkmode="light" its like the button is not updating so the db never gets updated??