Updating Textfield Value From Custom Method Call Through Ajaxbutton

Hello nice people, I’m pretty new to the ‘Yii’ platform, however, I have searched all over the internet for a solution to my problem as I have had a roadblock on this for 3 days (believe it). I have a created form to receive employee data from user input. I have a ‘textField’ for password but my intention is to auto-generate this password using a custom method call. This call will initially fill the ‘textField’ automatically upon page load and subsequently require the use of ‘ajaxButton’ to re-generate a new password.

As it stands, the method is located in my Model, while my controller is set-up to manage the request and ‘renderPartial’ the targeted view upon the ajax request. Issue is, I have successfully achieved the effect because I can see the auto-generated value appear on a targeted ‘div’ in my form. However I want this value to appear within the ‘textField’ marked with a “password” attribute. Any ideas how I can achieve this, a clear and concise implementation will be appreciated as am still new to this MVC approach and not the best with javaScript either.

the code below







----Model----

---- Employee.php ---

//Method for generating password in Employee Model 


...

// for simple character display (less secure default  password)

    function simpleRandomizer($length){

        $randstr = "";

        for($i=0; $i<$length; $i++){

            $randnum = mt_rand(0,61);

            if($randnum < 10){

                $randstr .= chr($randnum+48);

            }else if($randnum < 36){

                $randstr .= chr($randnum+55);

            }else{

                $randstr .= chr($randnum+61);

            }

        }

        return $randstr;

    }    // simpleRandomizer




--- Controller----

--- EmployeeController.php




      public function actionRandomize(){

          $model = new Employee();

       // if(isset($_GET['ajax']))

          $randomPassword = $model->simpleRandomizer(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />;




          $this->renderPartial('randomize',array('random'=>$randomPassword));

      }




--- View -----

--- randomize.php ---




/* @var $random EmployeeController */


 echo CHtml::encode($random);




--- form ----

--- _form ---

//this code actually gets the value and updates the targeted div ('pass') as desired

	<div class="row" >

		<?php echo $form->labelEx($model,'password'); ?>

		<?php echo $form->textField($model,'password',array( 'id'=>"passwd", 'name'=>'passwd')); ?>

		<?php echo $form->error($model,'password'); ?>

        <?php echo CHtml::ajaxButton('Generate',array('randomize'),array( 'update'=>'#pass', )); ?>

	</div>                         <div id='pass'></div>




// this is the alternate code i was hoping will actually target the textField ('password') and change its value

// as desired

  	<div class="row" >

		<?php echo $form->labelEx($model,'password'); ?>

		<?php echo $form->textField($model,'password',array( 'id'=>"passwd", 'name'=>'passwd')); ?>

		<?php echo $form->error($model,'password'); ?>

        <?php echo CHtml::ajaxButton('Generate',array('randomize'),array( 'update'=>'#pass',              

                   'data'=>array('password'=>'js: { $(\'#passwd\').val()}'))); ?>

	</div>                         <div id='pass'></div>



The description CHtml.ajaxButton contains a link to the ajax method, which describes what you can pass in the ‘ajaxOptions’ argument.

Now you set the ‘update’ option that updates a specified DOM element with the contents of the ajax response. You can instead specify the ‘success’ option with you own JavaScript code that will handle the response, that is set the contents of the ‘#pass’ container and also set it as the value of a text field.

BTW In my usr module I have same feature of generating a passphrase by using the diceware method. I’ve implemented it like this:

  • next to the password field there is a link or button with a refresh icon

  • when a user clicks it it makes an ajax request to fetch a new password

  • after receiving response it displays a prompt dialog where the new password is in an editable field AND is selected, this allows the user to easily copy it (ctrl+c) and if he presses ‘OK’ it’s inserted in the password field

You can see it in action on the demo page.

Thanks a lot Nick… Now i understand. Got it solved. Would look into your implementation of the refresh icon… that’s pretty fancy… meanwhile here is what i did:


 --- _form.php ---

<div class="row" >

		<?php echo $form->labelEx($model,'password'); ?>

         <?php $model->password = $model->simpleRandomizer(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />;?>

		<?php echo $form->textField($model,'password',array( 'id'=>"passwd",'readOnly'=>'true','size'=>8, 'maxLength'=><img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />); ?>

		<?php echo $form->error($model,'password'); ?>

        <?php echo CHtml::ajaxButton('Generate',array('randomize'),array('success'=>'js:function(data) { $(\'#passwd\').val(data)}')); ?>

	</div>