jQuery Replace HTML after click event and page reload

Question

I'm having some problems getting the last part of this click function to work. The language_name and flag_url cookies are setting correctly, and the page is also reloading, but the .html() is not being replaced (last function).

So maybe the order of events is wrong? Not sure.

$("a.flag").click(function() {  

         $.cookie("language_name", $(this).attr("title"),{ path: "/" });
         $.cookie("flag_url", $(this).find("img").attr("src"),{ path: "/" });
           var lang_prefix = $(this).attr("class").split(" ")[2];
           var language_name = $.cookie("language_name");
           var flag_url = $.cookie("flag_url");
           var default_lang = "<?php echo get_option('googlelanguagetranslator_language'); ?>";


           if (lang_prefix != default_lang) {
              setTimeout(function(){
                window.location.href = window.location.href.split("?")[0] + "?lang=" + lang_prefix;
              }, 200);

            } else {
              window.location.href = window.location.href.split("?")[0];
            }


         $(function() {
           $("div.selected").html( "<a class=\"notranslate nturl\" title=\"" + language_name + "\" onclick=\"return false;\" href=\"#\"><span class=\"flag\"><img class=\"flagimg flagselect\" src=\"" + flag_url + "\" alt=\"" + language_name + "\" height=\"16\" width=\"16\"></span>" + language_name + "</a>");
         });        
       });

It looks like you are redirecting before that function can be called... — scrowler
– scrowler, Commented May 14, 2014 at 23:02

Black Sheep · Accepted Answer · 2014-05-14 23:04:53Z

1

Remove $(function() { } like this:

$("a.flag").click(function() {  

     $.cookie("language_name", $(this).attr("title"),{ path: "/" });
     $.cookie("flag_url", $(this).find("img").attr("src"),{ path: "/" });
       var lang_prefix = $(this).attr("class").split(" ")[2];
       var language_name = $.cookie("language_name");
       var flag_url = $.cookie("flag_url");
       var default_lang = "<?php echo get_option('googlelanguagetranslator_language'); ?>";


       if (lang_prefix != default_lang) {
          setTimeout(function(){
            window.location.href = window.location.href.split("?")[0] + "?lang=" + lang_prefix;
          }, 200);

        } else {
          window.location.href = window.location.href.split("?")[0];
        }

       // REMOVE
       $("div.selected").html( "<a class=\"notranslate nturl\" title=\"" + language_name + "\" onclick=\"return false;\" href=\"#\"><span class=\"flag\"><img class=\"flagimg flagselect\" src=\"" + flag_url + "\" alt=\"" + language_name + "\" height=\"16\" width=\"16\"></span>" + language_name + "</a>");
   });

Side Note: php code is server side... not client side

answered May 14, 2014 at 23:04

Black Sheep

6,7047 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Myrick Over a year ago

This didn't work - it DOES appear as if I'm re-directing before the function can process.

Rob Myrick · Accepted Answer · 2014-05-14 23:15:10Z

Here is the code that worked -

I needed to associate the reloaded page within the .click() function, and then use .html() in a function on its own, OUTSIDE of the click function.

$("a.flag").click(function() {  

         $.cookie("language_name", $(this).attr("title"),{ path: "/" });
         $.cookie("flag_url", $(this).find("img").attr("src"),{ path: "/" });
         var lang_prefix = $(this).attr("class").split(" ")[2];
         var default_lang = "<?php echo get_option('googlelanguagetranslator_language'); ?>";
         if (lang_prefix != default_lang) {
           setTimeout(function(){
             window.location.href = window.location.href.split("?")[0] + "?lang=" + lang_prefix;
           }, 200);

         } else {
           window.location.href = window.location.href.split("?")[0];
         }

       });

       $(function() {

         var language_name = $.cookie("language_name");
         var flag_url = $.cookie("flag_url");

         $("div.selected").html( "<a class=\"notranslate nturl\" title=\"" + language_name + "\" onclick=\"return false;\" href=\"#\"><span class=\"flag\"><img class=\"flagimg flagselect\" src=\"" + flag_url + "\" alt=\"" + language_name + "\" height=\"16\" width=\"16\"></span>" + language_name + "</a>");
       });

pecci · Accepted Answer · 2014-05-14 23:20:23Z

I dont know if i understood everything, but maybe if could be like this:

var lang_prefix = '';
var default_lang = "<?php echo get_option('googlelanguagetranslator_language'); ?>";
var language_name = $.cookie("language_name");
var flag_url = $.cookie("flag_url");

if (language_name != '' && flag_url != '') {
    $("div.selected").html( "<a class=\"notranslate nturl\" title=\"" + language_name + "\" onclick=\"return false;\" href=\"#\"><span class=\"flag\"><img class=\"flagimg flagselect\" src=\"" + flag_url + "\" alt=\"" + language_name + "\" height=\"16\" width=\"16\"></span>" + language_name + "</a>");
}

$("a.flag").click(function() {  
     $.cookie("language_name", $(this).attr("title"),{ path: "/" });
     $.cookie("flag_url", $(this).find("img").attr("src"),{ path: "/" });

     lang_prefix = $(this).attr("class").split(" ")[2];
     language_name = $.cookie("language_name");
     flag_url = $.cookie("flag_url");

     if (lang_prefix != default_lang) {
          setTimeout(function(){
            window.location.href = window.location.href.split("?")[0] + "?lang=" + lang_prefix;
          }, 200);

     } else {
         window.location.href = window.location.href.split("?")[0];
     }
});

Collectives™ on Stack Overflow

jQuery Replace HTML after click event and page reload

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related