परिचय

बस एक त्वरित एक, मुझे एक काम में आवश्यकता थी 'clear' URL से पैरामीटर करने की क्षमता के लिए. यह उपयोगी है जब आपके पास कई पैरामीटर्स हैं, और आप उनमें से एक या अधिक को हटाना चाहते हैं (उदाहरण के लिए खोज फिल्टर के लिए उदाहरण के लिए).

समस्या

मेरे मौजूदा परियोजना का प्रयोग पुराने-एड क्वैरी वाक्यांशों (यह एक प्रशासक स्थल है ताकि 'निक' यूआरएल के प्रशंसकों की आवश्यकता नहीं है). तो मैं इस तरह एक यूआरएल के साथ हवा.

/products?category=electronics&search=wireless+headphones&sort=price_desc&inStock=true&page=3

अब ये हर पृष्ठ के साथ भिन्‍न हो सकते हैं, इसलिए मैं पृष्ठ URL में एक बॅशनल के साथ समाप्त हो सकता हूँ और मुझे उन्हें बिना एक गुच्छा लिखना होगा ।

आप इसे किसी भी इनपुट नियंत्रण का भाग के रूप में कर सकते हैं जो आप इस्तेमाल करते हैं उदाहरण के लिए हर चेक बक्से (या एक फैंसी स्थल शैली साफ प्रतीक) के बाद का उपयोग कर सकते हैं, लेकिन आप इस तकनीक का उपयोग उन लोगों के लिए भी कर सकते हैं. लेकिन, इस मामले में मैं दो मुख्य बातें करना चाहता था:

1. पैरामीटर साफ करने में अक्षम
2. पैरामीटरों की सूची साफ कर सकते हैं.
3. सभी पैरामीटर्स साफ कर सकते हैं
4. HMAX के साथ पोस्ट किया है
5. क्या इसे मेरी लोडिंग सूचक इस्तेमाल किया है मेरी लोडिंग सूचक.

हल

अपनी परियोजना में मैं पहले से ही उपयोग में

• एचएमएमएक्स
• यू. एस.
• यु. पू.
• टिला- पाइगोनोcolombia. kgm
• गुलबहार

सो मेरे समाधान पर ध्यान केन्द्रित किया गया कि इन्हें अच्छी तरह देख लें, कम - से - कम कोड के साथ कार्यान्वित करें ।

टैग सहायक

मेरे टैग मददर बहुत सरल है, मैं सब एक बनाने के लिए है <a> कुछ गुणों के साथ टैग...... मैं बाद में आगामी मॉड्यूल में पारित कर दिया जाएगा और हम कर रहे हैं.

[HtmlTargetElement("clear-param")]
public class ClearParamTagHelper : TagHelper
{
    [HtmlAttributeName("name")]
    public string Name { get; set; }
    
    [HtmlAttributeName("all")]
    public bool All { get; set; }= false;
    
    [HtmlAttributeName("target")]
    public string Target { get; set; } = "#page-content";

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";
        output.Attributes.SetAttribute("x-data", "window.queryParamClearer({})");

        if (All)
        {
        output.Attributes.SetAttribute("x-all", All);
        }
        else
        {
            output.Attributes.SetAttribute("x-param", Name);
        }
        output.Attributes.SetAttribute("data-target", Target);
        output.Attributes.SetAttribute("x-on:click.prevent", "clearParam($event)");
        output.Content.SetHtmlContent(@"
            <div class='w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full'>
                <i class='bx bx-x text-lg'></i>
            </div>");
    }
}

पैरामीटर्स

उपयोग में यह इस तरह दिखता है, 'सभी पैरामीटर्स' के लिए पहले. तो मैं सिर्फ पर देखो Context.Request.Query अगर वहाँ किसी भी पैरामीटर्स है मैं थोड़ा रेंडर x उपयोक्ता को सभी पैरामीटर्स को साफ करने के लिए प्रतीक.

@if(Context.Request.Query.Any())
{
<label class="param-label">
    <clear-param all="true"></clear-param>
    clear all
</label>
}
</div>

नाम के लिए वैकल्पिक रूप से मैं यह कर सकते हैं

<div class="param-label">
    <clear-param name="myParam"></clear-param>
    <p>My Param: @Model.MyParam</p>
</div>

कौन रास्ता साफ करेगा कि एकल पैरामीटर.

या

<div class="param-label">
    <clear-param name="myParam1,myParam2,myParam3"></clear-param>
    <p>My Param: @Model.MyParam1</p>
    <p>My Param: @Model.MyParam2</p>
    <p>My Param: @Model.MyParam3</p>
