Need help: None of my OnSuccess functions are working

Looks like none of my jQuery functions that I call from OnSuccess in my AjaxOptions are firing up.

All I'm trying to do is open up modal dialog which is a partial view, then let user enter some data via an Ajax call.

I first tried to close the modal which didn't work. Then I decided to load up some message into the modal using jQuery.load() and that's not working either. Looks like none of my jQuery calls are working.

What am I doing wrong?

Here's the full code of my partial view:

@model MyModels.Companies.CompanyTwitterInfo
           
<h6>Twitter Handle</h6>
<div id="divTwitterForm">
@using (Ajax.BeginForm("EditTwitterInfoForSpecifiedCompany", "Companies", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "divTwitter",
    OnSuccess = "displaySuccess"
}))
{
    @Html.TextBoxFor(model => model.TwitterHandle)
    <input type="submit" value="Submit" class="button" />
    @Html.HiddenFor(model => model.CompanyId)
}
</div>

<script type="text/javascript">

    function displaySuccess() {

        var successMessageUrl = '@Url.Content("~/Content/messages/success.htm")'
        $('#divTwitterForm').load(successMessageUrl);

    }
    
    function closeFancy() {
        $.fn.fancybox.close();
    }

</script>

Any idea what the solution may be?

P.S. the Ajax call is actually working i.e. it's submitting the data entered by the user into the database and refreshing the DIV in the parent view to show the newly entered data.

The closeFancy() function is another appraoch I tried which didn't work. The partial view that included in this post opens up in a fancybox modal dialog. My original idea was to close the modal OnSuccess. That didn't work either. That's why I'm thinking none of the javascript functions I call OnSuccess are working.

Re: Need help: None of my OnSuccess functions are working

If you put a simple alert('test') in the onsuccess callback method, does that show?

Re: Need help: None of my OnSuccess functions are working

Yes, I actually just tried that and it worked.

Re: Need help: None of my OnSuccess functions are working

Great, and if you alert or check the value of the html you are trying to load. Does that work?

Re: Need help: None of my OnSuccess functions are working

Not sure what you mean by value of the html.

Re: Need help: None of my OnSuccess functions are working

You have a link to a html file. If you alert the value of the successMessageUrl and browse to that so the file "works".

Also, can you alert:

alert($('#divTwitterForm')) to see if that really is found by jquery

Re: Need help: None of my OnSuccess functions are working

Here's what I did. I provided what I want displayed in the DIV locally so that I don't have to worry about locating an HTML file and it did NOT work. That means, it's not locating the divTwitterForm. Here's the full partial view again:

@model MyModels.Companies.CompanyTwitterInfo
           
<h6>Twitter Handle</h6>
<div id="divTwitterForm">
@using (Ajax.BeginForm("EditTwitterInfoForSpecifiedCompany", "Companies", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "divTwitter",
    OnSuccess = "displaySuccess"
}))
{
    @Html.TextBoxFor(model => model.TwitterHandle)
    <input type="submit" value="Submit" class="button" />
    @Html.HiddenFor(model => model.CompanyId)
}
</div>

<script type="text/javascript">

    function displaySuccess() {

        var successMessageUrl = '<div style="text-align: center;">Thank you...</div>';
        $('#divTwitterForm').load(successMessageUrl);

    }

    function closeFancy() {
        $.fn.fancybox.close();
    }

</script>

Re: Need help: None of my OnSuccess functions are working

So, try

alert($('#divTwitterForm').html())

and see what that displays

Re: Need help: None of my OnSuccess functions are working

It did NOT do anything. I also tried the code below and got no results:

var successMessage = '<div style="text-align: center;">Thank you...</div>';
$('#divTwitterForm').Html(successMessage);

I think this is further proof that it's not finding divTwitterForm, don't you think?

Re: Need help: None of my OnSuccess functions are working

This must have something to do with Ajax call.

Re: Need help: None of my OnSuccess functions are working

try wrapping the onsuccess in a jquery document.ready function

$(document).ready(function(){

// your onsuccess method goes here...

});

Re: Need help: None of my OnSuccess functions are working

Did absolutely nothing!

Here's what it looks like -- just in case I'm not doing it right. My JavaScript/jQuery skills are rudimentary at best.

<script type="text/javascript">

    $(document).ready(function () {
        function displaySuccess() {

            var successMessage = '<div style="text-align: center;">Thank you...</div>';
            $('#divTwitterForm').Html(successMessage);
            //$('#divTwitterForm').load(successMessageUrl);

        }
    });


    

    function closeFancy() {
        $.fn.fancybox.close();
    }

</script>

Re: Need help: None of my OnSuccess functions are working

Nothing I do is working. I even tried hiding the DIV with the form and showing a thank you DIV. Even that is NOT working! By the way, even the initial document.Ready() is not working. My divSuccess is showing at start up. If the document.Ready() was working, shouldn't it be hidden?

@model MyModels.Companies.CompanyTwitterInfo
           
<h6>Twitter Handle</h6>
@using (Ajax.BeginForm("EditTwitterInfoForSpecifiedCompany", "Companies", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "divTwitter",
    OnSuccess = "showMeSuccess"
}))
{
    <div id="divTwitterForm">
        @Html.TextBoxFor(model => model.TwitterHandle)
        <input type="submit" value="Submit" class="button" />
        @Html.HiddenFor(model => model.CompanyId)
    </div>
    <div id="divSuccess">
        
        Thank you very much...
        
    </div>
}

<script type="text/javascript">

    $(document).ready(function () {

        $('#divSuccess').Hide();

    });

    function showMeSuccess() {
        $('#divTwitterForm').Hide();
        $('#divSuccess').Show();
    }

</script>

Re: Need help: None of my OnSuccess functions are working

Have you added the javascript in your master page/_Layout.cshtml file?

Re: Need help: None of my OnSuccess functions are working

Yes, all my references to jQuery and fancybox are in my _Layout.cshtml file.

To make sure, I added them to my partial view as well. When I did, I wasn't able to open my modal dialog which I interpreted as a javascript conflict. When I removed it the references from the partial view, everything worked again -- except for the OnSuccess stuff.

Re: Need help: None of my OnSuccess functions are working

Ok, can you try and move the success div outside the form? and not have the form inside the div as you had earlier? I think that can cause some problem

Re: Need help: None of my OnSuccess functions are working

I did. Same results.

Do you think this is due to FancyBox? I really like FancyBox but do you think it's a better idea for me to use the jQuery-UI dialog?

Re: Need help: None of my OnSuccess functions are working

Can you comment out all the fancybox stuff and see if that solves the problem? And yes, i think you should but still, it shouln't cause this problem

Re: Need help: None of my OnSuccess functions are working

If I comment out fancybox, then my partial view won't open in a modal dialog.

How do I open a modal dialog using jQuery-UI? I already have all the references to it so just by calling it I should be able to open it -- just don't know how.

Re: Need help: None of my OnSuccess functions are working

Get the fancybox back and change the call to Hide() to hide() with lower characters and see what happens :)