I am having massive problems re-parsing my dojo elements in an ajax response in Zend framework. I have a simple validationTextBox and a submit button. When the index page is first rendered, all the dojo/dijit tundra styles/attributes etc are parsed correctly. However, when I have an ajax call that rebuilds the dojo form and posts it back to the Index View. The form if posted back ok but the tundra styles are no longer working. I have tried so many different things but have spent many hours getting nowhere. I thank anyone in advance who attempts to assist. I have added the simplest example to this post to explain.
layout.phtml
<?php
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo $this->doctype();
?>
<html>
<head>
<meta content="text/html; charset=UTF-8" />
<script>
function showForm()
{
dojo.xhrGet( {
url: "../public/index.php?ajax=true",
// The load function is called on successful response from server
// It inserts the response to the HTML div “put_here” placeholder
handleAs:"text",
sync:true,
load: function(response, ioArgs)
{ dojo.byId("welcome").innerHTML = response;
return response;
},
// The error function displays error message if server does not
// respond right
error: function(response, ioArgs)
{
console.error("HTTP status code: ", ioArgs.xhr.status);
return response;
}
});
// dojo.parser.parse(dojo.byId("welcome"));
}
</script>
<?php
echo $this->headTitle();
echo $this->headStyle();
echo $this->headScript();
echo $this->dojo()->setDjConfigOption('parseOnLoad', true);
echo $this->dojo()->addStyleSheetModule('dijit.themes.tundra');
echo $this->dojo();
?>
</head>
<body class='tundra'>
<div id='ajaxcontent'>
<?php echo $this->layout()->content; ?>
</div>
</body>
indexController.php
<?php
//require_once '../public/js/custom.js';
class IndexController extends Zend_Controller_Action
{
public function init()
{
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('index', 'html')
->initContext();
}
public function indexAction()
{
$form = new Zend_Dojo_Form('dojoForm', array('dojotype'=> 'dijit.layout.ContentPane'));
$element = new Zend_Dojo_Form_Element_ValidationTextBox('TestBoxName',
array(
'id' => 'TextBoxId',
'required' => true
)
);
$button = new Zend_Dojo_Form_Element_Button('TestButton',
array(
'value'=> 'Button',
'onclick' => 'showForm()'
));
$form->addElements(array($element,$button));
$this->view->form = $form;
}
}
View index.phtml
<div id="welcome" >
<?php
echo $this->form;
?>
Try to run your page through the http://validator.w3.org/ - it is probably the DOCTYPE, and issues with non-closed tags?
The line with addStyleSheetModule simply adds a css file, the class set on your <body> asserts, that all nodes below body 'inherits' the theme (CSS selectors). Selectors however is highly depending on wellconstructed DOM (hence the validation)
But the main issue here seems to be that the dijit classes are not set - probably because data-dojo-type's are not initialized. There are two approaches
1.1 In layout.phtml
function showForm() { dijit.byId('welcome').set('href', '../public/index.php?ajax=true'); }
1.2 In index.phtml
Create a contentpane (which defaults to parseOnLoad) in your <div id='welcome'..
<div id="welcome" data-dojo-type="dijit.layout.ContentPane">
2.0 call parser manually
load: function(response, ioArgs)
{ var domnode = dojo.byId("welcome");
domnode.innerHTML = response;
dojo.parser.parse(domnode);
return response;
}
Related
Hello everyone,
I am a newbie to Magento. I want to learn **ajax process in Magento.** Can anyone help me to understand ajax in Magento with one simple example?
Your help will be highly appreciated.
I give you a simple example for you. To work with basic jQuery Ajax in Magento you have work in phtml page and Controller.
Just add the script in phtml page:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".like-result").click(function() {
//alert(this.id);
var id = this.id;
//alert(custid);
jQuery(".notify-status").hide();
jQuery(".notify-loader").show();
jQuery.ajax({
type: "POST",
data: 'pid=' + id,
url:'http://192.168.2.3/subhranil-demo/blog/index/likecount',
success:function(response){
if (response) {
jQuery(".notify-loader").hide();
jQuery(".notify-status").show();
jQuery("#un"+id).html(response);
}
}
});
});
});
</script>
In the above script under jQuery.ajax you can also see type, data, url. type is used for sending process like POST or GET; in data, you will send information to the controller; in URL, you can declare the controller path. Here I have a 'blog' module and I write the public function under 'index' controller and I give the function name 'likecount'. Also here my base path is http://192.168.2.3/subhranil-demo/. So I add the link to URL as following structure: http://192.168.2.3/subhranil-demo/blog/index/likecount.
Now I go to 'IndexController.php' in my controller's folder of blog module and open it. Under the class I add the following function:
public function likecountAction()
{
$blogload = Mage::getModel('blog/blog')->load($_POST['pid']);
$newid = $blogload['like']+1;
$data = array('like'=> $newid);
$blogload->addData($data);
try {
$blogload->setId($_POST['pid'])->save();
echo $newid;
} catch (Exception $e){
echo $e->getMessage();
}
}
Here in the Blog Database, I have the fields like pid (as a primary key) and like. the function works like that when you click on 'like-result' class the like increase +1.
My div structure also like that:
<?php
$allCollection=Mage::getModel("blog/blog")->getCollection();
$allCollection->addFieldToFilter('status',1);
if ($allCollection->count() >= 1)
{
$news = array();
?>
<div class="blog clearfix">
<?php
foreach ($allCollection as $news)
{?>
<p class="like-result" id="<?php echo $news->getId(); ?>"> <?php echo $news->getLike(); ?> </p>
<a style="display: none;" class="notify-loader"><img src="http://www.sendhersomething.com/skin/frontend/megatron/default/images/ajax/notify-loader.gif"></a>
<a style="display: none;" class="notify-status"><img src="http://www.sendhersomething.com/skin/frontend/megatron/default/images/ajax/ststus.png"></a>
<?php } ?>
</div>
<?php } ?>
Try this!
IN codeigniter I am repeatedly using the controllers to load all the templates of my page....
I have divided the page into header, top navigation, left navigation and content and footer.
This is what I do at present
public function get_started() {
if (test_login()) {
$this->load->view('includes/header');
$this->load->view('includes/topnav');
$this->load->view('includes/leftbar');
$this->load->view('login_nav/get_started');
$this->load->view('includes/footer');
} else {
$this->load->view('errors/needlogin');
}
}
Is there any jquery-ajax helpers or plugins in codeigniter which would allow me to keep header footer and topnavigation static and allow me to load specific views using ajax.
thanks in advance..
You can use the constructor to set your static header:
//in your controller
public $data;
function __construct()
{
$this->data['header'] = 'static_header';
$this->data['static_footer'] = 'static_footer';
}
function get_started(){
if (test_login()) {
$this->data['subview'] = 'login_nav/get_started';
} else {
$this->data['subview'] = 'errors/needlogin';
}
$this->load->view('template',$this->data);
}
function get_page(){
$view = $this->load->view('your_dynamic_view','',TRUE);
print json_encode(array('success' => TRUE, 'view' => $view);
}
// in your template.php
<div id="header"><?php echo $this->load->view('header');?></div>
<div id="subview"><?php echo $this->load->view('subview');?></div>
<div id="footer"><?php echo $this->load->view('footer');?></div>
// in your script - used to load dynamic view on you subview div
<script type="text/javascript">
$.get('controller/get_page',{},function(data){
if(data.success){
$('#subview').html(data.view);
}
},'json')
</script>
Message me if there's a problem with my code
Happy coding ---> :D
The answer from PinoyPal is theoreticaly correct, but it didn't work for me in practice because it lacks one major detail: a route.
Take a look at this part of their script:
// in your script - used to load dynamic view on you subview div
<script type="text/javascript">
$.get('controller/get_page',{},function(data){
if(data.success){
$('#subview').html(data.view);
}
},'json')
</script>
Here in place of 'controller/get_page' there should be a url for an actual GET request. This is how it is generally supposed to look:
$("a.your_navigation_element_class").on('click',function(e){
e.preventDefault(); //this is to prevent browser from actually following the link
var url = $(this).attr("href");
$.get(url, {}, function(data){
if (data.success){
$('#subview').html(data.view);
}
},'json')
});
Now here's a question: where will this GET request end up? In the default controller route, that's right. This is why you need to 1) modify your request url and 2) set up a route, so that this request will be passed to an ajax-serving controller. Or just add an ajax-serving function to your default controller and re-route ajax requests to it.
Here follows how it should all look wrapped up
In ...\application\controller\Pages.php:
class Pages extends CI_Controller {
...
public function serve_ajax ($page) {
$view = $this->load->view($page, '', TRUE);
print json_encode( array('success' => TRUE, 'view' => $view);
}
...
}
In ...\application\config\routes.php:
...
$route['ajax/(:any)'] = 'pages/serve_ajax/$1';
On your page:
...
<body>
...
<div id="page"></div>
...
<script>
$("a.navigation").on('click',function(e){
e.preventDefault();
var url = $(this).attr("href");
$.get("/ajax" + url, {}, function(data){
//The trailing slash before "ajax" places it directly above
//the site root, like this: http://yourdomain.com/ajax/url
if (data.success){
$('#page').html(data.view);
}
},'json')
});
</script>
</body>
And you're all set.
My JQuery does not fire up the sanitize function.I need to take the value from the input field name ,and display it in path input field. Why isn't it working ? The page where all this code is written is called new_page.php , so when the ajax_request function gets fired it does not point to an external page but here on the same page. I use PHP 5.3 and HEIDISQL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
include('conect.php');
if(($_POST)&&(!empty($_POST['name']))&&(!empty($_POST['path'])) ){
$name=$_POST['name'];
$path=$_POST['path'];
if(isset($_POST['sanitize'])) {
$title=$_POST['sanitize'];
$title = strip_tags($title);
// Preserve escaped octets.
$title = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', '---$1---', $title);
// Remove percent signs that are not part of an octet.
$title = str_replace('%', '', $title);
// Restore octets.
$title = preg_replace('|---([a-fA-F0-9][a-fA-F0-9])---|', '%$1', $title);
$title = strtolower($title);
$title = preg_replace('/&.+?;/', '', $title); // kill entities
$title = str_replace('.', '-', $title);
$title = preg_replace('/[^%a-z0-9 _-]/', '', $title);
$title = preg_replace('/\s+/', '-', $title);
$title = preg_replace('|-+|', '-', $title);
$title = trim($title, '-');
echo $title;
}
mysql_query("UPDATE menus SET name='$name' , path='$path'");
}
?>
<html>
<head>
<script type="text/javascript" src="/javascript/jquery-1.8.2.min.js"> </script>
<script>
// create the XMLHttpRequest object, according browser
function get_XmlHttp() {
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(php_file, tagID) {
var request = get_XmlHttp(); // call the function for the XMLHttpRequest instance
// create pairs index=value with data that must be sent to server
var the_data = 'sanitize='+document.getElementById('name').innerHTML;
request.open("POST", php_file, true); // set the request
// adds a header to tell the PHP script to recognize the data as is sent via POST
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(the_data); // calls the send() method with datas as parameter
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(tagID).innerHTML = request.responseText;
}
}
}
</script>
</head>
<body>
<form action="<?php $_PHP_SELF ?>" method="post">
<label for="nume">Name</label><input type="text" name="name" id="name" onchange="ajaxrequest('new_page.php', 'path')" />
<label for="cale">Path</label><input type="text" path="path" id="path" />
<input type="submit" name="submit"/>
</form>
</body>
</html>
As already mentioned, you cannot invoke PHP functions using JavaScript because one is a server-side technology and the other is client-side technology and is only executed on the local browser.
The suggested approach for dealing with data, databases, and user input is to use an MVC architecture with ActiveRecord paradigm for data access. If done correctly, all your data should be sanitized within the active record model before committing to the database.
I know this is an old post but I think this will help people searching for this question.
As Zorayr said, PHP is a server-side based language and Javascript or derivatives are client-side. That's because you can not invoke PHP functions from the JS code.
But instead of call a function, you can fire the function with a processed form as you have in your code. The other way is to make a PHP Class and in the same file initialize it.
Example:
<?php
Class MyClass {
function __construct()
{
echo "hello world.";
}
}
$init = new MyClass();
?>
This way you can pass arguments and do whatever more clear.
I'm new to stackoverflow and to CodeIgniter and I'm currently experimenting on some simple code examples I have found on the Internet in order to get a start. The one I'm working on right now is a form which uses CI and Ajax (jQuery) along with saving the inputs of the form in a database and then display the most recent of them on the same page as the form.
If I confused you it's the 4.7 application example from here. The initial source code lies here but I have modified it in order to work with the latest release of CI and I quote all my MVC files just below.
Controller:
<?php
class Message extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->helper('url');
$this->load->helper('security');
$this->load->model('Message_model');
}
function view()
{
//get data from database
$data['messages'] = $this->Message_model->get();
if ( $this->input->is_ajax_request() ) // load inline view for call from ajax
$this->load->view('messages_list', $data);
else // load the default view
$this->load->view('default', $data);
}
//when we pres the submit button from the form
function add()
{
if ($_POST && $_POST['message'] != NULL)
{
$message['message'] = $this->security->xss_clean($_POST['message']);
$this->Message_model->add($message);
}
else
{
redirect('message/view');
}
}
}
?>
Model:
<?php
class Message_model extends CI_Model
{
function __construct()
{
parent::__construct();
$this->load->database();
}
function add($data)
{
$this->db->insert('messages', $data);
}
function get($limit=5, $offset=0)
{
$this->db->order_by('id', 'DESC');
$this->db->limit($limit, $offset);
return $this->db->get('messages')->result();
}
}
?>
Views
default.php:
<!-- called using message/view -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<?php echo base_url('js/jquery-1.8.1.min.js'); ?>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submit').click(function(e)
{
e.preventDefault();
var msg = $('#message').val();
$.post("", {message: msg}, function() {
$('#content').load("");
$('#message').val('');
});
});
});
</script>
</head>
<body>
<?php echo form_open("message/add"); ?>
<input type="text" name="message" id="message">
<input type="submit" value="submit" name="submit" id="submit">
<?php echo form_close(); ?>
<div id="content"></div>
</body>
</html>
messages_list.php:
<!-- called from ajax call -->
<ol>
<?php foreach ($messages as $cur): ?>
<li><?php echo $cur->message; ?></li>
<?php endforeach; ?>
</ol>
The problem mainly lies in the 1st of the views (default.php). That is, if I omit the e.preventDefault(); line from the javascript code then the form loads a different page (message/add as the form action parameter implies) which is a blank page, also cancelling the ajax behavior of my application that way.
On the other hand, if I actually add this line then the add method of my message controller isn' t called, thus not adding what I've typed into the database.
Finally, I tried the following js code instead of the other above:
$(document).ready(function()
{
$('#submit').click(function(e)
{
e.preventDefault();
var msg = $('#message').val();
$.post("<?php echo base_url(); ?>message/add", {message: msg}, function() {
$('#content').load("");
$('#message').val('');
});
});
});
but that way it seems as the $.post() crashes because nothing is executed in the function which is supposed to run on a successful post() call.
Any help appreciated and sorry for the big post. :)
You are correct that you must call e.PreventDefault();, but you must also deal with the response from the callback function, which you are not. The callback takes a few arguments but the first one is what you're interested in, it is the response from your server. I've denoted it as r below:
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
var msg = $('#message').val();
$.post("<?php echo base_url(); ?>message/add", {message: msg}, function(r) {
//do something with r... log it for example.
console.log(r);
});
});
});
I've also removed $.("#content").load(...);. This would actually perform another AJAX request when the first one is complete.
Now, inspecting your controller...please refrain from using $_POST. CodeIgniter provides you with $this->input->post() as part of the Input Library. If you turn on Global XSS filtering in config/config.php you won't have to xss clean it either. You can clean on a post-by-post basis by using $this->input->post('name', true);
I recommend this instead:
function add(){
$m = $this->input->post('message', true);
if($m){
$this->Message_model->add($m);
}
}
The problem doesn't lie with the CI, its the JS that is wrong,
$(document).ready(function()
{
$('#submit').click(function(e)
{
e.preventDefault();
var msg = $('#message').val();
$.post("<?php echo base_url(); ?>message/add", {message: msg}, function() {
$('#content').load("<?php echo base_url(); ?>/message/view");
$('#message').val('');
});
});
});
The e.preventDefault() is used to stop the default behaviour of the submit button (which will take you to message/add), which we don't want. You are correct in adding the URl paramter to the $.post() function later, but in the callback function, the .load loads the URL that is passed to it into the #content, so without passing any url, of course there won't be anything to load.
at the moment I've got a simple bit of code to display messages on a site.
the page includes an iframe that self refreshes every 90 seconds, and the iframe displays the contents of a mysql table limited to the most recent (30) posts.
I've been reading up on ajax and it still confuses me, i've never got it working properly, and would like to know, for a small task like this, is it really worth it ?
<head>
<META HTTP-EQUIV="refresh" CONTENT="90; URL=">
</head>
<body>
<?
$newsarray = array();
$sql = "SELECT * FROM `news` ORDER BY `date` DESC LIMIT 30";
$result = mysql_query($sql);
if(mysql_error()) { print mysql_error(); } else {
while($stuff = mysql_fetch_assoc($result))
{ array_push($newsarray, $stuff); }
foreach($newsarray as $newsstory) { ?>
<div class="newsstory">
<h2><? echo $newsstory['headline']; ?></h2>
<div><? echo $newsstory['story']; ?></div>
<label>By <? echo $newsstory['user']; ?> on <? echo $newsstory['date']; ?></label>
</div>
<? } ?>
</body>
It would be as simple as adding the jQuery library to your exsiting page and adding the following code:
<div id="result"></div>
Manually Fetch Page
<script language="javascript">
function updatestuff() {
$.ajax({
url: 'mypage.php', // The source
cache: false, // Make sure results are not cached
success: function (data) {
$('#result').html(data); // Update data once retrieved
}
});
}
setInterval("updatestuff()",90000); // In Milliseconds
</script>
This would run the function updatestuff() every 90 seconds which would update the <div> with content fetched from mypage.php.
If you want something that automatically updates every 30seconds then definitely Ajax is the way to go.
Some say (myself include) that you'd be insane not to use jQuery to do this.