</div>

फिर यह वाक्यांश में से सभी नाम पैरामीटरों को साफ करता है.

वह target गुण

YOu सम भी एक में पास करने के लिए विकल्प है target गुण जो प्रयोग में लिया जाएगा hx-target गुण. यह उपयोगी है यदि आप इस पृष्ठ के विशिष्ट भाग को नई सामग्री के साथ अद्यतन करना चाहते हैं.

<div class="param-label">
    <clear-param name="myParam" target="#my-thing"></clear-param>
    <p>My Param: @Model.MyParam</p>
</div>

मेरे मामले में (क्योंकि मैंने इसे लिखा था) मैं अपने लक्ष्य को डिफ़ॉल्ट रूप में #page-content पानी ।

    [HtmlAttributeName("target")]
    public string Target { get; set; } = "#page-content";

परिणाम

इसका परिणाम निम्न एचटीएमएल के रेंडरिंग में:

• सभी: तो हम HTML के साथ मिलता है x-all गुण तथा नहीं x-param गुण.

<a x-data="window.queryParamClearer({})" x-all="True" data-target="#page-content" x-on:click.prevent="clearParam($event)">
    <div class="w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full">
        <i class="bx bx-x text-lg"></i>
    </div>
</a>

• एकल हम HTML के साथ मिलता है x-param गुण तथा नहीं x-all गुण.

<a x-data="window.queryParamClearer({})" x-param="myParam" data-target="#page-content" x-on:click.prevent="clearParam($event)">
    <div class="w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full">
        <i class="bx bx-x text-lg"></i>
    </div>
</a>

• मल्टीपल हम HTML के साथ मिलता है x-param विरामचिह्न अलग वाक्यांश तथा कोई नहीं सहित गुण x-all गुण.

<a x-data="window.queryParamClearer({})" x-param="myParam1,myParam2,myParam3" data-target="#page-content" x-on:click.prevent="clearParam($event)">
    <div class="w-6 h-6 flex items-center justify-center bg-red-600 text-white rounded-full">
        <i class="bx bx-x text-lg"></i>
    </div>
</a>

इन दोनों में से हरेक के पास भी अटूट विश्‍वास है x-data और x-on:click.prevent आवधिक मॉड्यूल को सेट करने के लिए इस्तेमाल किया जाता है तथा पैरामीटरों को साफ करने के लिए फंक्शन को फोन करता है.

हम देखेंगे कि कैसे अगले काम करता है...

मुश्‍किलों का सामना करने के लिए आप क्या कर सकते हैं?

यह निश्‍चित ही अचूकता के प्रयोग से संभव किया जा सकता है हमारे निवेदन और HMMMX को पूरा करने के लिए ।

जैसा कि आप नीचे दिए गए कोड में देख सकते हैं, मेरे पास एक सरल मॉड्यूल है जो लेता है path वर्तमान पृष्ठ का तथा फिर प्रयोग करें URL क्वैरी स्ट्रिंग की व्याख्या करने के लिए एपीआई (आप किसी भी कारण से आगे बढ़ सकते हैं:)

तो हम क्लिक किया गया था कि तत्व मिलता है और देखते हैं कि क्या यह है x-all गुण; यदि यह होता है तो हम यूआरएल से सभी पैरामीटर्स को मिटा देते हैं, अन्यथा हम विभाजित होते हैं x-param विरामचिह्न द्वारा गुण तथा उन सभी पैरामीटर्स को मिटा दें.

फिर हम अद्यतन क्वैरी स्ट्रिंग के साथ एक नया यूआरएल तैयार करते हैं और HMTX का प्रयोग उस यूआरएल के लिए निवेदन करने के लिए करते हैं.

export function queryParamClearer({ path = window.location.pathname }) {
    return {
        clearParam(e) {
            const el = e.target.closest('[x-param],[x-all]');
            if (!el) return;

            const url = new URL(window.location.href);

            if (el.hasAttribute('x-all')) {
                // → delete every single param
                // we copy the keys first because deleting while iterating modifies the collection
                Array.from(url.searchParams.keys())
                    .forEach(key => url.searchParams.delete(key));
            } else {
                // → delete only the named params
                (el.getAttribute('x-param') || '')
                    .split(',')
                    .map(p => p.trim())
                    .filter(Boolean)
                    .forEach(key => url.searchParams.delete(key));
            }

            const qs = url.searchParams.toString();
            const newUrl = path + (qs ? `?${qs}` : '');

            showAlert(newUrl);
            htmx.ajax('GET', newUrl, {
                target: el.dataset.target || el.getAttribute('hx-target') || 'body',
                swap: 'innerHTML',
                pushUrl: true
            });
        }
    };
}

