For loop problem in JQuery

Question

Hi, I am using JQuery where i am trying to use the Cakephp Controller returned values in the JQuery input element..

I have two variables returned from my CakePHP controller action $entries and $attributes.. $attributes will return the Fieldname and its type,size $entries will return the Fieldname and the value submitted for the Field.

Both are array variables Here i have created the Corresponding Input element using

             <?php foreach ($attributes as $r): ?>
               $("<div id= <?php echo $r['Attribute']['label'];?> ></div>").appendTo("#main");
               $("<input id=input<?php echo $r['Attribute']['id'];?> type= 'text' style= 'width:<?php echo $r['Attribute']['size'];?>px'value='<?php echo $attribute['Result']['value'];?>' ?> ></input><br>").appendTo("#main");
            $("<div id= <?php echo $r['Attribute']['type'];?> ></div>").appendTo("#main");
               <?php endforeach; ?>

In the above code where i am creating the Input element it shows me the correct Input element based on it.But within that input element when i tried to use like value='' ?>

i have to keep the

               <?php endforeach;?>

where inside this only i can use the

How to do so.. Please suggest me.. SInce both are for loops i dont know how to use them since when i keep it will be creating as much number of times..

   <script type="text/javascript">
      $(document).ready(function(){
           $(".edi").click(function (){


               <?php foreach ($attributes as $r): ?>
               $("<div id= <?php echo $r['Attribute']['label'];?> ></div>").appendTo("#main");
               $("<input id=input<?php echo $r['Attribute']['id'];?> type= 'text' style= 'width:<?php echo $r['Attribute']['size'];?>px'value='<?php echo $attribute['Result']['value'];?>' ?> ></input><br>").appendTo("#main");
            $("<div id= <?php echo $r['Attribute']['type'];?> ></div>").appendTo("#main");
               <?php endforeach; ?> 
               $(".edi").hide();$(".vie").show();
               return false;
           });
      });
      </script>

EDIT: I have kept for retriving the fields(type,size,fieldname) from the Attributes table.. is for retriving the That fields entries (label,value)...

On clicking the Edit button ,,, i am generating the input elements with sizes where i got it from $r['Attribute']['size'] as

$(" type= 'text' style= 'width:px'value='' ?> >
").appendTo("#main"); This shows me the correct generation of input elements with correct sizes of what it retrieves from the table..

Now inside this i.e. in the Input elements i want to show the value of this corresponding field of what i m retriving from using $r1['Result']['value']; THis is where i am not able to make this values to show inside the Input Elements..Please help me......

Answer 1

Not sure if I am understanding your question, but here is my answer:

<script type="text/javascript">
  $(document).ready(function() {
    $(".edi").click(function() {
      <?php
        // loop over attributes
        foreach ($attributes['Attribute'] as $attribute):
          // loop over results
          foreach ($entries['Result'] as $result):
            // determine attribute value
            if ($result['fieldname'] == $attribute['fieldname']):
              $attribute['value'] = $result['value'];
            endif;
          endforeach;
          // build html string
          $html = String::insert(
            '<div id=":label"></div><input id="input:id" type="text" style="width: :size px" value=":value"></input><br><div id=":type"></div>',
            $attribute // see previous version for expanded version of this line
          );
          // append it using jquery
          echo "$('" . $html . "').appendTo('#main');";
        endforeach;
      ?>
      $(".edi").hide();
      $(".vie").show();
      return false;
    });
  });
</script>

Answer 2

The question is not very clear, but here is a suggestion

Why not create a new view file to render the html you want to append to #main?
You can pass the attributes array from the controller action to the view file
For example, the view may be "ViewToAppend.ctp":

<?php foreach ($attributes as $r): ?>
    <div id="<?php echo $r['Attribute']['label'];?>" /></div>
    <input id="input<?php echo $r['Attribute']['id'];?>" type="text" style= "width:<?php echo $r['Attribute']['size'];?>px" value="<?php echo $attribute['Result']['value'];?>"> </input><br>
    <div id="<?php echo $r['Attribute']['type'];?>"></div>
<?php endforeach; ?>

say your controller is "YourController", and the action you called is called "YourAction".
After the initial code where you fill up the $attributes array and set it as a view variable, check if the request is ajax.
If it is an ajax request, only render your smaller view "ViewToAppend.ctp"

class YourController extends AppController{
    var $components = array( ... , 'RequestHandler', ... );
    ...
    function YourAction( /* parameters */ ){

        /* initial code where you set up $attributes */

        $this->set('attributes',$attributes);

        if($this->params['isAjax'])
            render('/path/to/view/ViewToAppend','ajax');
    }
    ...
}

then you could call "YourAction" from javascript

<script type="text/javascript">
$(document).ready(function(){
    $(".edi").click(function (){

        $.ajax({
            url:'YourController/YourAction/...',
            success:function(msg){
                $('#main').append(msg);
                $(".edi").hide();
                $(".vie").show();
            }
        });

        return false;
    });
});
</script>