Blancer.com Tutorials and projects

Access to XMLHttpRequest at ‘https://pinterest-backend-omega.vercel.app/api/auth/login’ from origin ‘https://pinterest-clone-brown.vercel.app’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Hi there, I am facing this issue continuously. Can anyone help me

Note: I am using Express

I’ve implemented a piece of code where I first generate a token, store it in localStorage, and then retrieve it from there in my fetch utility for backend API calls. However, no matter how many times I refresh the page, it always generates a new access token.

This is my route.tsx file

export const msalInstance = new PublicClientApplication(msalConfig);
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
    msalInstance.setActiveAccount(accounts[0]);
}

msalInstance.addEventCallback((event: EventMessage) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
        const payload = event.payload as AuthenticationResult;
        const account = payload.account;
        msalInstance.setActiveAccount(account);
    }
});

export const router = createBrowserRouter([
    {
        path: '/',
        element: <App pca={msalInstance} />,
        children: [
            { path: '/', element: <Home /> },
        ],
    },
]);

This is my App.tsx file

function App({ pca }: AppProps) {
    const authRequest = {
        ...loginRequest,
    };

    return (
        <MsalProvider instance={pca}>
            <MsalAuthenticationTemplate
                interactionType={InteractionType.Redirect}
                authenticationRequest={authRequest}
                errorComponent={Error}
                loadingComponent={Loading}
            >
                <OutletWrapper />
            </MsalAuthenticationTemplate>
        </MsalProvider>
    );
}

const OutletWrapper: React.FC = () => {
    const { instance } = useMsal();
    const account = useAccount(accounts[0] || {});

    const [apiData, setApiData] = useState<AuthenticationResult | null>(null);

    useEffect(() => {
        if (account) {
            instance
                .acquireTokenSilent({
                    scopes: ['User.Read'],
                    account: account,
                })
                .then((response) => {
                    if (response) {
                        localStorage.setItem('authStatus', response.idToken);
                        setApiData(response);
                    }
                });
        }
    }, [account, instance]);

    if (!apiData) return <Loading />;

    return (
        <CompanySelectionWrapper>
            <Sidebar />
            <Outlet />
        </CompanySelectionWrapper>
    );
};

export default App;

here’s my console error notification
it’s happen when i try to upload my code, when i dd my data already sent but couldn’t upload to database.

create:1 An invalid form control with name='content' is not focusable. <textarea name=​"content" id=​"content" class=​"form-control" rows=​"5" required style=​"visibility:​ hidden;​ display:​ none;​">​</textarea>​

here my form code create.blade.php
i try to use CK Editor for my article content, but when i deactivate the CK Editor but when i try delete my JavaScript it works just fine.

<form action="{{ route('admin.articles.store') }}" method="POST" enctype="multipart/form-data" id="articleForm">
        @csrf    
<div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea name="content" id="content" class="form-control" rows="5" required style="visibility: hidden; opacity: 0;"></textarea>
            @error('content')
                <div class="alert alert-danger mt-2">{{ $message }}</div>
            @enderror

here’s my JS, at the end my create.blade.php

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
    
<script>
    let editorInstance;

    document.addEventListener('DOMContentLoaded', function () {
    ClassicEditor
        .create(document.querySelector('#content'))
        .then(editor => {
            editorInstance = editor;

            document.getElementById('articleForm').addEventListener('submit', function (event) {
              
                document.querySelector('textarea[name="content"]').value = editorInstance.getData();
            });
        })
        .catch(error => {
            console.error("Error initializing CKEditor:", error);
        });
});

here’s my laravel controller Store Function

    public function store(Request $request)
{
    // Debugging: Dump the received request data
    dd($request->all()); // Debugging: Show all request data

    Log::info('Data yang diterima:', $request->all());

    // Validate the incoming data
    $validatedData = $request->validate([
        'title' => 'required|string|max:255',
        'content' => 'required|string',
        'author' => 'required|string',
        'published' => 'boolean',
        'meta_description' => 'nullable|string|max:255',
        'tags' => 'nullable|string|max:255',
        'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
    ]);

    // Handle image upload if exists
    $imagePath = null;
    if ($request->hasFile('image')) {
        $imagePath = $request->file('image')->store('articles', 'public');
        Log::info('Image uploaded successfully:', ['image_path' => $imagePath]);
    }

    // Create and save the article
    $article = new Article();
    $article->title = $validatedData['title'];
    $article->content = $validatedData['content'];
    $article->author = $validatedData['author'];
    $article->published = $validatedData['published'] ?? false;
    $article->meta_description = $validatedData['meta_description'];
    $article->tags = $validatedData['tags'];
    $article->image = $imagePath;
    $article->save();

    return redirect()->route('admin.articles.index')->with('success', 'Article created successfully.');
}

