OK here is my code
portfolio.php
<select name="portfolio" id="portfolio_dropdown" class="service-dropdown">
<?php foreach($years as $year){ ?>
<option value="<?php echo $year['year']; ?>"><?php echo $year['year']; ?></option>
<?php } ?>
</select>
<div class="loading"></div>
<div id="portfolio">
<div id="port-cont">
<?php foreach($portfolios as $portfolio){ ?>
<div class="video">
<div class="play">
Play
</div>
<iframe src="http://www.youtube.com/v/<?php echo $portfolio['url']; ?>"frameborder="0" allowfullscreen></iframe>
<h3><?php echo $portfolio['title']; ?></h3>
<p><?php echo $portfolio['text']; ?></p>
</div>
<?php } ?>
</div>
</div>
my js code
$("body").on('change','#portfolio_dropdown',function(){
var year = $(this).val();
$.ajax({
type: "POST",
url: "catalog/controller/portfolio.php",
data: "year="+year,
beforeSend: function(){
$(".loading").show();
$("#portfolio").empty();
},
success: function(portfolio_data){
$(".loading").hide();
$("#portfolio").html(portfolio_data);
}
});
});
my portfolio controller file
if(isset($_POST['year'])){
include_once "../../system/validation.php";
include_once "../model/DataBase.php";
include_once "../model/Display.php";
$year = integer($_POST['year']);
$get_portfolio_data = new Display("portfolio");
$portfolios = $get_portfolio_data->getDataByColumnName("year",$year);
include_once "../view/themes/default/template/portfolio_data.php";
exit();
}
My portfolio file "the first one " i get my data with another function that i get my last year(2014) portfolio data
so when i change the year i call my controller file to get the data related to that year
my question here is how to return $portfolios that i got from my controller file so i don't have to change my template file code or include another file as i did
i mean i need to reload my portfolio.php template content
i tried something like this
$("body").on('change','#portfolio_dropdown',function(){
var year = $(this).val();
$.ajax({
type: "POST",
url: "catalog/controller/portfolio.php",
data: "year="+year,
beforeSend: function(){
$(".loading").show();
$("#portfolio").hide();
},
success: function(portfolio_data){
$(".loading").hide();
$("#portfolio").show().load("portfolio" + " #port-cont");
}
});
});
but i don't know how to send my new $portfolios data to the same div without including another template file
Actually i'm little confused how to do this properly
So i hope you got what i want to do :)
You can create a separate portfolio-div.php file that only contains the code you want to replace with, and call that from the $.ajax call.
Or you can add a $_GET parameter like ?skiptemplate=1 to portfolio.php so that when you call the file with that parameter, the surrounding template markup is skipped when the file is called from an ajax call.
If you do not have the opportunity to change the server-side code, you can load the whole template file again, but extract only the #port-cont part to replace the existing content. Don't use load() (which itself will call an URL), use html() instead:
$("#portfolio").show().html(portfolio_data);
(though this will insert all HTML, not only the #port-cont part)
$("#portfolio").html(portfolio_data)
Just pass the parameter into html
Related
So, for a post loop, $post->ID is used to get the post id's.
Is there a way to "change" it to a custom "id"?
Here is what I mean by it:
So, I have a page that is passed onto a template via ajax as following:
There is a first php template called "first.php".
In this file, I have a post loop which contains a button:
$id = get_the_ID();
<?php echo '<button type="button" class="rh_show_image" data-post_id="' .$id. '">' ;?>
<?php echo get_post_meta($post->ID, 'rh_image', true); ?>
<?php echo '</button>';?>
This button has data-post_id which contains the post id. When it is clicked, then a second.php is loaded via ajax:
<script>
jQuery(document).ready(function() {
jQuery('.rh_show_image').click(function(e) {
e.preventDefault();
var rh_contact_form_id = jQuery(this).data("post_id");
jQuery.ajax({
type: "GET",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
dataType: 'html',
data: ({ action: 'rh_second_php', rhc_post_id: rh_contact_form_id}),
success: function(data){
jQuery('#rh_iamge_' + rh_contact_form_id).html(data);
},
error: function(data)
{
alert("Error!");
return false;
}
});
});
});
</script>
When the second.php is called, as you can see from the script above, the post_id of the post is saved and parsed onto the template (data: ({ action: 'rh_second_php', rhc_post_id: rh_contact_form_id}),)
Then in the second.php, I have the following:
<!--Show title-->
<?php echo get_the_title($_REQUEST['rhc_post_id']); ?>
<!--Show image-->
<div class="images">
<?php
$I_will_call_you = callme_image();
foreach ($I_will_call_you as $slideshowimage)
{
echo "<img src='{$slideshowimage}' />";
}
?>
</div>
So, essentially, I am using $_REQUEST['rhc_post_id'] instead of $post->ID
Here is the problem
In the image div from the second.php, it does not show any images because it does not recognized the post id from $_REQUEST['rhc_post_id'].
So, is there a way to make it equal between $post->ID and $_REQUEST['rhc_post_id']?
Something like this: $_REQUEST['rhc_post_id'] = $post->ID
Thanks guys!
EDIT: The image div works fine when it is placed with a post loop, instead via ajax. So, the code itself works fine.
Edit 2: Syntax in the second.php is fixed now
i am newbie on codeigniter but trying to develop simple CMS on it.
my question is i have a side column in my main CMS view which have several links to other views,what i want to do is to load all the links in main CMS view in center div instead of going to another page every time. I know i can achieve this task through ajax but dont know how to do it on CODEIGNITER.
Here is how i want to acheieve it to my knowledge.
<script type="text/javascript">
function onLinkClick(value){
jQuery('#mang_server').load(value,
function(){alert('Content Successfully Loaded.')}
);
}
</script>
<body>
<div id="main">
<div id="header"> <img src="../img/logo.gif" width="101" height="29" alt="" />
<div id="middle">
<div id="left-column">
<h3>Header</h3>
<ul class="nav">
<?php foreach($ops as $operations)
{$op_name = $operations['admin_op'];
$op_link = $operations['link_to'];
?>
<li><?php echo $op_name ;?></li>
<?php } ?>
</ul>
Take a look on this simple example for ajax in codeigniter:
$.ajax({
url: '<?php echo base_url() ?>/controller_namer/method_name',
type: 'POST',
data: {view_param: "sidebar_html"},
success: function(response){
$('#div_id').html(response);
}
});
Now go to controllers/controller_name.php and create a method method_name;
function method_name() {
// Get Post Data
$View_Name = $this->input->post("view_param");
$this->load->view($View_Name);
// Alternate is create your html here
// ......
}
hope this will help you.
#jogesh_pi
View Portion:
<script>
function onLinkClick(value){
/*Query('#mang_server').load(value,
function(){alert('Content Successfully Loaded.')}
);*/
$.ajax({
url: '<?php echo base_url() ?>/admin/load_view/',
type: 'POST',
data: {view_param: "value"},
success: function(response){
//$('#mang_server').html(response);
alert("response recieved");
}
enter code here
});
}
</script>
<li><?php echo $op_name ;?></li>
Controller Portion : admin
public function load_view($view_name){
$data['view_link'] = $this->admin_model->load_view_model($view_name);
$this->load->view($data);
}
Model portion : load_view_model
public function load_view_model($view_name){
$this->db->where('admin_op',$view_name);
$query = $this->db->get('admin_operations');
if($query->num_rows()>0){
foreach($query->results() as $rows ){
$data['link'] = $rows->link_to;
}
return $data->result_arrays();
}
}
I need to execute the following code, without refreshing the page... this code already includes ajax but where am I going wrong with getting it to execute without refreshing the page....? the .vote class is attatched to an anchor in my index.php file, and I need this all to still work when the anchor is clicked if possible. Re-coding this to perform on a button click would not be ideal.
$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "up.php",
data: dataString,
cache: false,
success: function(html){
parent.html(html);
}
});
}
else
{
$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "down.php",
data: dataString,
cache: false,
success: function(html){
parent.html(html);
}
});
}
});
here is the html from my index.php
<div id="main">
<div id="left">
<span class='up'><img src="up.png" alt="Down" /></span><br />
<?php echo $totalvotes1; ?><br />
</div>
<div id="message">
<?php echo $message1; ?>
</div>
<div class="clearfix"></div>
</div>
<div id="main">
<div id="right">
<br />
<?php echo $totalvotes2; ?><br />
<span class='down'><img src="down.png" alt="Down" /></span>
</div>
<div id="message">
<?php echo $message2; ?>
</div>
<div class="clearfix"></div>
</div>
You need to either enclose your code with $(document).ready(function() {});, or stick your code at the end of the <body> tag. Personally, instead of making the browser parse synchronous javascript before the DOM has loaded (in the <head> section), I stick it near the end. This is also what Bootstrap recommends.
Without a DOM loaded, there are no elements created for jQuery to register Events with, and so your code literally sits there doing nothing after being parsed.
Aside from that, the .click() function is executed on click. It doesn't matter what element it's bound to. If it's clickable, it's executable.
Also to answer your question properly: <a href=""> will refresh the page. You want to use
<a href="#">. This, however, will make you jump to the top of the page. You could also define a <label> and use #labelname instead to avoid this. Or just don't use href at all. It's not needed.
Also, a little trick for echoing variables into HTML is to use <?= $var ?>
My script.js performs a request to get_all.php which has three variables to output (echo) $all_categories, $all_brands and $all_filters. Now I want to manipulate these in three different areas in my index.html.
I want to place $all_categories in <div id="caregories">, $all_brands in <div id="vrands"> and $all_filtesr in <div id="filters">.
How can I place them separately in each div ? I know how to place all of them in one <div> but have no idea how to place each variable, received, separately.
index.php
<?php // Startup ?>
<?php
define('APP_PATH', '../');
define('SYS_PATH', '../system/');
define('STYLES', 'assets/styles/');
define('SCRIPTS', 'assets/scripts/');
require_once SYS_PATH . 'initializers/all.php';
?>
<?php // Controller ?>
<?php
?>
<?php // Viewer ?>
<?php template('header'); ?>
<body>
<div id="static_menu">
<ul>
<li>Categories</li>
<li>Brands</li>
<li>Filters</li>
<li>Social</li>
</ul>
</div>
<hr>
<div id="categories">
<ul></ul>
</div>
<hr>
<div id="brands">
<ul></ul>
</div>
<hr>
<div id="filters">
<ul></ul>
</div>
<hr>
<div id="social">
<ul></ul>
</div>
<hr>
</body>
<?php template('footer'); ?>
script.js
// DOM ready
$(function(){
// get categories, brands, filters and social
$.ajax({
type: "POST",
url: "get_all.php"
}).done(function(data){
// manipulate recieved in three different divs
})
});
get_all.php
<?php // Startup ?>
<?php
define('APP_PATH', '../');
define('SYS_PATH', '../system/');
define('STYLES', 'assets/styles/');
define('SCRIPTS', 'assets/scripts/');
require_once SYS_PATH . 'initializers/all.php';
?>
<?php // Controller ?>
<?php
$result_arr = $category->select_all();
$all_categories = $html->list_anchor_loop($result_arr, 'category');
echo $all_categories
$result_arr = $brand->select_all();
$all_brands = $html->list_anchor_loop($result_arr, 'brand');
echo $all_brands;
$result_arr = $filter->select_all();
$all_filters = $html->list_anchor_loop($result_arr, 'filter');
echo $all_filters;
Have your PHP script send the result as a JSON object (see json_encode).
In your JS, you'll receive an object, say resp, which will have three properties, resp.categories, resp.filters and resp.brands
For more details and specificity, post some code.
In get_all.php :
$result = array(
'categories' => $all_categories,
'brands' => $all_brands,
'filters' => $all_filters
);
echo json_encode($result);
In script.js
$.ajax({
type: "POST",
url: "get_all.php",
dataType : 'json', //specify that data will be returned as JSON
}).done(function(data){
// use data.categories, data.brands, data.filters here
// manipulate recieved in three different divs
})
If your ajax call returns through JSON, it is quiet easy to insert the data into the divs you need:
PHP
<?php
$return = array(
'categories'=>$all_categories,
'vrands'=>$all_brands,
'filters'=>$all_filters
);
echo $_GET['jsoncallback'].'('.json_encode($return).')';?>
JQuery:
<script type="text/javascript">
$.getJSON("URL_TO_PHP?jsoncallback=?",{
/*DATA TO SEND*/
},function(response){
$('#categories').html(response.categories);
$('#vrands').html(response.vrands);
$('#filters').html(response.filters);
});
</script>
You may use a library that does that automatically, like http://phery-php-ajax.net you may pass JSON data directly from PHP while still manipulating the DOM in order. Phery doesn't work with URLs, but with function callbacks, and you may assign to the DIVs from inside PHP itself, like in your case:
<?php
Phery::instance()->set(array(
'get_all' => function($data){
/* globals, initialization, etc*/
$r = new PheryResponse;
$result_arr = $category->select_all();
return
$r
->jquery('#categories')->html($html->list_anchor_loop($result_arr, 'category'))
->jquery('#filter')->html($html->list_anchor_loop($result_arr, 'filter'))
->jquery('#brand')->html($html->list_anchor_loop($result_arr, 'brand'));
}
))->process();
Then call the get_all function from your DOMReady
$(function(){
phery.remote('get_all');
});
Done, everything gets filled for you, without any extra client-side code.
I have used a CMS built with PHP and MySQL. It works great and I have fully customized it to my liking. The only thing now to do is make a more efficient way of loading the data. When a user wants to select an article I want the browser to stay on the same exact page/url without reloading or redirecting. Here is a demo of the CMS: DEMO LINK
For example, the above line of code was exerted from the homepage.php script. It is an anchor tag for the user to select to view the whole content of a particular article, which was only partially displayed in the homepage. When this link is clicked, the user is directed away from the homepage and taken to the article's specific URL. How can I get the full article content page to load inside of the homepage and hide the original homepage content to avoid the page redirect problem. Is this something that can be done with this particular CMS? I can provide any PHP script from the CMS if needed. Thanks in advance.
ARCHIVE.php SCRIPT:
<?php foreach ( $results['articles'] as $article ) { ?>
<li>
<h2>
<span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><br><?php echo htmlspecialchars( $article->title )?>
</h2>
<p class="summary">
<?php if ( $imagePath = $article->getImagePath( IMG_TYPE_THUMB ) ) { ?>
<a href=".?action=viewArticle&articleId=<?php echo $article->id?>">
<div class="floated_child0" style="background-repeat:none; background-image:url('<?php echo $imagePath?>');"></div></a>
<?php } ?>
<?php echo htmlspecialchars( $article->summary )?> (more)
</p>
</li>
<?php } ?>
If you can get the content of the article using ajax and put that content below that title of that article, for ex let say you have a php function in backend which you can call to get the content of article given the article id then you can make a GET ajax request to get the article content and put in the desired div. something like:
<script language="javascript">
$("#view_more").click(function(){
var dataString = "id="+article_ID;
$.ajax({
type: "GET",
url: 'http://myhost.com/articles/getArticleContent',
data: dataString,
success: function(response) {
$('div #description').html(response);
}
});
return false;
});
</script>
update:27-11-2012
you can try something like this, if that helps you understanding better. it may not be exactly what you want but I hope it will help you understanding how you can proceed.
<?php foreach ( $results['articles'] as $article ) { ?>
<li>
<h2>
<span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><br><?php echo htmlspecialchars( $article->title )?>
</h2>
<p class="summary" id="<?php echo $article->id?>">
<?php if ( $imagePath = $article->getImagePath( IMG_TYPE_THUMB ) ) { ?>
<a href=".?action=viewArticle&articleId=<?php echo $article->id?>">
<div class="floated_child0" style="background-repeat:none; background-image:url('<?php echo $imagePath?>');"></div></a>
<?php } ?>
<?php echo htmlspecialchars( $article->summary )?> (more)
</p>
</li>
<?php } ?>
<script language="javascript">
function viewFullArticle(article_ID){
var dataString = "id="+article_ID;
$.ajax({
type: "GET",
url: 'http://myhost.com/articles/getArticleContent',
data: dataString,
success: function(response) {
$('p #'+article_ID).html(response); //assuming response is everything you want to display within summary paragraph
}
});
return false;
};
</script>