Can’t update iframe’s src in the viewer in ASP.NET

In shared folder of ASP.NET C#, I create a .cshtml which defines a button that can GET data from an API. I would like to generate an url and use it to update an iframe of a viewer.

        function callAPI(searchText) {
            $.ajax({
                url: '/Home/CallAPI',
                data: { Text: searchText },
                type: "GET",
                success: function (result) {
                    var data = JSON.stringify(result); // server response
                    found_data = data;
                    $(result).each(function () {
                        if (this.status == "found") {
                            alert("Found!" + data);
                            var frameElement = document.getElementById("SearchingMap");
                            lon = result.results[0].lon;
                            lat = result.results[0].lat;
                            new_searching_url = "http://xx.xxx.xxx.xxx:8080/styles/osm-bright-tw/#17/" + lat.toString() + "/" + lon.toString();
                            console.log(frameElement.src); // undefined
                            frameElement.src = new_searching_url;
                            console.log(frameElement.src); // "http://xx.xxx.xxx.xxx:8080/styles/osm-bright-tw/#17/.../..."
                        }
                        else {
                            alert("Sorry! Not found");
                        }
                    });
                },
                error: function () {
                    alert("Sorry! Not found");
                }
            });
        }

However, the iframe in the viewer, which named SearchingMap.cshtml, doesn’t updated.

@{ViewBag.Title = "SearchingMap";}
<div id="SearchingMap">
    <h3>Searching map</h3>
    <iframe src="http://xx.xxx.xxx.xxx:8080/styles/osm-bright-tw/#10.01/25.0709/121.5008" frameborder="0" scrolling="no">Your browser doesn't support iframe.</iframe>
</div>

Why can’t it work? How can I update the iframe of a viewer?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here the iframe did not have the id SearchingMap so all javascript code fails because of this line:

var frameElement = document.getElementById("SearchingMap");

Just add this id, on your iframe

 <iframe id="SearchingMap" ...

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0