I have an element which when I click It opens input dialog and uploads the selected photo. the server responds the request with 4 items as a JSON OBJECT : NAME,TYPE,HEIGHT,WIDTH.
The thing I want is after a successful ajax upload process, reload/refresh the element background with the newly uploaded photo. so far I've don these:
JS:
$(document).ready(function() {
$("input[name!='photo_1']").parents('.fileinput-wrapper').find(".label").remove();
$("input[type=file]").on('change',function(){
$(this).parents('label').find('.fileinput-preview').css('background','url(http://localhost/project/assets/images/ajax-loader.GIF) no-repeat center center');
var selectedElement = this;
var name = $(this).attr('name').toString();
$('#upload').ajaxSubmit({
dataType:'json',
data: {name:name},
beforeSubmit:function(){
$(selectedElement).parents('label').find('input[type=file]').attr('disabled','disabled');
},
success: function(data) {
$(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/loading.png') no-repeat center center");
$.each(data, function(index, item) {
$(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/uploads/"+ item.NAME +") no-repeat center center");//**replacing part**
});
$(selectedElement).parents('label').find('input[type=file]').removeAttr('disabled');
return false;
},
error : function(xhr) {
alert(xhr.responseText);
return false;
}
});
});
});
the thing is it replaces the background right but the image doesn't load and shows a blank. What should I do?
You are missing a single ':
.css('background',"url('http://localhost/project/uploads/"+ item.NAME +")
Should be
.css('background',"url(http://localhost/project/uploads/"+ item.NAME +")
The url parameter does not need '', url(path/to/file.jpg) works fine. You are only setting one, though. Also, does item.name contain the file extesion?
Check with the dom inspector what url is being set after the success, or do a console log of the full string
Related
My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.
But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.
Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.
I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).
(Any code/direction is appreciated)
Create a partial view (so that layout isnt rendered twice) and add the action to controller
public function actionViewmodal($id)
{
return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}
Then within my index I did the following
$(document).ready(function() {
$('a').click(function() {
pageurl = $(this).attr('href');
var Id = jQuery(this).attr('id');
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : 'http://localhost:8888/directory/viewmodal?id='+Id,
success: function(response) {
if(response) {
$('.modal_some_wrapper').html(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
Could someone example how myunidays website works with modal and URL change?
I am attempting to add text from a jQuery array at a given point to my webpage. The page is set up so that when I click on a thumbnail, a larger image and caption data are to show on the page, however the caption text is not showing. $(caption[this.id]).text().appendTo('#images'); is where the error comes from, though if I do a simple DOM.write with the (caption[this.id]).text(), the words will show on the page.
// App variables
var filename = [];
var caption = [];
var id = [];
var counter = 0;
var thumbs = $([]);
var images = $([]);
//Make an AJAX call to load the XML file data
$.ajax({
url: 'gallery.xml',
dataType: 'xml',
success: function (data) {
$(data).find('gallery').each(function () {
// Gather the image filenames
$(data).find('image filename').each(function () {
counter++;
id.push(counter);
filename.push($(this).text());
});
//console.log(filename);
// Gather the image captions
$(data).find('image caption').each(function () {
caption.push($(this).text());
});
});
// Run the thumbnail loading procedure when the AJAX call has completed
loadThumbs();
loadImages();
},
error: function () {
// Failure alert if XML was not loaded
alert("XML file couldn't load...");
}
});
// Loop through filename list and create large image for each entry
var loadImages = function() {
$.each(filename, function (_, src) {
images = images.add(
$('<img />', {src: 'images/' + src, class: 'largeImage', height: '100px', width: '100px'})
);
});
// Add first image to default
$(images[0]).appendTo('#images')
};
// Do some shit when image is clicked...
$( document ).on( "click", "img", function() {
// Empty viewing DIV and create a new large-scale version of the image for viewing
$('#images').empty();
$(images[this.id]).appendTo('#images');
//THIS IS WHERE ERROR COMES FROM
// Add text to <span> to solve error?
$(caption[this.id]).text().appendTo('#images');
});
The error is specifically:
I can add all of the JS code if there is not enough here to understand. Thanks in advance.
You're passing the caption text to jQuery:
$(caption[this.id])
The library is trying to parse it as a CSS selector, and it can't so it throws the error.
You could do several things to make it work, and your suggestion in the comment is a good one:
$("<span/>", { text: caption[this.id] }).appendTo("#images");
I made an image previewer that gives a popup of an image when you hover on that link. It works but sometimes it will fail to .empty the div when I stop hovering over the link. I will ocassionally get the previous image, the error text, or two images. If I hover again it is fixed. This happens maybe 10% of the time. Also I can't get the height of the div. I don't know if this is also related.
$('<div/>',{
'id' : 'popup'
}).appendTo('body');
function showError() {
$('<div/>').text('Picture Not Found').appendTo('#popup');
$('#popup').show();
};
function getImage() {
$.ajax({
type: 'GET',
url: link,
error: function(){
showError();
},
success: function(data) {
var styleText = $('style', data).text();
var imageRegex = /background-image: url\('[^']+/;
var imageMatch = styleText.match(imageRegex);
if (imageMatch) {
var image = imageMatch[0].replace(/background-image: url\('/, '');
$('#popup').append('<img src="' + image + '" style="padding:0px" alt="">');
} else {
showError();
};
}
});
};
$('a').filter(function() {
return /users\/\d+\/pictures/.test(this.href);
}).removeAttr('title').hover(function(e) {
link = this.href.replace('http://', 'https://');
getImage();
$('#popup').show();
height = $('#popup').outerHeight();
console.log(height);
}, function() {
$('#popup').empty().hide();
})
});
Looks like it was an issue with triggering a hover event when passing over the link quickly. Seems to be fixed by adding a delay to the hover.
Here is a link to a guide that helped.
http://jelaniharris.com/2008/adding-a-delay-to-jquery-functions/
I also changed it to a separate div for the error message so I could just change the src of the image rather than empty the div. I think that makes it a little faster.
UPDATED Question :: its working from left click on the node ,inaddtion to that from the right click also it should work for us..on right click-->properties,pop shpuld be displyed on the actual node not on right click menu..as shown below ..when i click do right click on node,i will get right click menu !when i click view properties pop up should be displayed on the nodenot on the right click menu
I have 10-15 nodes in a layout,all nodes will be dynamic,on click of each node ajax call needs to be made and results of the ajax results needs to be shown using qtip tool tip.below is the code of it .on first click it is not showing the pop up but from seconf click its showing tool tip.why its not showing the pop on first click?????
var str = "#JP"+ nodeId;
$(str).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'url',
dataType : 'text',
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
alert(data);
this.set('content.text', data);
},error : function(msg, url, line){
alert('msg'+ msg);
}
}
}
});
Try using qTip2 (http://qtip2.com) and check this demo:
http://jsfiddle.net/craga89/L6yq3/
$('a').each(function() {
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: api.elements.target.attr('href') // Use href attribute as URL
})
.then(function(content) {
// Set the tooltip content upon successful retrieval
api.set('content.text', content);
}, function(xhr, status, error) {
// Upon failure... set the tooltip content to error
api.set('content.text', status + ': ' + error);
});
return 'Loading...'; // Set some initial text
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
I have an application that displays web pages which contains source reference, when user hover above the source reference a tooltip with extra information appears.
I want to change tooltip text dynamically to responseText if communication with the server was successful (see method below) - but I don't know how .
(I already make sure the the respomseText contains the right data)
the tooltip is generated and it's data is sent by this jQuery code:
$(document).ready(function() {
$('table a').on('mouseenter._do_submit', _do_submit);
$('table a').tooltip({
tooltipClass: "coolToolTip",
content: function() {
var element = $( this );
return '<p class=toolTipP>' +element.text(); + '</p>';
}
});
$('table').bind('mouseleave._remove_icon', _remove_icon);
function _remove_icon(event) { $(event.target).find('img').remove(); }
function _do_submit(event) {
$event_origin = $(event.target);
$event_origin.find('img').remove();
ajax_sender( $event_origin );
}
function ajax_sender(event_origin_obj) {
$('<img src="./js/ajax_ani.gif" />').appendTo(event_origin_obj);
url= 'http://localhost:8080/zoharTranslator/ReadZohar';
var xhr = $.ajax({
type: 'GET',
url: url,
data: 'command=source&src=' + event_origin_obj.text(),
beforeSend: beforeSending,
success: on_success,
error: log_error_message
});
function on_success(data) {
event_origin_obj.find('img').remove();
$(document).removeAttr("title");
event_origin_obj.attr( "title", data);
console.log(xhr);
}
function log_error_message(xhr) {
...
}
function beforeSending(xhr) {
...
}
}
});
You can always change the content of your tooltip after its created by using it's setter like this...
$( ".selector" ).tooltip( "option", "content", "Awesome title!" );
-- 2ND UPDATE --
OK, I figured out how to get the jQuery UI added to jsFiddle. This is how I would solve your problem: http://jsfiddle.net/spZ69/3/
Obviously the ajax call won't work but just replace the url ajax/test.html with your url that returns text and it will replace the tooltip's text.