CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netasp.net-mvc
SmiLe
SmiLe

Reputation: 311

Cant submit html form after use js script

I have this html site

<html>
<head>
    <link rel="stylesheet" href="~/Content/index.css" />
    <link rel="stylesheet" href="~/Scripts/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="~/Scripts/prototype.js"></script>
    <script type="text/javascript" src="~/Scripts/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="~/Scripts/Scale.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="~/Scripts/fancyBox/source/jquery.fancybox.pack.js"></script>
    <title>Countries</title>
</head>
<body>
    <div>
        @foreach (var country in Model)
        {
            <a class="fancybox">
                <div class="tooltip">
                    @using (Html.BeginForm("ChangeCulture", "Home", new { lang = country.Culture }))
                    {
                        <!-- onclick="zoomIn('@country.Culture')"-->
                        <input id="@country.Culture" class="@country.Sprite" type="image" name="submit" src="//" />
                        <span class="tooltiptext">@country.Country</span>
                    }
                </div>
            </a>
        }
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                this.find("form").submit();
            }
        });
    })
</script>
</body>
</html>

The bottom line is that the flags of countries with tooltips are displayed on the screen and by pressing it is necessary to change the language of the tooltips to the language used in the country. I did this, and now I need to increase the whole screen after receiving the picture with the flag, and then the language would change. I found the fancybox scripts, but after it is inserted, the form is not sent, the selected flag appears in the center, but nothing happens after that, what could be the problem? I have not written to asp and js before

After click on the image I got an error

Uncaught TypeError: this.find is not a function
    at Object.afterShow (Index:119)
    at Function.trigger (jquery.fancybox.pack.js:17)
    at HTMLDivElement._afterZoomIn (jquery.fancybox.pack.js:33)
    at HTMLDivElement.d.complete (jquery-latest.min.js:4)
    at j (jquery-latest.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
    at i (jquery-latest.min.js:4)
    at m.fx.tick (jquery-latest.min.js:4)

My method

public ActionResult ChangeCulture(string lang)
        {
            var returnUrl = this.Request.UrlReferrer?.AbsolutePath;
            var cookie = this.Request.Cookies["lang"];
            if (cookie != null)
            {
                cookie.Value = lang;
            }
            else
            {
                cookie = new HttpCookie("lang")
                {
                    HttpOnly = false,
                    Value = lang,
                    Expires = DateTime.Now.AddYears(1)
                };
            }
            this.Response.Cookies.Add(cookie);
            return this.Redirect(returnUrl ?? "Index");
        }

Upvotes: 1

Views: 101

Answers (3)

Ryan
Ryan

Reputation: 24

The this in this.find("form") is not $(".fancybox") here.

Try using $('.fancybox form') instead.

Upvotes: 0

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

The error is located in this statement:

this.find("form").submit();

You're trying to call find() method on plain JS object inside this wrapper, where the function belongs to a jQuery object. The correct way is using jQuery object like this:

<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                // alternative: use $(this).closest("form").submit();
                $(this).find("form").submit();
            }
        });
    });
</script>

Additionally your redirection method in controller action should be like below, since Controller.Redirect requires full path or URL for redirect to another page:

public ActionResult ChangeCulture(string lang)
{
    var returnUrl = this.Request.UrlReferrer?.AbsolutePath;

    // cookie settings here

    if (string.IsNullOrEmpty(returnUrl))
    {
        return this.RedirectToAction("Index");
    }

    return this.Redirect(returnUrl);
}

Upvotes: 1

Karan Patel
Karan Patel

Reputation: 2289

You should user jquery selector

   <script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            afterShow : function() {
                $(".fancybox").submit();
            }
        });
    })

Upvotes: 1

Related Questions