[RESOLVED]Strange behavior from Create View

I have an ASP.Net MVC 4 web app.  I  have this one particular controller.  The index view for this controller has three partial views on it.  The first partial view always loads when the view is called.  It uses a renderAction html helper.  The other two
are called as a result of ajax function calls within the create view.

The index view has a JQuery datatables library included which is built using JqueryUI.  There are no JQueryUI components on the Create View.

As the result of a button click, the Create view calls a function which first calls one ajax function to save the data to the database, then another ajax call to the action used by the renderAction to build the first partial view.  This function was devised
months ago and has been running without an issue.   Then suddenly today, the button click would save the data, then open the index view.  This was not the expected behavior.  When I stepped through the code line by line I found that the pratial view was in
fact bveing loaded into the proper location on the create view.  And in fact when doing so the proper window opened in IE.  But then a bunch of additional code in modernizer, Jquery-1.8.2 and jQuery-UI-1.8.24 started running and when it completed it opened
on the Index view.  I have no idea how this happened.  See the code below

First I called an ajax like so

    $(function () {
        var PopulatePRs = function () {
            ////debugger
            var sURL = '@Url.Action("CreatePurchaseRequest", "AJAXFunctions")';
            var goURLid = 0;
            var form = $("#PRCreate");
            var bError = false;
            var sResultMessage = '';

            //alert(options.url);
            $.ajax({
                url: sURL,
                type: 'POST',
                data: form.serialize(),
                cache: false,
                async: false,
                dataType: 'json',
                //contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    debugger
                    if (data != null) {
                        $(data).each(function () {
                            goURLid = data;
                        });
                    }
                    else {
                        debugger
                        returnedInfo = 'An Error has occurred. Your new PR was not saved to the database.';
                        bError = true;
                        goURLid = 0;
                    }
                },
                error: function () {
                    debugger
                    returnedInfo = 'An Error has occurred. Your new PR was not saved to the database.';
                    bError = true;
                    goURLid = 0;
                }
            });

This works fine.   I have verified in the database that the ajax call was successful.  Then the following ajax function is called to call the action that rebuilds the partial view.

           debugger
            //if (!bError) {
            var sURLRepost = '@Url.Action("PurchaseRequestTable", "PR")' + '/' + goURLid;
            var options = {
                url: sURLRepost,
                type: "get",
                async: false
            };
            //alert(options.url);
            $.ajax(options).done(function (data) {
                debugger
                $("#PRtableView").replaceWith(data);
            });

            if (!bError) {
                sResultMessage = "The new Purchase Request has been saved to the database.nClick below to add CLINs and CDRLs.";
                $("#PRCreated").text(sResultMessage).toggle();
            }
            else {
                sResultMessage = returnedInfo;
                $("#PRCreated").text(sResultMessage).toggle();
            }

The action is properly called the ajax call which I was able to verify by putting a breakpoint in the action and stepping through it and I was able to hover over the "data" variable and verify that the proper html was being returned to replace $("#PRtableView"). 
Finally I was able to verify the sResultMessage was replacing the text of $("#PRCreated").  Then I actually saw the window open looking as it is supposed to.

Then the part of modernizer that starts with the below code ran:

window.Modernizr = (function( window, document, undefined ) {


    var version = '2.6.2',


    Modernizr = {},

    /*>>cssclasses*/

    // option for enabling the HTML classes to be added

    enableClasses = true,

    /*>>cssclasses*/

Then in JQuery-1.8.2 the function that starts with this:

(function( window, undefined ) {
var
	// A central reference to the root jQuery(document)
	rootjQuery,

	// The deferred used on DOM ready
	readyList,

	// Use the correct document accordingly with window argument (sandbox)
	document = window.document,
	location = window.location,
	navigator = window.navigator,

	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

Then this function

(function( $, undefined ) {


// prevent duplicate loading

// this is only a problem because we proxy existing functions

// and we don't want to double proxy them

$.ui = $.ui || {};

if ( $.ui.version ) {

	return;

}

Then this function

function( $, undefined ) {



// jQuery 1.4+

if ( $.cleanData ) {

	var _cleanData = $.cleanData;

	$.cleanData = function( elems ) {

		for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {

			try {

				$( elem ).triggerHandler( "remove" );

			// http://bugs.jquery.com/ticket/8235

			} catch( e ) {}

		}

		_cleanData( elems );

	};

} else {

	var _remove = $.fn.remove;

	$.fn.remove = function( selector, keepData ) {

		return this.each(function() {

			if ( !keepData ) {

				if ( !selector || $.filter( selector, [ this ] ).length ) {

					$( "*", this ).add( [ this ] ).each(function() {

						try {

							$( this ).triggerHandler( "remove" );

						// http://bugs.jquery.com/ticket/8235

						} catch( e ) {}

					});

				}

			}

			return _remove.call( $(this), selector, keepData );

		});

	};

}

Then in JQuery-ui-1.8.24

(function( $, undefined ) {


var mouseHandled = false;

$( document ).mouseup( function( e ) {

	mouseHandled = false;

});

then

function( $, undefined ) {


$.widget("ui.draggable", $.ui.mouse, {

	widgetEventPrefix: "drag",
...

then

(function( $, undefined ) {


$.widget("ui.droppable", {

	widgetEventPrefix: "drop",

	options: {

		accept: '*',
....

and a few more $.widget methods.

And when all of these finished, then the index view was opened.

Like I said it did not do that from a couple of months ago up to a couple of days ago.  It did not do this when I first ran it this morning.  It just started to do this, this morning at a demonstration for the customer, and has been doing this ever since.

I am baffeled.  If anyone can point me in the right direction I would be most grateful.

Found it.  This page
http://forums.asp.net/p/2010964/5786750.aspx?p=True&t=635478678680887055&pagenum=1
 I was advised to put href = "" in my links to make the syle of a link appear on the page.  I had forgotten that I read somewhere that when no index is passed to the url,
then the user is routed to the index method of the controller.  That is what happened here after I made the change referenced above. 

So I will have to hard code a style just for these elements in the style sheet.

Hi joeller,

If the href attribute is not present, the <a> tag is not a hyperlink. In HTML5, if the <a> tag has no href attribute, it is a placeholder for a hyperlink.

# HTML <a> href Attribute

http://www.w3schools.com/tags/att_a_href.asp

Best Regards

Starain Chen

Leave a Reply