I can't start uploading files using jQuery Uploadify in Cake PHP - php

I've included the js and css files, in the frontend all is loaded correctly, but when I click on
Upload
nothing happens, not receiving any error in firebug.
Basically, I can't upload files. Even if the uploadify option "auto" is set to "true".
How to repair this? What can be wrong?
My code:
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'width': 500,
'height' : 400,
'overlayShow' : false
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#file_upload").uploadify({
"uploader": "/js/uploadify/uploadify.swf",
"script": "/uploadify/upload",
"cancelImg": "/img/uploadify/cancel.png",
"scriptData": {'type': 1},
'removeCompleted' : true,
'folder': '/uploads',
"auto": true,
"multi": false,
"onComplete": function(event, ID, fileObj, response, data) {
},
'onError': function (event, ID, fileObj, errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
}
});
});
</script>
<input type="file" id="file_upload" name="file_upload" />
Upload
Thanks

I would assume - since your using jQuery that the code should be as follows:
<script type="text/javascript">
$().ready(function() {
$('#upload').click(function() {
$('#file_upload').uploadifyUpload();
});
});
</script>
Upload
This would be more in line with the way jQuery usually works.

Shouldn't that be the onclick event?
Upload
If auto is set to true the files should upload automatically as soon as they are selected so you don't even need an upload link/button. Just put this inside your document ready function.
$("#file_upload").uploadify({
'uploader' : '/js/uploadify/uploadify.swf',
'script' : '/js/uploadify/uploadify.php',
'cancelImg' : '/js/uploadify/cancel.png',
'folder' : '/some_folder',
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',
'auto' : true});

Is it possible you need to use a complete form tag?
To get the multipart/form-data generated automagically you can do:
<?php $this->Form->create('Document', array('type' => 'file')); ?>
I don't know if uploadify requires a form tag but it seems logical that if the demo here shows a complete form tag that your test script should have one also -
http://uploadify.wdwebdesign.com.br/
This is the 3.0 demo - which might be newer than your version but the code on both demos shows a complete form. Again, your code as shown does not.

maybe you can try this:
href="javascript:$('#custom_file_upload').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('custom_file_upload',''))
from the offical demo
uploadifyupload

Related

Draggable divs not working if created by Ajax

I'm using jQuery and Ajax to load a bunch of divs into a scrollable div ("letterHolder"):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$(".letterHolder").html(result['letter_array']);
}
});
</script>
</head>
<body>
<div class="letterHolder">
</div>
</body>
</html>
The PHP script retrieves a list of filenames from the database and loads them into letterHolder, so it ends up looking like this:
<div class="letterHolder">
<div class="drag_letter">file1</div>
<div class="drag_letter">file2</div>
<div class="drag_letter">file3</div>
etc.
</div>
Now, I want to make those filename divs draggable, but this is not working:
$(".drag_letter").draggable({
cursor: 'move',
revert: true,
helper: 'clone'
});
It doesn't work if I put the draggable code into the page header, nor does it work if I put the code at the end of the page.
This was working fine before I tried creating the divs using Ajax.
I assume the reason this was working before you were using AJAX, but is not working with AJAX, is because you are calling draggable() with a selector for elements which are not yet in the DOM. If you call draggable() on the elements after receiving the AJAX result and appending the elements to the DOM it should work.
Using jQuery or java script append() function for adding DOM into an element instead of html()
add draggable after appending elements
you should send file names Like file1... file2... as a Json array From server
and rewrite this:
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$.each(result,function(k,v){
$(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
cursor: 'move',
revert: true,
helper: 'clone'
}));
});
}
});
</script>

how to use the dynamic PHP ajax data with the bootpag

