Import css and js to PHP codeigniter

Question

So, Everything works fine in my HTML

<style>
   #draggable { width: 90px; height: 90px; }
   #draggable2 { width: 90px; height: 90px; }
   #draggable3 { width: 90px; height: 90px; }
   #draggable4 { width: 90px; height: 90px; }
   #draggable5 { width: 90px; height: 90px; }
   #draggable6 { width: 90px; height: 90px; }
   #draggable7 { width: 90px; height: 90px; }
   #draggable8 { width: 90px; height: 90px; }
   #draggable9 { width: 90px; height: 90px; }
   #draggable10 { width: 90px; height: 90px; }
</style>
<script>
    $(function() {
       $( "#draggable" ).draggable();
       $( "#draggable2" ).draggable();
       $( "#draggable3" ).draggable();
       $( "#draggable4" ).draggable();
       $( "#draggable5" ).draggable();
       $( "#draggable6" ).draggable();
       $( "#draggable7" ).draggable();
       $( "#draggable8" ).draggable();
       $( "#draggable9" ).draggable();
       $( "#draggable10" ).draggable();
    });
 </script>

And here is the body:

<body>
     <div id="draggable" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable2" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable3" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable4" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable5" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable6" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable7" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable8" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable9" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
     <div id="draggable10" class="ui-widget-content">
         <a class="btn btn-info btn-xs" href="hall_a.html" role="button">Proceed</a>
     </div> <br>
</body>

My Question is: How to do that in my CodeIgniter:

This is my view in my CodeIgniter:

<head>
    <style>
        #draggable { width: 90px; height: 90px; }
        #draggable2 { width: 90px; height: 90px; }
        #draggable3 { width: 90px; height: 90px; }
        #draggable4 { width: 90px; height: 90px; }
        #draggable5 { width: 90px; height: 90px; }
        #draggable6 { width: 90px; height: 90px; }
        #draggable7 { width: 90px; height: 90px; }
        #draggable8 { width: 90px; height: 90px; }
        #draggable9 { width: 90px; height: 90px; }
        #draggable10 { width: 90px; height: 90px; }
    </style>

    <script>
        $(function() {
            $( "#draggable" ).draggable();
            $( "#draggable2" ).draggable();
            $( "#draggable3" ).draggable();
            $( "#draggable4" ).draggable();
            $( "#draggable5" ).draggable();
            $( "#draggable6" ).draggable();
            $( "#draggable7" ).draggable();
            $( "#draggable8" ).draggable();
            $( "#draggable9" ).draggable();
            $( "#draggable10" ).draggable();
        });
    </script></head>

<body>
<?php
  if(is_array($posting)){ //This function is purposed to retrieve from Daabase 
    echo '<ol>';
    foreach($posting as $key){
    $judul = '<div id="draggable" class="ui-widget-content">'.$key->tbl_name.'</div>';
    echo $judul;
  }
  echo '</ol>';
}</body>

But now it's only work for 'draggable' only. How to do it for 'draggable2' - 'draggable10'?

ron · Accepted Answer · 2014-10-20 05:40:27Z

1

draggable2 - draggable10 does not exists because you only write id="draggable" try this

 $i = 0;
 foreach($posting as $key){
$judul = '<div id="draggable'.$i.'" class="ui-widget-content">'.$key->tbl_name.'</div>';
echo $judul;
$i++; }

//id="draggable'.$i.'" will create draggable2 whene $i=2

answered Oct 20, 2014 at 5:40

ron

84612 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GautamD31 · Accepted Answer · 2014-10-20 05:32:50Z

0

You have to give the id with increments like

echo '<ol>';
$i = 1;
foreach($posting as $key){
    $judul = '<div id="draggable'.$i++.'" class="ui-widget-content">'.$key->tbl_name.'</div>';
    echo $judul;
}

And just change the first draggable from

$( "#draggable" ).draggable();

to

$( "#draggable1" ).draggable();

answered Oct 20, 2014 at 5:32

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Collectives™ on Stack Overflow

Import css and js to PHP codeigniter

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related