Jump to content

Jquery: chainable event

lindm

By lindm
in Javascript Help

 Share

Recommended Posts

lindm Regular Member

lindm

Posted
Posted

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>

Link to comment
Share on other sites
lindm Regular Member

lindm

Posted
  • Author
Posted

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>

 

Link to comment
Share on other sites
rajivgonsalves Newbie

rajivgonsalves

Posted
Posted

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

Link to comment
Share on other sites
lindm Regular Member

lindm

Posted
  • Author
Posted

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

 

Link to comment
Share on other sites
rajivgonsalves Newbie

rajivgonsalves

Posted
Posted

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

    });         
}); 

Link to comment
Share on other sites
rajivgonsalves Newbie

rajivgonsalves

Posted
Posted

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

    });         
}); 

Link to comment
Share on other sites
lindm Regular Member

lindm

Posted
  • Author
Posted

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>

 

Link to comment
Share on other sites
lindm Regular Member

lindm

Posted
  • Author
Posted

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

 

Link to comment
Share on other sites
lindm Regular Member

lindm

Posted
  • Author
Posted

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?

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.