Jquery: chainable event

lindm · December 30, 2009

Got a basic problem regarding chainable events. As seen in the code below I want the following to happen:

1. User clicks translate

2. Modalwindow appears showing "Translating..."

3. When google has transalated the modal window disappears.

It seems all scripts are executed at once when clicking the translate text so the modal is shown and hidden immediately. Is there an easy way to solve this? (please note the simplemodalscript is local in the code)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js"></script>
<script src="/jquerysimplemodal.js"></script>
<script type="text/javascript" > 	
$(window).load(function(){
	$("#trans").click(function() { 
			$.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});				
			$(".eng").each(function() {
					string = "#"+$(this).attr("id");
					string2 = string.replace("ENG","");	
					$(this).val($(string2).val()); 
					$(this).val($(this).translate("sv","en")); 
       			});
			$.modal.close();
	}); 			
});	
</script> 
</head>
<body>
<form id="form2" name="form2" method="post" action="">
      <input class="eng" type="text" name="textfield2" id="textfield2" />
      
    </form>
    <p><a id="trans" href="#">Translate</a></p>
</body>
</html>

lindm · December 31, 2009

Been trying a bitt with callbacks which should do the trick. However the modal close always comes immediately when I click the link...new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js"></script>
<script src="/jquery/jquerysimplemodal.js"></script>
<script type="text/javascript" > 	
$(document).ready(function(){
	$("#trans").click(function() { 
			$.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});				
			$(".eng").each(function() { 
					$(this).val($(this).translate("sv","en")); 
       			},hidemodal());
	}); 			
});	

function hidemodal() {$.modal.close();}

</script> 
</head>
<body>
<form id="form2" name="form2" method="post" action="">
      <input class="eng" type="text" name="textfield2" id="textfield2" />
      
    </form>
    <p><a id="trans" href="#">Translate</a></p>
</body>
</html>

rajivgonsalves · December 31, 2009

try this

   $(document).ready(function(){
      $("#trans").click(function() {
            text = this;
            $.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});            
            $(".eng").each(function() {
                  $(this).translate("sv","en", {complete: function(translation){$(text).val(translation); $.modal.close();}});
                });
      });          
   });

lindm · December 31, 2009

Wonderful! Many thanks!

lindm · December 31, 2009

Was a bit quick there. It seems the hiding of the modal executes immediately instead of after all fields are translated. On my "real" page I have say 50 form fields with the class "eng" needing translation. The text translated is taken from a corresponding text field in swedish. The current full code is the following:

	$("#trans").click(function() { 	
            text = this;
			$.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});  
			$(".eng").each(function() {
					string = "#"+$(this).attr("id");
					string2 = string.replace("ENG","");	
					$(this).val($(string2).val()); 
                  		$(this).translate("sv","en", {complete: function(translation){$(text).val(translation); $.modal.close();}});
       			});
	});

rajivgonsalves · December 31, 2009

after some trial error I came up with this not sure if its the optimal way to do things

$(document).ready(function(){
    $("#trans").click(function() {
          var translation_array = new Array();
          $.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});
          $('.eng').each(function(){translation_array.push($(this).val());});           
          $.translate( translation_array, 'sv', 'en', {
        	  complete: function(translation){ $(translation).each(function(index){$('.eng').eq(index).val(this);});$.modal.close(); }
         });

    });         
});

rajivgonsalves · December 31, 2009

okay here is a better version of the code

$(document).ready(function(){
    $("#trans").click(function() {
          $.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});
          $.translate( $('.eng').map(function() { return $(this).val();}), 'sv', 'en', {	
        	  complete: function(translation){ $(translation).each(function(index){$('.eng').eq(index).val(this);});$.modal.close(); }
         });

    });         
});

lindm · December 31, 2009

Code works for sure! Slight problem..as seen in the previous post and below the text to be translated is actually not found in the field with the .eng class. It is rather like this:

Textfield*ENG with class .eng always has a "sister"-field called Textfield*. So the function gets the swedish text from the field Textfield*, translates it, and puts the text in Textfield*ENG. I have the base code working but can't get the modal window to come after all fields are translated. Super thanks for your great tips. Will try and get it working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="../script/jquery/jquery.translate-1.4.1.min.js"></script>
<script src="../script/jquery/jquerysimplemodal.js"></script>
<script type="text/javascript" > 	
$(document).ready(function(){
    $("#trans").click(function() { 								   
			$(".eng").each(function() {
					string = "#"+$(this).attr("id");
					string2 = string.replace("ENG","");	
					$(this).val($(string2).val()); 
					$(this).val($(this).translate("sv","en")); 
       			});
	});        
});  

</script> 
</head>
<body>
<form id="form2" name="form2" method="post" action="">
      <textarea name="textfield" id="textfield"></textarea>
      <br />
      <textarea name="textfieldENG" class="eng" id="textfieldENG"></textarea>
      
</form>
    <p><a id="trans" href="#">Translate</a></p>
</body>
</html>

lindm · January 1, 2010

So far this seems to work. But however only the first time I click translate. The second time nothing happens...

$("#trans").click(function() {
          $.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});
          $.translate( $(".eng").map(function() { 
			string = "#"+$(this).attr("id");
			string2 = string.replace("ENG","");	
			$(this).val($(string2).val()); 
			$(this).val($(this).translate("sv","en"));
			}), "sv", "en", {	
        			complete: function(translation){ $.modal.close(); 
				}
         });

lindm · January 1, 2010

Cleaned up the code so the following works:

$("#trans").click(function() {
          $.modal("Translating...",{close:false,opacity:60,position: [100,],containerCss: {padding:"16px",height: "30px",width: "150px"}});
          $.translate( $(".eng").map(function() { 
			string = "#"+$(this).attr("id");
			string2 = string.replace("ENG","");	
			return $(string2).val(); 
			}), "sv", "en", {	
        	  complete: function(translation){ $(translation).each(function(index){$(".eng").eq(index).val(this);});$.modal.close(); }
         });

    });

Any comments on the final code?

rajivgonsalves · January 1, 2010

looks okay, I am not actually conversant with the translate lib it seems to be less documented, if the code works I think it great! you can't do much more to it

lindm · January 1, 2010

Again superthanks!

Sign In

Jquery: chainable event

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information