I'm using Jquery colorbox to implement a popup windows. This pop-up is immediately open and it's working. But for the first loading page, just the first loading, the pop-up can't load the content.
jQuery(document).ready(function defaultPopup(){
var direct = '<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('popup')->toHtml(); ?>'
if(direct){
jQuery('#popup_home').colorbox({open:true,html:direct,overlayClose:false});
return false;
}
});
<div id="popup_home"></div>
You should escape special characters (<>) in your string.
For the web browser the content of your direct variable is an HTML tag without content.
Try this:
jQuery(document).ready(function defaultPopup(){
var direct = '<?php echo $this->getLayout()->createBlock(\'cms/block\')->setBlockId(\'popup\')->toHtml(); ?>'
direct = $('<div/>').text(direct).text() // escaping characters in the initial string
if(direct){
jQuery('#popup_home').colorbox({open:true,html:direct,overlayClose:false});
return false;
}
});
<div id="popup_home"></div>
Related
while download file using codeigniter in IE it redirects image path with out showing any popup like firefox or chrome to download file
code I am using in my controller:
public function download_file($filename)
{
$this->load->helper('download'); //load helper
$data = file_get_contents('wall-images/'.$filename); // Read the file's contents
$name = $filename;
force_download($name, $data);
}
I use javascript & it works for all browsers.
<a target="_blank" class="btn btn-primary" id="download" href="#">Download File</a>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#download').click(function(){
var url = "<?php echo site_url($filename); ?>";
document.location = url;
});
});
</script>
IE does not support neither navigating to a data URI nor the download attribute.
You can use navigator.msSaveBlob to save file for IE 10+.
You can check window.navigator.msSaveBloband write IE specific Code otherwise use existing code to save file.
You can check following link for more details:
Saving files locally using Blob and msSaveBlob
Can anyone explain with examples for everyone how to integrate CKEditor and external file browser? Where to put this code:
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: '/browser/browse.php',
filebrowserUploadUrl: '/uploader/upload.php'
});
And what shoud return these:
browse.php
upload.php
I think the answer for this question should be here. So many peeople asked this question, but there is no definitive guide to this plugin. SO members, maybe some of you can?
filebrowserBrowseUrl will be the url of a page that allows a user to choose a file on the server. This page will be opened in a new window.
These arguments will be added to the url CKEditor=editor&CKEditorFuncNum=2&langCode=en-gb
CKEditor is the current editor
CKEditorFuncNum is the function to call(pass this value to callFunction)
langCode is the language
in the popup window call
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, 'img_url');
to set the selected image and optionally window.close(); to close the window.
e.g.
<?php
$files = glob('/images/directory/*.{jpg,png,gif,bmp}', GLOB_BRACE);
if (count($files) > 0){
echo 'Select a file <ul>';
foreach ($files as $file) {
echo '<li><button onclick="select(this)" data-name="'.$file.'">.basename($file).</button></li>';
}
echo '</ul>';
}
?>
<script>
function select(el){
window.opener.CKEDITOR.tools.callFunction(<?php echo (int)$_GET['CKEditorFuncNum'] ?>, el.getAttribute('data-name'));
window.close();
}
</script>
filebrowserUploadUrl will be the url that handles the image upload.
Its just a standard file upload handler except you run some js on the page.
and same arguments are added to the url as with filebrowserBrowseUrl.
<?php
... handle the upload
?>
<script>
window.parent.CKEDITOR.tools.callFunction(<?php echo (int)$_GET['CKEditorFuncNum'], ', ', json_encode($uploaded_image_url), ', ', json_encode($message_on_failure) ?>);
</script>";
Simple Demo http://jsfiddle.net/mowglisanu/f2ztp/show/ (upload doesn't actually work though)
http://jsfiddle.net/mowglisanu/f2ztp/
http://jsfiddle.net/mowglisanu/GuA6s/show/
http://phpfiddle.org/api/run/dv4-e70
In my page I have ajax tabs and every tab consists of some javascript functions. I want to load each javascript function only when the tabs are clicked. But the functions are not working in tabs. How can I solve this?
My codes are as follows:
PHP:
echo "<script type='text/javascript'>";
echo "function check(){";
echo "alert('hello');";
echo "}";
echo "</script>";
echo "<div><a href='javascript:check();'>Check</a></div>";
Ajax:
new Ajax.Request(
test.php,
{
method:'post',
onSuccess: function(data){
var tmp=data.responseText;
$$('.tolga').invoke('insert',tmp);
}
});
HTML:
<div class="tolga">
</div>
I have some tabs whose contents are fully functional parts of my website.
For instance, in my admin area, I have tabs [add/delete album][add photo][delete photo]. I'm technically dividing the admin area via tabs.
I'm using ajax to load the content into these tabs. tab content area is a div.
The view that is inside the tab content area also uses ajax to load stuff.
These are ajax calls that operates inside the tab content area.
Everything works fine as long as the view inside the tab content area stays same or only part of it changes. But when certain interactions inside tab content area return a whole new view, tab content area would not show them.
I know what happens is that this new view that is returned is not passed into the tab content area div.
In firebug, I can see that ajax success function response shows the new view that is returned.
But I do not know how to pass that new view to the tab content area.
I would appreciate it if someone could help me out in explaining how this could be solved or how contents inside tabs are managed in CI.
adminTabsview.php
<ul id="adminTabs">
<li ><?php echo anchor('#album_addDelete', 'Album Add/Delete'); ?></li>
</ul>
<div id="adminTabsContent"></div>
$(document).ready(function(){
$('#adminTabs a').on({
click: function (evt){
evt.preventDefault();
var page = this.hash.substr(1);
adminTabsAjaxCall(page);
}
});
});
function adminTabsAjaxCall ($data){
$.ajax({
type: "POST",
url: "index.php/adminsite_controller/"+ $data + "/",
dataType: "html",
data: $data,
statusCode: {removed}
},
success: adminTabContent
});
function adminTabContent (data){
$('#adminTabsContent').html(data);
}
albumsEditDeleteView.php
(this is a view that gets loaded into the tab contentarea div)
<div id="adminTabsContent">
<div id="albumList">
<ul>
<li>
Asdf
<a class="add" href="http://localhost/myPHP/photoalbums/index.php/Albums_Controller/add_album/301/Asdf/1/28/0">[ add ]</a>
<a class="delete" href="http://localhost/myPHP/photoalbums/index.php/Albums_Controller/delete_album/301/Asdf/1/28/0">[ delete ]</a>
</li>
</ul>
</div>
</div>
$(document).ready(function(){
$('#albumList').on({
click: function (evt){
evt.preventDefault();
var $clickedElement = evt.target.tagName;
if ($clickedElement == 'A' ){
var urlarray = url.split('/');
$chosen.albumid = urlarray[8];
$chosen.albumname = urlarray[9];
$chosen.lft = urlarray[10];
$chosen.rgt = urlarray[11];
$chosen.nodeDepth = urlarray[12];
if ($class == 'add'){
albumajaxcall($chosen);
}
if ($class == 'delete'){
deleteajaxcall($chosen);
}
}
}
});
});
function albumajaxcall($data){
$.ajax({
type: "POST",
url: "index.php/Adminsite_Controller/add_album/",
dataType: "json",
data: $data,
statusCode: {removed}
},
success: adminTabContent
});
}
function adminTabContent(data){
$('#adminTabsContent').html(data);
}
//heres the view file that has to replace the original view inside
//tabcontent area
//addnode_view.php
<?php echo form_open('Albums_Controller/update_albumSet');?>
<input type="text" name="newAlbum" id="newAlbum" value=""/>
<input type="submit" name="submit" value="Submit" />
<?php echo form_close();?>
<?php
//heres the controller function
function add_album(){
$levelData ['albumid'] = $this->input->post('albumid');
<!-- removed-->
$levelData ['main_content'] = 'addnode_view';
$this->load->view('includes/template', $levelData);
}
//And heres the controller method that loads
//the original page (albumsEditDeleteView.php) - this is the original view
//that gets loaded into the tab- I get stuck when this view
//has to be **totally** replaced through links in the view)
function album_addDelete(){
$allNodes ['myAlbumList'] = $this->Albums_Model->get_albumList();
echo $this->load->view('albumsEditDelete_view', $allNodes);
}
thanx in advance.
basically what you need to do is load whatever new view youll be putting in the tab in the controller function(adminsite_controller/whatever function) that is handling your ajax.
this will basically echo out the view file, which will be viewed as the success variable of your ajax function.
so you have something like this then for the success part of your ajax
success:function(msg){adminTabContent(msg);}
and in your controller in codeigniter you'll load a view the standard way, but since this will be only loading a piece of the page you may need to create a new view file thats just the div that will be there. You will do all your data gathering the same way you would if it wasn't ajax.
$data['some_data'] = $this->some_model->some_function();
$this->load->view('someview', $data);
I am trying to refresh some elements on my page every so often. I know theres a million topics on here about that and I have tried to get mine working, but here is what I need to refresh..
This is the code that gets generated when the page loads:
<div id="galleria">
<?php
$a = array();
$dir = '../public/wp-content/uploads/2012/01';
if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if (preg_match("/\.png$/", $file)) $a[] = $file;
elseif (preg_match("/\.jpg$/", $file)) $a[] = $file;
elseif (preg_match("/\.jpeg$/", $file)) $a[] = $file;
}
closedir($handle);
}
$totalImgs = count($a);
$imgUsed = array();
for ($j = 0; $j < 100; $j++)
{
do
{
$randIndex = mt_rand(0, $totalImgs);
}
while ($imgUsed[$randIndex] === TRUE);
$imgUsed[$randIndex] = TRUE;
echo "<img src='" . $dir . '/' . $a[$randIndex] . "' />";
}
?>
</div>
I would like to automatically refresh this every 10 seconds but not reload the page. I have read up on ajax and it seems this is possible but I cannot seem to get it to work.
All this is doing is showing the galleria div, and loading the 100 images inside the div. Then the galleria script takes over and displays it nicely. Will AJAX work better or JQuery?
Thank you for your help!
"Will AJAX work better or jQuery?" -- AJAX is a technique, jQuery is a library. As it turns out, jQuery has an excellent API for AJAX.
Let's call this bit of PHP "galleria.php". On original page load, it is inserted into the parent PHP page using good ol' <?php include('galleria.php')?>. Now the end user is seeing the full initialized page.
To update it, you have a number of AJAX options available, but the easiest is to include jQuery on your page and then you can use .load() in a script:
var updateGallery = setInterval(function() {
$('#someDiv').load('galleria.php');
}, 10000);
There's room for tweaking... maybe galleria.php doesn't include the <div id="galleria">, which is set on the page. In which case you would load right into #galleria instead of #someDiv and save yourself an unnecessary container. Maybe you cache the $('#someDiv') object by declaring it in a different scope so that it can be re-used. But this is the general gist.
Use setInterval function with ajax call.
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
As I wrote here you can fill a div with a jQuery ajax call.
<html>
<head>
<script type="text/javascript">
function refresh_gallery(){
$.ajax({
type: "POST",
url: "generate_gallery.php", // your PHP generating ONLY the inner DIV code
data: "showimages=100",
success: function(html){
$("#output").html(html);
}
});
}
$(function() {
refresh_gallery(); //first initialize
setTimeout(refresh_gallery(),10000); // refresh every 10 secs
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>