# यू.एस.एल.एस.एक्स ने टैग मदद के लिए सक्षम किया

<datetime class="hidden">2025-04-23T19:30</datetime>

<!--category-- Javascript, HTMX, Alpine.js, ASP.NET Core -->
# परिचय

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

[TOC]

# समस्या

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

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

```

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

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

1. पैरामीटर साफ करने में अक्षम
2. पैरामीटरों की सूची साफ कर सकते हैं.
3. सभी पैरामीटर्स साफ कर सकते हैं
4. HMAX के साथ पोस्ट किया है
5. क्या इसे मेरी लोडिंग सूचक इस्तेमाल किया है [मेरी लोडिंग सूचक](https://www.mostlylucid.net/blog/usingsweetalertforhxindicators).

# हल

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

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

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

## टैग सहायक

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

```csharp
[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` उपयोक्ता को सभी पैरामीटर्स को साफ करने के लिए प्रतीक.

```html

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

```

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

```html

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

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

या

```html

<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` गुण. यह उपयोगी है यदि आप इस पृष्ठ के विशिष्ट भाग को नई सामग्री के साथ अद्यतन करना चाहते हैं.

```html

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

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

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

```

### परिणाम

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

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

```html
<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` गुण.

```html
<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` गुण.

```html
<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 का प्रयोग उस यूआरएल के लिए निवेदन करने के लिए करते हैं.

```javascript
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 लोड संकेतक के आसपास सिर्फ एक सरल कवर है. आप इसे बदल सकते हैं जो कुछ भी आप करना चाहते हैं. '

यह कम से कम कोमल है [पिछली बार जब हम इसे देखा](https://www.mostlylucid.net/blog/usingsweetalertforhxindicators)___ तो मैं निकाल सकता हूँ `showAlert` फंक्शन तथा इसे बाह्य मॉड्यूल में उपलब्ध बनाएँ. जो मुझे यह दोनों में उपयोग करते हैं `param-clearer` मॉड्यूल और है `hx-indicator` मॉड्यूल.

```javascript
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` निवेदन करने के लिए. यह हम अद्यतन क्वैरी वाक्यांश के साथ बनाया नए यूआरएल के लिए एक सरल प्राप्त निवेदन है.

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

# ऑन्टियम

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