Replace iFrame with Div Div not working - getting Javascript runtime errors

Question

User706407582 posted

Hi
We are in a process of replacing i-frames with Div in our application (ASP.NET,C# framework 4.6.2) . Some how we were able to render pages in Div too.
But when we do any Postback action such as (Button click, Dropdown item change, navigate with hyperlink or any post back action)
nothing happens. When checked with DOM explorer, there is java script runtime error for null references.
We are doing ajax call to render the page inside a DIV using below code -

$(document).ready(function () {

        $.ajax({

            url: url,

            success: function (html) {

             $("#content").html(html);

            }

        });

     });

Basically any server side code is not working which is related with post back. When I tried to select a dropdown rendered in iframe replaced Div, server side code for drop down change is not get triggered, instead Metadata sccript code giving error as shown below.
"Unhandled exception 0x800a138f - Javascript runtime error: Unable to set property 'value' of undefined or null reference"

Meta data code ->

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

    theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//

 

function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {

    this.eventTarget = eventTarget;

    this.eventArgument = eventArgument;

    this.validation = validation;

    this.validationGroup = validationGroup;

    this.actionUrl = actionUrl;

    this.trackFocus = trackFocus;

    this.clientSubmit = clientSubmit;

}

Can someone please suggest what could be going wrong  here ? Immediate help will be highly appreciated. 

Answer 1

User475983607 posted

This error...

sarang1183

"Unhandled exception 0x800a138f - Javascript runtime error: Unable to set property 'value' of undefined or null reference"

means the code is trying to do the set null.value = "someValue" .  Generally, there is a link in the with this error that points to the exact line of code causing the error.

sarang1183

Can someone please suggest what could be going wrong  here ? Immediate help will be highly appreciated. 

I'm guessing the iFrame loaded a JavaScript application and the new design does not load the same JavaScript application.  You'll need to make sure the new design is referencing the same JS files the iFrame referenced.

The following code replaces HTML content but does not load JavaScript files.  It also does not wire up any event handlers.

        $.ajax({
            url: url,
            success: function (html) {
             $("#content").html(html);
            }
        });

Being that the AJAX function above runs when the page loads, you should move this logic to the server rather than making a second request.

Keep in mind that an iFrame is a separate Window.  You can't just replace an iFrame with a div and expect everything to "just" work.  You'll need to combine the two pages and that work should be done on the server - most likely.