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. However, the iframe in the viewer, which named SearchingMap.cshtml, doesn't updated. Why can't it work? How can I update the iframe of

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?

Answer

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

Advertisement

Answer