Search code examples
javascriptjqueryasp.netpolyglot

Polyglot Language Switcher asp.net


I want to use polyglot language switcher with asp.net 4.0 website. Below code works;

 <body>
 <div id="polyglotLanguageSwitcher"> 
    <form id="form1" runat="server"  > 
        <form action="#" >
           <select id="polyglot-language-options" >
               <option id="en" value="en" selected="selected">English</option>
               <option id="fr" value="fr">Fran&ccedil;ais</option>
               <option id="de" value="de">Deutsch</option>
               <option id="it" value="it">Italiano</option>
               <option id="es" value="es">Espa&ntilde;ol</option>
           </select>
        </form>
   </form>
</div>

I want to use as shown below (in <form id="form1" runat="server"> </form> tag) but it doesn't works.

<body>
 <form id="form1" runat="server"  >
    <div id="polyglotLanguageSwitcher">
       <form action="#" >
           <select id="polyglot-language-options" >
               <option id="en" value="en" selected="selected">English</option>
               <option id="fr" value="fr">Fran&ccedil;ais</option>
               <option id="de" value="de">Deutsch</option>
               <option id="it" value="it">Italiano</option>
               <option id="es" value="es">Espa&ntilde;ol</option>
           </select>
       </form>
    </div>
 </form>

polyglog.js is here: https://github.com/ixtendo/Polyglot-Language-Switcher/blob/master/js/jquery.polyglot.language.switcher.js

Any ideas?


Solution

  • Try following it is working on my end. I have added form tag inside div polyglotLanguageSwitcher and it worked:

    <body>
        <div id="container" style="width: 400px; margin: 140px auto 40px;">
            <!-- begin language switcher -->
            <div id="polyglotLanguageSwitcher">
                <form id="form1" runat="server">
    
                    <select id="polyglot-language-options">
                        <option id="en" value="en">English</option>
                        <option id="fr" value="fr">Fran&ccedil;ais</option>
                        <option id="de" value="de">Deutsch</option>
                        <option id="it" value="it">Italiano</option>
                        <option id="es" value="es">Espa&ntilde;ol</option>
                    </select>
    
                </form>
            </div>
            <!-- end language switcher -->
    
        </div>
    </body>
    

    If you want form outside of div then change following lines in js but i will not recommend it:

    var options = $("#" + rootElementId + " > form > select > option");
    

    with

    var options = $("#" + rootElementId + " > select > option");
    

    and

      $("#" + rootElementId + " form:first-child").remove();
    

    with

    $("#" + rootElementId + " :first-child").remove();