How can I display the dynamic content of PHP with bootstrap pagination.The result is displaying using ajax call in div id 'msrResult', how to use that div in bootstrap pagination code. Here my code:
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master /lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<div id="content2">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
$('#page-selection').bootpag({
total: 23,
page: 1,
maxVisible: 10
}).on('page', function(event, num){
$("#content2").html("Page " + num); // or some ajax content loading...
});
</script>
</body>
</html>
<div id=msrResult></div>
First of all the "space" in the GitHub URL could produce 404 responses. You should delete it to get the script working ;)
Basically (as you can see at the authors website) clicking the page-buttons (they are showing up in #page-selection once the script is initialized correctly) triggers bootpag to toggle the content. In the .on() function you have the chance to place new content right before it shows up again.
In the script you've provided you write "Page X" in #content2 before it shows up. But in your case you want to load dynamic content in this div so you could do something like this:
$.ajax({
url: "source.php?site="+num
}).done(function(data) {
$( "#content2" ).html( data );
});
in the .on() function to load the dynamic php content in your #content2 div
Also see this JS fiddle for a demo: http://jsfiddle.net/628zL/3/
U can easily do that by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
If u like to use customised version, then u can try this-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
If u like to use more customization, u can try this options-
Warning
Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommanded.
Hardly recommendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even more can be found from here.
I think u have your complete answer.

pass value child window to parent [fancybox]

this is link to active fancyBox
<a class="demo-select fancybox.ajax" id="select-demo-vdo" href="<?php echo Yii::app()->createUrl("/admin/default/listProgram",array("user_id"=>$user_id));?>">select demo video</a>
<input type="text" id="demo-video-id" name="demo_video" value="" />
AND This is My Script
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$(".demo-select").fancybox({
maxWidth : 900,
maxHeight : 900,
fitToView : false,
width : '80%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
});
});
</script>
In List program view
foreach($lists as $file){
echo "<a href='#' class='thumbnail' onClick='selectVideo($file->id)'>";
echo "$file->name";
echo "</a>";
}
<script type="text/javascript">
function selectVideo(id){
$("#demo-video-id").val(id);
parent.jQuery.fancybox.close();
}
</script>
Problem is:: demo-video-id was updated But FancyBox not close. How to fix this. Thanks
Just use $.fancybox.close();.
fixed Problem layout before active jquery has facybox script and layout show in facybox has script too. Must delete script in layout was showed in facybox.

How to get fancybox to open a php

I'm trying to get fancybox to open a php file; the file contains this code <?php echo "hi"; ?>.
Now when I set the image href attribute to a jpeg file it loads fine. But when I set it to a php file it doesn't load. Can I have help trying to get it to load a php file.
<a class= "fancyimg" href="http://mydomain.com/jquery.fancybox-1.3.4/count.php" ><img src="http://mydomain.com/jquery.fancybox-1.3.4/fancyimg2.jpg">
Here is part of my code
<script type="text/javascript">
$(document).ready(function() {
$(".fancyimg").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
Use type attribute of fancybox as below to open php file.
$(".fancyimg").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'type' : 'iframe',
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
you can use something like this :
$(".fancyimg").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe',
padding : 5
});
});
and instead of href="http://mydomain.com/jquery.fancybox-1.3.4/count.php" put your link in a custom attribute called data-id like this :
<a class= "fancyimg" href="#" data-id="http://mydomain.com/jquery.fancybox-1.3.4/count.php" ><img src="http://mydomain.com/jquery.fancybox-1.3.4/fancyimg2.jpg"></a>

Jquery Not Loading PHP File

I have not been able to use JQuery/Ajax to load the content of my PHP file into a div tag.
Here is my page that is loading the file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function init() {
reloadChat();
setInterval (reloadChat, 5000);
}
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(){
$("#chatmenu").load("chat.php");
},
});
}
</script>
<body onLoad='init()'></body>
<div id='chatmenu'></div>
The PHP file I am loading (chat.php) is in the same folder, and is just an echo statement:
<?php echo "test"; ?>
To make sure it was not a problem with my Javascript functions, I added an alert under the success function, and it did alert me every 5 seconds, so I think it is something with the load statement.
Use .load() straight away, no need to make an Ajax request first:
function reloadChat() {
$("#chatmenu").load("chat.php");
}
Update:
I notice that in your example code, you close your body-tag before your div element.
<body onLoad='init()'></body> <!-- This ain't right -->
<div id='chatmenu'></div>
Try this instead:
<body onLoad='init()'>
<div id='chatmenu'></div>
</body>
Try this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function init() {
reloadChat();
setInterval (reloadChat, 5000);
}
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(response){
$("#chatmenu").text(response);
},
});
}
</script>
<body onLoad='init()'></body>
<div id='chatmenu'>
</div>
Also, for the love of god, please use an up-to-date version of jQuery
It looks your first request from $.ajax will return 'test', and then you're using that as the URL for $("#chatmenu").load.
Try this:
function reloadChat() {
$.ajax({
url: "chat.php",
cache: false,
success: function(data){
$("#chatmenu").append(data);
},
});
}
Or, if you want to replace the contents of #chatmenu the method posted by Christofer Eliasson where you just call $("#chatmenu").load("chat.php") in reloadChat will work.
Putting it all together:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="chatmenu"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
setInterval (function() {
$("#chatmenu").load("chat.php");
}, 5000);
});
</script>
</body>
</html>

Categories