在DNN中如何将自定义JS代码关联至新建页面？

Hey there, let's get your custom script up and running in your DNN page. I’ll walk you through the most reliable methods to inject your code, plus fix a few gaps in your current script that might be causing issues.

First: Fixes to Your Script #

Before we dive into DNN-specific injection, let’s tweak your code to ensure it’s robust and ready to work:

• Wrap it in $(document).ready() to make sure the DOM is fully loaded before your script runs (this is a common reason elements can’t be found)
• Add logic to actually push your package object into the CheckedArray (you defined it but weren’t using it)
• Improve quantity validation to avoid non-numeric values
• Add a click handler example to trigger your function (since you need to call it somehow)

Here’s the revised code:

$(document).ready(function() {
    var CheckedArray = [];

    function addPackageDataToList(packageId) {
        if (packageId == '1') {
            var qtyInput = $('#txtPackageQuantity' + packageId);
            var qty = qtyInput.val();
            
            // Validate quantity is a positive number
            if (qty && !isNaN(qty) && parseInt(qty) > 0) {
                var obj = {
                    PackageName: "Package 1",
                    Qty: parseInt(qty),
                    Price: 50
                };
                // Add the package object to your array
                CheckedArray.push(obj);
                // Optional: Log to console for debugging
                console.log("Updated package list:", CheckedArray);
            } else {
                alert("Please add valid quantity");
            }
        }
    }

    // Example: Bind function to a button click (adjust the selector to match your button)
    $('#btnAddPackage1').on('click', function() {
        addPackageDataToList('1');
    });
});

Method 1: Inject via DNN Page Settings (Recommended for Page-Specific Scripts) #

This is the easiest way to add script to a single DNN page:

1. Go to your new page and click Edit Page (top-right corner)
2. Open the Page Settings menu (gear icon)
3. Navigate to the Advanced Settings tab
4. Scroll down to the Header/Footer section
5. Paste your revised script into the Footer text box (adding it to the footer ensures jQuery loads first, since DNN includes jQuery by default)
6. Wrap your code in <script> tags, like this:

   <script>
       // [Paste the revised JavaScript code here]
   </script>
   

7. Save the settings and refresh the page.

Method 2: Use an HTML Module #

If you prefer to keep the script tied to a specific section of the page:

1. Add an HTML Module to your page (from the Add Module menu)
2. Edit the module and switch to Source mode (the <> icon)
3. Paste your script wrapped in <script> tags (same as above)
4. Save the module.

Note: If your script relies on elements in other modules, make sure the HTML module loads after those elements (you can adjust module order via the Page Settings > Modules tab).

Troubleshooting Why Your Previous Attempts Failed #

If you still run into issues, check these common pitfalls:

• jQuery Load Order: DNN loads jQuery by default, but if your script ran before jQuery was loaded, it would throw errors. Using the footer or $(document).ready() fixes this.
• Element Selectors: Double-check that #txtPackageQuantity1 and your trigger button actually exist on the page (use browser dev tools to inspect elements).
• DNN Script Compression: Sometimes DNN’s script minification/merging can cause conflicts. To test, go to Settings > Site Settings > Performance and temporarily disable Compress CSS and Combine Scripts, then refresh the page.
• Function Trigger: Ensure your addPackageDataToList function is being called (e.g., via a button click, form submission, or other event).

内容的提问来源于stack exchange，提问作者Hardik Masalawala