CODEWITHSUNDEEP
phpjquery
Rob Myrick
Rob Myrick

Reputation: 859

jQuery Replace HTML after click event and page reload

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>");
         });        
       });

Upvotes: 0

Views: 251

Answers (3)

pecci
pecci

Reputation: 540

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];
     }
});

Upvotes: 0

Rob Myrick
Rob Myrick

Reputation: 859

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>");
       });

Upvotes: 0

Black Sheep
Black Sheep

Reputation: 6694

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

Upvotes: 1

Related Questions