View : full javascript or mix javascript and php

[eluser]bastien31[/eluser]
Hi everybody,

I'm coding a web app and I want to use the good rules about mixing php and javascript.

To explain my problem:
My controller can give the data the view needs. But for example, in my view, i can have a date, which would be changed with a datepicker.

When I init my view, i have to init the input of the datepicker (jquery ui datepicker) with one of my php variable, given from my controller.

I can do that in my javascript like that :

Code:

<?php if(isset($data['deadline']: ?>
var deadline = <?php echo $data['deadline'] ?>
<?php else: ?>
var deadline = -1;
<?php endif; ?>

But I find this kind of code a bit nasty and maybe not easy to maintain in 3 months... Evidently, it's working cause the php in on server side and js on client side.

The second way to generate my view is with full js, with an ajax request when I enter the view in order to retrieve the data from DB (the ones my controller can give to my view directly).

Is there a best practice between these two ?

I think my problem is a general purpose for everybody here, so you have certainly very good answers !

Thanks !

Bastien

[eluser]heartnetkung[/eluser]
Hi, bastien31
I was having the similar problem as you before. In out case, our web app focus all ui logic in plain javascript (all our view files have no php tag at all).
Here's my solution.
I extend the base controller and create my new $this->loaw->view to inject javascript.

Code:

<?php
class MY_Controller extends CI_Controller {

protected function loadView($view, $data = array(), $return = false) {
  $loadedHtml = $this -> load -> view($view, '', TRUE);
  //sending php data directly to javascript in window.php object
  $insertingScript = '[open script tag]
  var temp2=window.php=window.php||{}; var temp=' . json_encode($data) . '; for(x in temp) temp2[x]=temp[x];[close script tag]';
  $loadedHtml = str_replace('</head>', $insertingScript . '</head>', $loadedHtml);
  if ($return)
   return $loadedHtml;
  else {
   $this -> output -> set_output($loadedHtml);
  }
}
}

Don't forget to replace [open/close script tag].
Here's some example of my javascript code

Code:

$(document).ready(function() {
  if(window.php && window.php.username)
   $('#username-label').text(window.php.username);
})

Hope you like it ;D

[eluser]bastien31[/eluser]
Thanks for the quick reply !

It seems to be what I'm looking for. I'm going to try it.

Just to understand, what is "[removed]" in the insertedScript variable ?

I read something and it seems to have a link with XSS. Can you explain ?

Thanks a lot

bastien

[eluser]bastien31[/eluser]
ok... I understood... [removed] was put automatically by the forum when you put script type="text/javascript".

Ok ! it's working for me.

Great job !

Thanks !

[eluser]bastien31[/eluser]
I modify your code, because I'm using a template to render my views.

So now, my MY_Controller code is :

Code:

<?php
class MY_Controller extends CI_controller {

protected function loadView($view, $data = array(), $return = false) {
  $loadedHtml = $this -> load -> view("template/template", $data, TRUE);
  //sending php data directly to javascript in window.php object
  $insertingScript = '[removed]var temp2=window.php=window.php||{}; var temp=' . json_encode($data) . '; for(x in temp) temp2[x]=temp[x];[removed]';
  $loadedHtml = str_replace('</head>', $insertingScript . '</head>', $loadedHtml);
  
  if ($return) {      
    return $loadedHtml;
  }
  else {    
   $this -> output -> set_output($loadedHtml);
  }
}

}
?>

$view is no more used.

And I call it like that in my php controller :

Code:

$this->loadView("step-1", $data, false);

You saved me several hours !
see ya

[eluser]heartnetkung[/eluser]
Glad u like it.

Just curious why you don't use the '$view' and call it like this?

Code:

$this->loadView("template/template", $data, false);

This way it can be reused across several projects.

[eluser]bastien31[/eluser]
Just because I was on the fire to set it and I modify it too quickly !

Thanks to see it.

About your solution, I don't know how it works, but I think it deserves a wiki.

I think we are not the only ones to use CI in this way and it could save several hours to other developers.

Cheers !

[eluser]CroNiX[/eluser]
There are several "asset" libraries available that let you set JS variables (as well as CSS and others) directly in the <head> from the controller without having to use js to insert it.

[eluser]vincej[/eluser]
For us newbies, can you please clarify 'asset libraries' .. which is the one which I shoud look at first ?

thanks !

[eluser]CroNiX[/eluser]
Do a search for "asset" or "asset manager" in the wiki and the forum.
The one I use the most is this one:
http://ellislab.com/forums/viewthread/181405/
carabiner is also popular. There are many others.