i want to display image after it upload
i write following code but it did't work
onFileSuccess: function(file, response) {
var json = new Hash(JSON.decode(response, true) || {});
if (json.get('status') == '1') {
file.element.addClass('file-success');
} else {
file.element.addClass('file-failed');
}
})
and li is
<li class="file file-success">
</li>
the file-success class is
#img-list li.file.file-success {
background-image: url(uploading/assets/uploaded.png);
}
and my php return image name after uploading like this
$info1='../uploads/' . $newfilename;
$return['fpath'] = $info1;
in place of uploaded.png i want to show image with is return by php in
$return['fpath'] = $info1; statement
Thanks
Can you be more specific about what didn't work?
Is file.element a jQuery object or a plain DOM element? Perhaps you need to jQuerify it:
$(file.element).addClass('file-success');
I don't know how you have your elements set up, or what the json looks like, but it might be better to append the image itself to the <li> rather than setting it as a background.
onFileSuccess: function(file, response) {
var json = new Hash(JSON.decode(response, true) || {});
if (json.get('status') == '1') {
file.element.addClass('file-success');
file.element.append('<img src="' + json.get('filename') + '">');
} else {
file.element.addClass('file-failed');
}
})
Related
Here is the code of the image i am trying to fetch
<img src="pics/file-upload-image-icon-115632290507ftgixivqp.png" id="image_preview1" class="img-thumbnail" style="margin-top: 15px; height:50%; width:20%">
Here is my code of the controller to fetch the data
$scope.fetch = function(sno) {
$http.get("form-lab-full-json-fetch.php?sno="+sno).then(ok, notok);
function ok(resp) {
$scope.ARRY = resp.data;
$scope.dept1 = $scope.ARRY[0].dept;
$scope.uid1= $scope.ARRY[0].uid;
$scope.uname1 = $scope.ARRY[0].uname;
$scope.labname1 = $scope.ARRY[0].labname;
$scope.labinfo1 = $scope.ARRY[0].labinfo;
alert($scope.ARRY[0].orgname)
$scope.hdn = $scope.ARRY[0].orgname;
$scope.images1=$scope.ARRY[0].orgname;
alert($scope.images1)
**$scope.image_preview1.attr("src","uploads/"+ARRY[0].orgname);**
}
function notok(resp) {
alert(resp);
}
}
And here is the code of the preview file
function preview_images1(file) {
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function (ev) {
$('#image_preview1').attr('src', ev.target.result);
}
reader.readAsDataURL(file.files[0]);
}
}
Wahts it´s your problem? in your controller, check in your query return your image:
$scope.image_preview1.attr("src","uploads/"+ARRY[0].orgname);
what return this?
when you check that retur this, you can return to your modal. You use frameworks or pur php? for return your image into modal, you can use AJAX and in response set in your tag img your response.data.image.
but first check that your code return your image, you can use
`print_r($scope.image_preview1.attr("src","uploads/"+ARRY[0].orgname))`
exit();
I am using this code to fetch the data from startup.php.The response of the PHP file is JSON with 3 fields. One of the field in JSON response is a status message. How to change the value of div class .content based on the status message. I need to do that to change the color of the text displayed in the content DIV based on the status message. .content is the class name of the DIV
var loadinggif = '../img/loading.gif';
$(document).ready(function(){
// set up the click event
$('body').on('click','.btnbg', function() {
var toLoad = '../vr/startup.php';
$('.content').empty();
$('.content').slideUp('slow', loadContent);
$('#load').remove();
$('#waiting').append('<div id="load"><img src="' + loadinggif + '" alt="Loading" /></div>');
$('#load').fadeIn('normal');
function loadContent() {
var userName = $('#userName').val();
var remote_addr = $('#remote_addr').val();
var forwarded_for = $('#forwarded_for').val();
var url = $('#url').val();
//$('#forwarded_for1').val()'';
var _post = {'userName': userName, 'ipAddr1':remote_addr,'ipAddr2':forwarded_for, 'url':url};
$('.content').load(toLoad, _post , function(response, status, xhr)
if (status == 'error') {
var msg = "Sorry but there was an error: ";
$(".content").html(msg + xhr.status + " " + xhr.statusText);
}
}).slideDown('slow', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
You can use the css() function in Jquery :
$(".content").css({'background-color': 'red'});
Edit
I red your question wrong. To change class you can use $('.content').removeClass('classOne').addClass('classTwo');
If you have a class like has-error, you can use toggleClass() to toggle it, it will remove it if it's present or add it if not :
$('.content').toggleClass('has-error');
for your if elseprobleme, simply do :
if(condition) {
$('.content').removeClass('class2 class3').addClass('class1');
} else if(condition2) {
$('.content').removeClass('class1 class3').addClass('class2');
} else {
$('.content').removeClass('class1 class2').addClass('class3');
}
Use removeClass() and addClass().
Here is an example:
$('.content').removeClass("styleOne").addClass("styleTwo");
Edit
if(response == "Worked Fine"){
$('.content').removeClass("default").addClass("styleGreen");
}else{
$('.content').removeClass("default").addClass("styleRed");
}
First of all I appreciate that all members are trying to help each other.
I want div content by id in my javascript function. I've got function and it works fine with one div and it's content. But now I've got multiple records from DB, so to make div unique I have done following. where $i=$i+1 in while loop
<div id="<?php echo 'fvd'.$i; ?>" class="fake-checkbox star-checkbox"><a id="<?php echo 'tvd'.$i; ?>" onclick="respuestas('<?php echo $user_id1;?>'); return false;" href="#">Add to favourites</a></div>
so here I generate fvd1, tvd1 for next record fvd2,tv2 and so on
Below function process user id and get response by Ajax call and change caption from Add to favourites to Added to favourites and add class name 'checked' which change text color.
function respuestas(str) {
var popID = str;
var gett = document.getElementById('tvd1').innerHTML;
if (gett == 'Add to favourites') {
$.post('personals/addfavourite.php', {
ref: popID
}, function (data) {
if (data == 'no') {
alert('Sorry! something gone wrong!')
} else if (data == 'yes') {
var d = document.getElementById("fvd1");
d.className = d.className + " checked";
document.getElementById('tvd1').innerHTML = 'Added to favourites';
}
});
}
}
Now how can I parse fvd2,tvd2 and so on in this function.
Any help will be much appreciated..Thanks
If you add your $i to the function parameters you can get each grouping dynamically
onclick="respuestas('<?php echo $user_id1;?>',<?php echo $i;?>); return false;"
and
function respuestas(str,num) {
...
var gett = document.getElementById('tvd'+num).innerHTML;
...
var d = document.getElementById("fvd"+num);
...
document.getElementById('tvd'+num).innerHTML = 'Added to favourites';
...
}
You can do
onclick="respuestas(this, '<?php echo $user_id1;?>');
and the first param would be the <a> so you can do
function respuestas(elm, str) {
elm.getAttribute("id");
}
or so. (Not sure about the DOM method name)
BTW why don't you just put the $i to the call as well? Or maybe I didn't get the question right? If not, pls explain.
If you need to access the elements, well then you already have the <a> in elm, and the <div> is in elm.parentElement.
Check HTML DOM methods: https://developer.mozilla.org/en-US/docs/Web/API/Node.parentElement
I am writing a page that grabs images from a url the user inputs, and using ajax, am updating a div with the img src to be displayed by fancybox in a modal window. The images that are displayed have titles displayed below, as links. This is done with fancybox (If you set the title as set the title="something" will display "something" below the image. If you set the title as title="<a href='something.html'>Something</a>)
My problem is this. I need to allow the user to choose an image by clicking the link, and in turn have it do 2 things: update the hidden field with the src url of the img, and submit the form.
Here is the code I have for the ajax request:
function getCustomerInfo() {
var phone = document.getElementById("urls").value;
var url = "grabimages.php?urls=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
$("#dvloader").show();
$("#selectimages").hide();
//$("#noimages").hide();
function updatePage() {
if (request.readyState == 4)
if (request.status == 200){
if(request.responseText == ''){
$("#dvloader").hide();
$("#noimages").show();
}else{
document.getElementById("update-div").innerHTML = request.responseText;
$("#dvloader").hide();
$("#selectimages").show();
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 15
});
$('input[id=theimage]').click(function(){
$(".fancybox").eq(0).trigger('click');
});
function recURL(recipeurl) {
$('#recipeurl').val('recipeurl');
document.recipeform.submit();
}
}
}else{
alert('nothing');
}
}
And here is the code I tried for the href javascript call (this is the server side code, so PHP:
echo "<a class=\"fancybox\" id=\"recipelinks\" title=\"<img src=\"" . $imagepath . "\" alt=\"\"/>";
This doesn't do anything. Any suggestions?
Use $('.fancybody').live('click', function() { });, live allows you to listen for events on elements which are added to the DOM dynamically.
I have this js object which I got from php through jason_encode(). This object has 2 objects, Name and Video. Then through a for loop I distribute the names into divs. My problem is I need to create a link in each div that would create a dialog that displays the video.
I'm basing this idea from the jquery UI example: http://jqueryui.com/demos/droppable/#photo-manager
Specifically the view larger icon which I intend to have the same dialog except embedding a youtube video.
Here is the code that gets the values from the jscript object and puts them in divs.
for ( var i in BodyWeight )
{
if(BodyWeight[i]['Color'] == 'Red')
{
$('#redboxes').append('<div class="ui-widget-content dragred"><p>' + BodyWeight[i]["ExerciseTitle"] + '</p> </div>');
}
else if(BodyWeight[i]['Color'] == 'Blue')
{
$('#blueboxes').append('<div class="ui-widget-content dragblue"><p>' + BodyWeight[i]["ExerciseTitle"] + '</p> </div>');
}
}
Then basically I would have a icons in each that should just have in it the data from ExerciseVideo. I just can't figure out how to connect both objects together. In the jquery example they image url is embedded in a href unfortunately I can't do the same for a video.
This hasn't been tested, but it might work. Edit: It actually is tested and does work now. Note that this assumes that Video is a YouTube video ID, not a YouTube video URL. (ie. we're assuming Video is the part after the ?v= in the YouTube URL)
for(var i=0;i<BodyWeight.length;i++) {
var exercise=BodyWeight[i];
var elem=$('<div class="ui-widget-content"><p>'+exercise["ExerciseTitle"]+'</p></div>');
elem.addClass("drag"+exercise['Color'].toLowerCase());
elem.appendTo("#"+exercise['Color'].toLowerCase()+"boxes");
elem.data("exercise", exercise);
elem.click(function() {
var exercise=$(this).data("exercise");
var div=$("<div>");
var obj=$("<object>");
obj.attr("type", "application/x-shockwave-flash");
obj.attr("data", "http://www.youtube.com/v/"+exercise["Video"]);
obj.attr("width", "400").attr("height", "300");
obj.appendTo(div);
div.hide().appendTo("body");
setTimeout(function() {
div.dialog({
title: exercise["ExerciseTitle"],
width: 435,
modal: true,
close: function(event, ui) {
div.remove();
}
});
}, 1);
return false;
});
}
I do not really know if this is what you need, I hope it will be usefull
for ( var i in BodyWeight ) {
var mydiv = $('<div class="ui-widget-content"></div>'),
myp = $('<p>'+BodyWeight[i]["ExerciseTitle"]+'</p>'),
mylink = $('<a>View video</a>'),
linkVideo = BodyWeight['linkToVideo'] ;
mylink
.attr('href','#')
.click(function(ev){
ev.stopPropagation();
//acction for linkVideo
alert(linkVideo);
});
mydiv
.append(myp)
.append(mylink);
if(BodyWeight[i]['Color'] == 'Red') {
mydiv.addClass("dragred").appendTo($('#redboxes'));
}
else if(BodyWeight[i]['Color'] == 'Blue') {
mydiv.addClass("dragblue").appendTo($('#blueboxes'));
}
}
Just a comment to andres and to mike (I prefer to put it here so that codes below are readable).
This block of codes:
if(BodyWeight[i]['Color'] == 'Red') {
mydiv.addClass("dragred").appendTo($('#redboxes'));
}
else if(BodyWeight[i]['Color'] == 'Blue') {
mydiv.addClass("dragblue").appendTo($('#blueboxes'));
}
why not make it:
var color = BodyWeight[i]['Color'].toLowerCase();
mydiv.addClass("drag"+color).appendTo($('#'+color+'boxes'));
much better I think.