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

Tags: , , , ,

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) {
                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 = "" + lat.toString() + "/" + lon.toString();
                            console.log(frameElement.src); // undefined
                            frameElement.src = new_searching_url;
                            console.log(frameElement.src); // ""
                        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="" frameborder="0" scrolling="no">Your browser doesn't support iframe.</iframe>

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


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" ...

Source: stackoverflow