After rendering leaflet component in my angular app some map-images are missing, here is my code

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { DOCUMENT } from '@angular/common';



@Component({
  selector: 'app-leaflet-offline-maps',
  standalone: true,
  imports: [],
  templateUrl: './leaflet-offline-maps.component.html',
  styleUrls: ['./leaflet-offline-maps.component.css']
})
export class LeafletOfflineMapsComponent {
  private isBrowser: boolean;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(DOCUMENT) private document: Document
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  async ngOnInit(): Promise<void> {
    if (this.isBrowser) {
      const L = await import('leaflet'); 

      const map = L.map('map').setView([42.4304, 19.2594], 13);

      L.tileLayer('http://localhost:8080/tile/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      }).addTo(map);
    }
  }
}

and

<div id="map"></div>

also I already installed leaflet and import leaflet css style in angular.json

What I have

I have a MUI Time Picker component inside React.

Goal

I would like to modify the tabbing behavior. By default if the user fills out the input and presses Tab the focus will jump to the clock icon inside the time picker. This is unnecessary since that icon is only needed when the user uses the mouse. After the input is filled via keyboard Tab should jump to the next field. The default behavior requires the user to press Tab twice which slows down usage through the keyboard.

What I tried

I have a basic TimePicker. I just want to know how to configure it:

<TimePicker label="Basic time picker" />

Problem

Usually the API docs list a lot of customization options but tab behavior doesn’t have a prop.

I am experincing one issue where I am updating some randows rows in UI grid and then scroll down. When the request lands on my UI method –

gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
if (newValue !== oldValue)
the newValue is completely different than what I have edited and oldValue is the correct one.

I tried using gridApi.core.on.scrollEnd($scope, function(grid, scrollEvent)
but everytime scrollEvent is coming as undefined.

1. Do we still required polyfils in 2025 ?

2. The script execution time for the polyfills script (2,298 ms) is significantly high, as indicated in the Chrome insights (screenshot attached below). Is there any way to reduce or get rid of it?

Chrome insights

I have this javascript function for allowing numeric input only

window.addNumericInputValidation = function (elementId) {
    var $element = $("#" + elementId);

    // First remove any existing handlers to prevent stacking
    $element.off("keydown.numericValidation");
    $element.off("paste.numericValidation");

    // Handle keydown for typing
    $element.on("keydown.numericValidation", function (e) {
        console.log("key code", e.keyCode);
        // Allow: backspace, delete, tab, escape, enter, etc.
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
            // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            return;
        }

        // Ensure that it's a number and stop the keypress if not
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
            (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

    // Handle paste events
    $element.on("paste.numericValidation", function (e) {
        // Get pasted data via clipboard API
        var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
        var pastedData = clipboardData.getData('Text');

        // Check if pasted data contains only numbers
        if (!/^d*$/.test(pastedData)) {
            e.preventDefault();
        }
    });
};

The problem happens when I turn on Unikey – which is a Vietnamese input editor for Vietnamese characters (For example the software will convert “dd” into the vietnamese “đ”). If Unikey is on, when I type numbers, it works normally but if i type “d” twice, it starts deleting the the number input.

After debugging, I found out that after you type “d” key twice, Unikey will insert 2 delete key and one “đ” key, to replace “dd” with “đ”, and because my validation don’t allow non-numeric characters, only the deletion happens.

This is the console after I input “d” twice

key code 68 (for 'd')
key code 231 (for 'đ')
key code 8 (for delete)
key code 8 (for delete)
key code 231 (for 'đ')

I can’t really tell the customer to turn off their language editor software so what are my options here?

I have read an Excel file using the ExcelJS library, but I am unable to interpret numFmt in a way that displays the cell value as it appears in Excel.

For example, I have different number formats applied to cells, such as:

• "#,##0.00" ? Expected: 1,234.56
• "0%" ? Expected: 50% for a cell value of 0.5
• "0.00E+00" ? Expected: 1.23E+03 for a value of 1234.56

However, when reading these cells using ExcelJS, I often get only the raw value and the format string separately, without automatic interpretation.

const workbook = new ExcelJS.Workbook();
await workbook.xlsx.readFile('sample.xlsx');
const worksheet = workbook.getWorksheet(1);
const cell = worksheet.getCell('A1');

console.log(cell.value);   // Raw value: 1234.56
console.log(cell.numFmt);  // Format string: "#,##0.00"

Is there a way to correctly interpret and convert any numFmt formats using ExcelJS so that the displayed value reflects the formatting applied in Excel? Any guidance or examples would be greatly appreciated!

Hi I am trying to create a form with parent-child models using python Django Inlineformset_factory but when I am trying to update the child, its giving me unique constraint error. Here I am sharing my model code, forms code, views code. I am trying to solve this issue since last two days but not succeeded. please help me to solve the issue.

Models code–>

class CodeList(models.Model):
    listname = models.CharField(db_column='LISTNAME', max_length=20, primary_key=True)
    description = models.CharField(db_column='DESCRIPTION', max_length=100)
    adddate = models.DateField(db_column='ADDDATE')
    addwho = models.CharField(db_column='ADDWHO', max_length=20)
    editdate = models.DateField(db_column='EDITDATE')
    editwho = models.CharField(db_column='EDITWHO', max_length=20)

    class Meta:
        db_table ='CODELIST'

    def __str__(self):
        return f"{self.listname}"
    
class CodeLkup(models.Model):
    listname = models.ForeignKey(CodeList, db_column='LISTNAME', on_delete=models.CASCADE)
    code = models.CharField(db_column='CODE', max_length=30, primary_key=True) #, 
    eng_desc = models.CharField(db_column='ENG_DESC', max_length=250)
    bl_desc = models.CharField(db_column='BL_DESC', max_length=250, blank=True)
    adddate = models.DateField(db_column='ADDDATE')
    addwho = models.CharField(db_column='ADDWHO', max_length=20)
    editdate = models.DateField(db_column='EDITDATE')
    editwho = models.CharField(db_column='EDITWHO', max_length=20)

    class Meta:
        db_table = 'CODELKUP'
        unique_together = ('listname', 'code')
    
    def __str__(self):
        return f"{self.code}-{self.eng_desc}"

forms code–>

    class CodeListForm(forms.ModelForm):
        class Meta:
            model = CodeList
    
            fields = ['listname','description']
    
            widgets ={
                'listname' : forms.TextInput(attrs={'class' : 'form-control form-control-sm', 'autocomplete' : 'off'}),
                'description' : forms.TextInput(attrs= {'class' : 'form-control form-control-sm' , 'autocomplete' : 'off'})
            }        
    
        def __init__(self, *args, **kwargs):
            is_edit = kwargs.pop('is_edit', False)
            self.request = kwargs.pop('request', None)
    
            super(CodeListForm, self).__init__(*args, **kwargs)
    
            if is_edit:
                self.fields['listname'].widget.attrs['readonly']=True
        
        def save(self, commit=True):
            codelist = super().save(commit=False)
    
            userid = self.request.session.get("UserId")
    
            if self.instance.pk and CodeList.objects.filter(pk=self.instance.pk).exists():
                codelist.editdate = timezone.now()
                codelist.editwho = userid
            else:
                codelist.adddate = timezone.now()
                codelist.addwho = userid
                codelist.editdate = timezone.now()
                codelist.editwho = userid
            
            if commit:
                codelist.save()
            return codelist   
    
    class CodeLkupForm(forms.ModelForm):
        class Meta:
            model = CodeLkup
            exclude = ['listname']
    
            fields = ['code', 'eng_desc', 'bl_desc']
            widgets = {
                'code': forms.TextInput(attrs={'class': 'form-control form-control-sm', 'autocomplete': 'off'}),
                'eng_desc': forms.TextInput(attrs={'class': 'form-control form-control-sm', 'autocomplete': 'off'}),
                'bl_desc': forms.TextInput(attrs={'class': 'form-control form-control-sm', 'autocomplete': 'off', 'dir': 'rtl'}),
            }
    
        def __init__(self, *args, **kwargs):
            self.is_edit = kwargs.pop('is_edit', False)
            self.request = kwargs.pop('request', None)
            #self.parent_instance = kwargs.pop('parent_instance', None)
            super().__init__(*args, **kwargs)
    
            # Only disable code field if this is an existing object
            if self.is_edit:
                self.fields['code'].widget.attrs['readonly']=True
    
        def save(self, commit=True):
            codelkup = super().save(commit=False)
            userid = self.request.session.get("UserId") if self.request and hasattr(self.request, 'session') else None
            
            if self.instance.pk:
                print("a")
                codelkup.instance = self.instance
                codelkup.editdate = timezone.now()
                codelkup.editwho = userid
            else:
                print("b")
                codelkup.adddate = timezone.now()
                codelkup.addwho = userid
                codelkup.editdate = timezone.now()
                codelkup.editwho = userid
                
            if commit:
                codelkup.save()
            return codelkup
    
    
    class CustomCodeLkupFormSet(BaseInlineFormSet):
        def __init__(self, *args, **kwargs):
            #form_kwargs = kwargs.pop('form_kwargs', {})
            form_kwargs = kwargs.pop('form_kwargs', {})
            self.request = form_kwargs.get('request', None)
            self.is_edit = form_kwargs.get('is_edit', False)
            #kwargs['form_kwargs'] = kwargs.pop('form_kwargs', {})
            kwargs['form_kwargs'] ={'request': self.request, 'is_edit': self.is_edit}
            #kwargs['form_kwargs'].update({'request': self.request, 'is_edit': self.is_edit})
            super().__init__(*args, **kwargs)
    
    
    CodeLkupFormSet = inlineformset_factory(
        CodeList,
        CodeLkup,
        form=CodeLkupForm,
        formset=CustomCodeLkupFormSet,
        extra=1,
        can_delete=True
    )

views code–>

    def edit_system_codes(request, listname):
        is_edit = True
        codelist = get_object_or_404(CodeList, listname=listname)
        instance = codelist
        codelkup =CodeLkup.objects.filter(listname=listname)
    
        if request.method == 'POST':
            form = CodeListForm(request.POST or None, request=request, instance=codelist, is_edit=is_edit)
            formset = CodeLkupFormSet(request.POST or None, instance=codelist, form_kwargs={
                'request': request, 
                'is_edit': True})
    
            if form.is_valid() and formset.is_valid():
                try:
                    master = form.save()
                    formset.instance = master
                    formset.save()
    
                    messages.success(request, _("LBL_SAVED"))
                    return redirect('codes_list')
                
                except IntegrityError as e:
                    error_msg = str(e)
                    print(error_msg)
                    messages.error(request, f'{{ error_msg }}')
                except DatabaseError as e:
                    messages.error(request, f'Database error occured: {str(e)}')
                except Exception as e:
                    messages.error(request, f'unexpected error: {str(e)}')
        else:
            form = CodeListForm(request=request, is_edit=is_edit, instance=codelist)
            formset = CodeLkupFormSet(instance=codelist, form_kwargs={
                'request': request,
                'is_edit': True})
        
        return render(request, 'system_codes/edit_system_codes.html', {'form' : form, 'formset' : formset})

html code–>

<div class="row p-1 pt-0"><!--justify-content-center-->
    <div class="col-md-10">
        <div class="card bg-light">
            <div class="card-header p-1">
                <i class="fa-solid fa-plus fa-lg"></i> {% trans "LBL_EDIT_CODES" %}
            </div>
            <form action="" method="POST" id="edit_system_codes_form">
            {% csrf_token %}
                <div class="card-body p-1">
                    <!--{{ form.as_p }}-->
                     <div class="row mb-2">
                        <div class="col-md-4">
                            <label class="form-label">{% trans "LBL_LISTNAME" %}<span Class="text-danger">*</span></label>
                            {{ form.listname }}
                        </div>
                     </div>
                     <div class="row mb-2">
                        <div class="col-md-10">
                            <label class="form-label">{% trans "LBL_DESCRIPTION" %}<span Class="text-danger">*</span></label>
                            {{ form.description }}
                        </div>
                     </div>
                     {{ formset.management_form }}
                     <div class="row">
                        <div class="col-md-12 text-center">
                            <h4>{% trans "LBL_CODELKUP_DETAIL" %}</h4>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-md-12">
                            <table class="table table-bordered custom-table">
                                <thead class="table-light">
                                    <tr>
                                        <th class="align-middle">{% trans "LBL_CODE" %}</th>
                                        <th class="align-middle">{% trans "LBL_DESCRIPTION" %}</th>
                                        <th class="align-middle">{% trans "LBL_BL_DESCRIPTION" %}</th>
                                        <th>
                                            <button type="button" class="btn btn-sm btn-success"
                                                title="{% trans 'LBL_ADD' %}">
                                                <i class="fa-solid fa-plus"></i>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for f in formset %}
                                    <tr>
                                        <td style="width:20%">{{ f.code }}</td>
                                        <td style="width:40%">{{ f.eng_desc }}</td>
                                        <td style="width:40%">{{ f.bl_desc }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger"
                                                title="{% trans 'LBL_DELETE_BUTTON' %}">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                     </div>
                </div>
                <div class="card-footer text-end pb-0">
                    <button type="button" id="edit_system_codes_save_button" class="btn btn-success">{% trans "LBL_SAVE_BUTTON" %}</button>
                    <a href="{% url 'codes_list' %}" class="btn btn-secondary">{% trans "LBL_CANCEL_BUTTON" %}</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% include 'loader.html' %}

javascript code-->

<script>
    $(document).ready(function(){
        hideLoader();

        $('#edit_system_codes_save_button').click(function(){
            showLoader();
            document.getElementById('edit_system_codes_form').submit();
        })
    });
</script>