//In your entry point / anywhere you want to register the module
import { queryParamClearer } from './param-clearer.js'; // webpackInclude: true

window.queryParamClearer = queryParamClearer;

वह showAlert स्वACAS2 का उपयोग कर फंक्शन

तुम भी ध्यान देंगे कि मैं एक फोन करता हूँ showAlert फंक्शन. यह मैं अपने प्रोजेक्ट में इस्तेमाल करता हूँ स्वीवेशनल2 लोड संकेतक के आसपास सिर्फ एक सरल कवर है. आप इसे बदल सकते हैं जो कुछ भी आप करना चाहते हैं. '

यह कम से कम कोमल है पिछली बार जब हम इसे देखा___ तो मैं निकाल सकता हूँ showAlert फंक्शन तथा इसे बाह्य मॉड्यूल में उपलब्ध बनाएँ. जो मुझे यह दोनों में उपयोग करते हैं param-clearer मॉड्यूल और है hx-indicator मॉड्यूल.

export function registerSweetAlertHxIndicator() {
    document.body.addEventListener('htmx:configRequest', function (evt) {
        const trigger = evt.detail.elt;

        const indicatorAttrSource = getIndicatorSource(trigger);
        if (!indicatorAttrSource) return;

        // ✅ If this is a pageSize-triggered request, use our custom path
        let path;
        if (evt.detail.headers?.['HX-Trigger-Name'] === 'pageSize') {
            path = getPathWithPageSize(evt.detail);
            console.debug('[SweetAlert] Using custom path with updated pageSize:', path);
        } else {
            path = getRequestPath(evt.detail);
        }

        if (!path) return;
        evt.detail.indicator = null;
        showAlert(path);
    });
}

export function showAlert(path)
{
    const currentPath = sessionStorage.getItem(SWEETALERT_PATH_KEY);

    // Show SweetAlert only if the current request path differs from the previous one
    if (currentPath !== path) {
        closeSweetAlertLoader();
        sessionStorage.setItem(SWEETALERT_PATH_KEY, path);


        Swal.fire({
            title: 'Loading...',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            theme: 'dark',
            didOpen: () => {
                // Cancel immediately if restored from browser history
                if (sessionStorage.getItem(SWEETALERT_HISTORY_RESTORED_KEY) === 'true') {
                    sessionStorage.removeItem(SWEETALERT_HISTORY_RESTORED_KEY);
                    Swal.close();
                    return;
                }

                Swal.showLoading();
                document.dispatchEvent(new CustomEvent('sweetalert:opened'));

                // Set timeout to auto-close if something hangs
                clearTimeout(swalTimeoutHandle);
                swalTimeoutHandle = setTimeout(() => {
                    if (Swal.isVisible()) {
                        console.warn('SweetAlert loading modal closed after timeout.');
                        closeSweetAlertLoader();
                    }
                }, SWEETALERT_TIMEOUT_MS);
            },
            didClose: () => {
                document.dispatchEvent(new CustomEvent('sweetalert:closed'));
                sessionStorage.removeItem(SWEETALERT_PATH_KEY);
                clearTimeout(swalTimeoutHandle);
                swalTimeoutHandle = null;
            }
        });
    }
}

//Register it
import { registerSweetAlertHxIndicator, showAlert } from './hx-sweetalert-indicator.js';
registerSweetAlertHxIndicator();
window.showAlert = showAlert;

यह तो बस एक अनुस्मृति है, उसके लिए जो डरे, path चेतावनी को छिपाने के लिए कुंजी के रूप में पता है.

एचएमएमएक्स

अंत में, हम इस्तेमाल करते हैं htmx.ajax निवेदन करने के लिए. यह हम अद्यतन क्वैरी वाक्यांश के साथ बनाया नए यूआरएल के लिए एक सरल प्राप्त निवेदन है.

   htmx.ajax('GET', newUrl, {
                target: el.dataset.target || el.getAttribute('hx-target') || 'body',
                swap: 'innerHTML',
                pushUrl: true
            });

ऑन्टियम

यह यूआरएल पैरामीटरों को साफ करने का एक सरल तरीका है । यह आपको कम - से - कम कोड के साथ सभी पैरामीटर्स, या सिर्फ विशिष्ट लोगों को स्पष्ट करने देता है ।