jQuery Forum

I am unable to set the href of an <a> control using javascript or jQuery in my asp.net application.  

I recently installed jQuery version 3.2.1 and have been attempting to dynamically set values of the controls within an aspx modal popup control.  All seem to be working except the one to change the href of an <a> control.  Here is my function:

       function PopAddWebLink(thisNode){
            clearPanel('cphMain_pnlAddWeblink_Pop');
       
            // Copy data into Popup
            var thisTaskID = thisNode.Attributes['TaskID'];
            var thisText = thisNode.Text;
            var strLink = "http://WebSearch.aspx?TaskID=" + thisTaskID;

            //Set href of <a>'lnkWebSearch' to strLink
            document.getElementById('lnkWebSearch').href = 'WebSearch.aspx?TaskID=' + thisTaskID;
            //$('#lnkWebSearch').attr('href', strLink);
            //document.getElementById('lnkWebSearch').href = strLink;

            //$('#lnkWebSearch').prop('href', strLink);

            $('#cphMain_lblAddWeblink').text(thisText);

            document.getElementById('cphMain_hidAddWeblinkTaskID').value = thisNode.Attributes['TaskID'];

            $find('mpeAddWeblink').show();
        }

And here is the modal popup (as rendered):

    <div id="cphMain_pnlAddWeblink_Pop" class="popupPanel" style="display:none">
 
       <input type="hidden" name="ctl00$cphMain$hidAddWeblinkTaskID" id="cphMain_hidAddWeblinkTaskID" />
       <center><h3><span id="cphMain_lblAddWeblink"></span></h3></center>
       <table width="100%">
            <tr>
                <td style="width:50%"><b>URL</b></td>
                <td><b>Link Name (optional)</b></td>
            </tr>
            <tr>
                <td><input name="ctl00$cphMain$txtLinkUrl01" type="text" id="cphMain_txtLinkUrl01" style="width:100%;" /></td>
                <td><input name="ctl00$cphMain$txtLinkName01" type="text" id="cphMain_txtLinkName01" style="width:100%;" /></td>
            </tr>
             <tr>
                <td><input name="ctl00$cphMain$txtLinkUrl02" type="text" id="cphMain_txtLinkUrl02" style="width:100%;" /></td>
                <td><input name="ctl00$cphMain$txtLinkName02" type="text" id="cphMain_txtLinkName02" style="width:100%;" /></td>
            </tr>
             <tr>
                <td><input name="ctl00$cphMain$txtLinkUrl03" type="text" id="cphMain_txtLinkUrl03" style="width:100%;" /></td>
                <td><input name="ctl00$cphMain$txtLinkName03" type="text" id="cphMain_txtLinkName03" style="width:100%;" /></td>
            </tr>
             <tr>
                <td><input name="ctl00$cphMain$txtLinkUrl04" type="text" id="cphMain_txtLinkUrl04" style="width:100%;" /></td>
                <td><input name="ctl00$cphMain$txtLinkName04" type="text" id="cphMain_txtLinkName04" style="width:100%;" /></td>
            </tr>
             <tr>
                <td><input name="ctl00$cphMain$txtLinkUrl05" type="text" id="cphMain_txtLinkUrl05" style="width:100%;" /></td>
                <td><input name="ctl00$cphMain$txtLinkName05" type="text" id="cphMain_txtLinkName05" style="width:100%;" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" name="ctl00$cphMain$btnSaveLinks" value="Save Links" id="cphMain_btnSaveLinks" style="width:40%;" />
                    <input type="submit" name="ctl00$cphMain$btnSaveLinksMore" value="Save Links, then Search for More" id="cphMain_btnSaveLinksMore" style="width:55%;" />
                    <div id="cphMain_UpdateProgress5" style="display:none;">
  
                            <img src="images/progress.gif" alt="" />&nbsp;Updating...
                       
 </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                     <input type="submit" name="ctl00$cphMain$btnCancelLinks" value="Exit Without Saving" id="cphMain_btnCancelLinks" style="width:100%;" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <a id="lnkWebSearch" >
                    Search the Web
                    </a>
                </td>
            </tr>
        </table>
  
</div>
  

"thisNode" references the node of a Telerik Treeview control which the user has right-clicked to get a popup menu from which, if they select "Add Web Link", the function is launched.  

The uncommented-out line immediately following the "//Set href of <a>..." comment is the line used in the version currently running correctly on the internet; however, it has no effect when run in Visual Web Developer.  The three lines following it, when uncommented-out, also seem to be ignored.  The rest of the function appears to work as expected.

Your help is much appreciated.

I am developing an ASP.net application that includes several modal popup forms.  Each of these contains several textboxes, some hidden fields, some checkboxes and one or two dropdown lists, and before any of these popups are displayed, I need to clear any data that may have been previously entered into these controls.  

I have previously had a separate javascript function for clearing each of these popups which accessed each control by name and then set it to the desired default value.  This works okay but is quite verbose and unwieldy.  I would like to use jQuery to create a single function that would select all controls of each type (textbox, hidden, checkbox and dropdown list) inside the div whose id is passed to the function, and then reset them.

So far, I have succeeded with textboxes and checkboxes, but I'm having no luck with dropdown lists, which need to all be set to selectedIndex = 0.  Can somebody show me some code that would effectively reset all dropdown lists within a given div?

Attached is the code from the test site I have been using to develop this function

testing.js:

/// <reference path="jquery-3.2.1.js" />

function PassTest(ThisDivID) {

    var DivID = '#' + ThisDivID;

    // Set all textboxes to 'Hello!'
    $(DivID).find("input[type=text]").val('Hello!');
    // Set all checkboxes checked
    $(DivID).find('input[type=checkbox]').each(function () {
        this.checked = false;
    });

    // Set selectedIndex of each dropdown list to 0 -- THIS IS THE PART THAT DOESN'T WORK.
    $(DivID).find("input[type=select]").each(function () {
        this.get(0).selectedIndex = '0';
    });

    // Make sure function has run all the way to the end
    alert('penner');

}

-----------------

jsTest.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="jsTest.aspx.vb" Inherits="jsTest" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Javascript Test</title>
    <script src="Testing.js"></script>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="MyDiv" runat="server">
        <asp:CheckBox ID="CheckBox1" runat="server" Checked="false" Text="Checkbox No. 1"/><br />
        <asp:CheckBox ID="CheckBox2" runat="server" Checked ="false" Text="Checkbox No. 2"/><br />
        Textbox #1:  <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox><br />
        Textbox $2:  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
        <asp:DropDownList ID="mydropdownlist" runat="server">
            <asp:ListItem Text="Item 0" Value="0" />
            <asp:ListItem Text="Item 1" Value="1" />
            <asp:ListItem Text ="Item 2" Value="2" />
            <asp:ListItem Text ="Item 3" Value="3" />
        </asp:DropDownList>
        <br />
        <input type="button"  value="ThisButton" id="ThisButton" onclick="PassTest('<%=MyDiv.ClientID %>'); return false;" />
    </div>
    </form>
</body>
</html>