I use dialog from jQuery UI. On my website, content of the dialog is changing dynamically (custom autocomplete of typed text). I already set css max-height: 90%; on dialog, so on a long content, dialog should be fully visible. But, when dynamic content as automplete is generated, dialog is resized, but still in same position, so 40% of content is not visible, it os out of screen. How can I fix that, when long content is generated, dialog will be autpositioned to the middle of screen?
EDIT 1:
Here is litle part of code from my website:
$.ajax({
cache: false,
type: 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}),
success: function(data) {
var label = $('<label>Open file:<label>').appendTo(dialogElement);
dt = data;
input = $('<input type="text" />').appendTo(dialogElement).autocomplete({
source: data,
autoFocus: true,
minLength: 0
});
dialog.open();
}
});
Here is demo, what is so similar to original jsFiddle
EDIT 2:
This is initialization code for dialog:
var dialogElement = $('<div></div>'),
input, dt, self = {
serverEditor: server('editor')
}, dialog = new Dialog(dialogElement, 'Open', {
'saveable': 'Open',
'width': 400,
'saveOnlyIf': function() {
return dt.has(input.val());
},
'ifNotSaved': function() {
alert('Please choose correct file name!');
}
}).on('save', function() {
$.ajax({
'type': 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}) + input.val(),
'success': function(data) {
Presentation.unserialize(data);
}
});
});
Related
This question is related to this one.
I'm using Tooltipster JQuery plugin to show tooltips on my website like:
HTML
<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>
JS
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250
});
});
</script>
Anyway this doesn't work on Ajax dynamic content, basically I load via Ajax new content with a function:
function exploreTracks(start, filter) {
$('#load-more').html('<div class="load_more" style="height: 232px;"><div class="preloader-loadmore preloader-center"></div></div>');
if(filter == '') {
q = '';
} else {
q = '&filter='+filter;
}
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_explore.php",
data: "start="+start+q+"&token_id="+token_id,
cache: false,
success: function(html) {
$('#load-more').remove();
// Append the new comment to the div id
$('#main-content').append(html);
// Reload the timeago plugin
jQuery("div.timeago").timeago();
// Update the Track Information
updateTrackInfo(nowPlaying);
}
});
}
New contents on mouse hover don't show any tooltip, from console I can't see any error or warning and on network load_profilecard.php is not called.
I have placed the script (same JS as above) directly on my content page, so why the tooltip is not shown on mouse hover?
My solution
As suggested in comments by Evan I used delegation option for this purpose.
$(function() {
$('body').on('mouseenter', '.tooltip:not(.tooltipstered)', function(){
$(this)
.tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250 })
.tooltipster('open');
});
});
I have an empty div:
<div id="reportBody"></div>
with simple css:
#reportBody {
height: 100%;
}
The reportBody div is in a hidden modal that is called on button click. Using jquery/ajax to call the controller to build an iframe string to an SSRS report.
$(document).ready(function () {
$('#dashboardReportForm').validate({ // initialize the plugin
rules: {
BrewerySelect: {
required: true
},
LineSelect: {
required: true
},
datepicker: {
required: true,
date: true
}
},
errorElement: "div",
errorPlacement: function (error, element) {
element.after(error);
},
submitHandler: function (form) {
var brewery = document.getElementById('BrewerySelect').value;
var line = document.getElementById('LineSelect').value;
var day = document.getElementById('datepicker').value;
var url = '#Url.Action("GetUrl")';
$.ajax({
url: url,
data: { breweryCode: brewery, packageLine: line, date: day },
dataType: 'json',
cache: false,
type: "POST",
success: function (data) {
var url = '<iframe src="' + data + '" height="100%" width="100%" scrolling="auto"></iframe>';
$('#reportBody').html(url).show();
},
error: function (response) {
alert('document.ready() dashboardReportForm.validate method failed');
}
});
ResetStyle();
$('#reportModal').modal('show');
}
});
});
It is the $('#reportBody').html(url).show(); in that code that replaces the inner html of the div. When I hardcode the iframe and skip this method it displays perfectly. When I use this method it breaks, the height: 100% does not show in chromes tools after inspecting at all.
How do I prevent this from happening or, failing that, reinsert it in the same method.
Thanks.
The answer: Hard code the style into the div.
<div id="reportBody" style="height: 100%;"></div>
I am using the qtip2 Jquery plug-in to provide suggestions on keyup in an input but what I would like to do is instead of refreshing the entire tool-tip bubble every time the content is updated id rather just refresh the content of the tool-tip without closing it.
So effectively if there is no tool tip present it will show the tool-tip and call the content via Ajax but if there is an existing tool-tip it will just update the content of the existing tool tip.
http://jsfiddle.net/fDavN/11723/
Ok Iv updated my code and it kinda works but I am getting an error: typeError: $(...).updateContent is not a function.
Anbody know why?
$(document).ready(function() {
var title = 'KnowledgeBase Suggestions';
$('#name').on("keyup", function () {
if($(this).data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$(this).updateContent($(".qtip-content").html(data));
}
});
}
else {
$(this).qtip({
content: {
text: "Loading...",
ajax:{
url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
// Process the data
// Set the content manually (required!)
this.set('content.text', data);
}
},
title: {
button: true,
text: title
}
},
position: {
my: 'top left',
at: 'center right',
adjust: {
mouse: false,
scroll: false,
y: 5,
x: 25
}
},
show: {
when: false, // Don't specify a show event
ready: true, // Show the tooltip when ready
delay: 1500,
effect: function() {
$(this).fadeTo(800, 1);
}
},
hide: false,
style: {
classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
tip: {
offset: 0
}
}
});
}
});
});
A stab in the dark as I don't know what updateContent does but you might have an issue with how you are referencing $(this)
try changing
$('#name').on("keyup", function () {
var $this = $(this);
if($this.data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$this.updateContent($(".qtip-content").html(data));
}
});
}
else {
....
the reason is this is a different this when inside the ajax callback
I'm using MVC 4 for my project and im trying to edit or display my data on popup.
When I call my open popup code 6 or 7 times I take javascript errors.
my controller is
public ActionResult OpenEditForm(string objectParam, string formStatus)
{
BranchNotesDetailViewModel viewModel = new BranchNotesDetailViewModel();
//..................
return PartialView("Edit", viewModel);
}
and my javascript code is
myDialog = $("<div> </div>");
function CreateDialog(name) {
myDialog.dialog({
autoOpen: false,
title: name,
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
// remove div with all data and events
myDialog.remove();
//myDialog.dialog('close')
}
});
}
$('#brancNotesList .grid-row').click(function () {
var json = $(this).children('td:eq(1)').text().trim();
$.ajax({
contentType: 'application/html',
url: '#Url.Action("OpenEditForm", "BranchNotes")',
dataType: 'html',
type: 'GET',
data: {
objectParam: json,
formStatus: "1"
}
}).done(function (result) {
CreateDialog('Detail');
myDialog.html(result).dialog('open');
});
});
$(function () {
$(document).ajaxComplete(function (event, request, settings) {
//re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
$.validator.unobtrusive.parse(document);
});
});
function openFormCreate() {
$.ajax({
contentType: 'application/html',
url: '#Url.Action("OpenEditForm", "BranchNotes")',
dataType: 'html',
type: 'GET',
data: {
formStatus: '2'
}
}).done(function (result) {
CreateDialog('Detail');
myDialog.html(result).dialog().dialog('open');
});
}
When i open dialogs one or two times it works but after fifth or sixth time it crashes with exception
JavaScript runtime error: Could not complete the operation due to error 80020101
I tried to find a memory problem or something after ajax call but i cant find where or what. Is there any way to handle that? I read about that problem some forums they say comments fields cause that but it not works for me.
I found my error. I have two layouts, one for main page one for edit page and i noticed some Jquery script files rendered in both pages. I cleaned the edit layout from jquery scripts then everything works fine.
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
var ajaxQueue = $({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
});
});
it's my first experience with js and i need some help. for tooltips i use bootstrap tooltips.
when cursor hover on link, script send post data to controller and receive callback data. in the first hover script receives the data, but tooltip doesn't pop up, only the second hover. how i can fix it?
and one more question. can script will send the request only the first mouse hover, and the following hover will use the information from the cache?
and sorry my english ;D
It is hard to test cross domain
Here is what I THINK you need
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
$.ajax({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
});
});
Create flag for ajax query.
var isTooltipTextEmpty = true;
$('.challenge').mouseover(function(){
if(isTooltipTextEmpty) {
...add ajax query here)
}
}
And you need to trigger tooltip show event, when ajax query is ready like this
.success(data) {
$('.challenge').show();
isTooltipTextEmpty = false; //prevents multiple ajax queries
}
See more here: Bootstrap Tooltip