Update ajax url parameter value in jquery

Question

I have a dropdownlist which when selected, needs to update the url, so I could send this updated url via jquery ajax and get the updated result and post it back. The problem i am running into now is I am not able to change one of the query string parameter value via my jquery call. How would i go about doing that. Please see below.

<div class="col-sm-5">
                @{
                    var href = Url.Action<MassUploadIndexController>(c => c.LoadTemplateProperties(Model.ClientId, Model.UploadType, @property.Name, @property.SelectedValueId));
                }
                @if (!property.IsEnabled)
                {
                    @Html.UI().DropDownList($"Properties[{@property.Name}]", selectList: @property.Options.Select(o => new SelectListItem { Text = o.Text, Value = o.Value, Selected = o.Value == @property.SelectedValueId.ToString() }), htmlAttributes: new { @class = "propertySelector", @disabled = "disabled", @data_reloadUrl = href })
                }
                else
                {
                    @Html.UI().DropDownList($"Properties[{@property.Name}]", selectList: @property.Options.Select(o => new SelectListItem { Text = o.Text, Value = o.Value, Selected = o.Value == @property.SelectedValueId.ToString() }), htmlAttributes: new { @class = "propertySelector", @data_reloadUrl = href })
                }
            </div>

And the script

$(document).on("change", ".propertySelector", function (e) {
            var link = $(this).attr('data-reloadUrl');
            link.val().replace("selectedValueId=00000000-0000-0000-0000-000000000000", $(this).val());
            alert(link);
            $.ajax({
                url: link,
                    success: function (data) {
                        var newHtml = $(data);
                        $("#selectpropertycontainer").html(newHtml);
                    }
            });
        });

The url that I see on the console is /site1/client/77089cca-c09d-419e-8978-72aef1133c8e/upload/loadproperties?uploadType=metadata&name=ProgramId&selectedValueId=00000000-0000-0000-0000-000000000000

The value I want to change when the dropdown value gets selected is the selectedValueId. I want to update the value to the correct guid from the dropdownlist selected value.

Let me know if you need more info. Thanks!

Possible duplicate of [Change URL parameters](https://stackoverflow.com/questions/1090948/change-url-parameters) — freedomn-m, Oct 23 '19 at 16:25

score 0 · Accepted Answer · answered Oct 23 '19 at 16:30

Your question boils down to these lines:

var link = $(this).attr('data-reloadUrl');
link.val().replace("selectedValueId=00000000-0000-0000-0000-000000000000", $(this).val());

When you use .attr it will (in this case) return a string, so you don't want link.val().replace(
When you use .replace it doesn't replace in-place, it returns a new string with the new value, so you need somewhere for it to go
If you replace "selectedValueId=[guid]" with "[guid]" you'll lose "selectedValueId="

Giving:

var link = $(this).attr('data-reloadUrl')
                  .replace("selectedValueId=00000000-0000-0000-0000-000000000000",
                           "selectedValueId=" + $(this).val());

Thank you so much. That worked! Also +1 for the explanation. — bladerunner, Oct 23 '19 at 17:47

Update ajax url parameter value in jquery

1 Answers1