I am trying to display a popover for a element after a ajax call has been made. Everything works as far as the ajax request and getting the data the first time, except no data is displayed when mouseover event happens. But when you hover over it again, You can see the data in the popover. I looked around on here and the web and found similar situation but less complex than my situation (No mouseover event and ajax). I understand that popover seems not to be initialized when I first call it in my situation. But the thing is, that I only can show it after the ajax is being called and it has to be mouseenter. Can anyone modify or guide me to showing the popover on first try. Thanks for any help (Please note that there are two on my page I am just showing 1 of them).
Element
Access Count:
Javascript
$('#users').mouseenter(function () {
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});
});
Works fine after the second mouse in.
Just remove the mouseenter stuff, the popover will still only appear on mouseenter, because you have it set to trigger: 'hover'
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});
Related
I have written the following select2 code:
$('#dropdownElem').select2({
placeholder: 'Select From Dropdown',
allowClear: true,
ajax: {
quietMillis: 10,
cache: false,
dataType: 'json',
type: 'GET',
url: function(){
return '/api/'
},
data: function (params) {
return {
model__icontains: params.term
};
},
processResults: function(data) {
if (data['modelDocs'].length == 1) {
$("#dropdownElem").append($("<option />")
.attr("value", data['modelDocs'][0].id)
.html(data['modelDocs'][0].text)
).val(data['modelDocs'][0].id).trigger("change");
}
return {
results: $.map(data['modelDocs'], function(obj) {
return {
id: obj.id,
text: obj.modelDoc
};
})
};
},
},
});
$('#dropdownElem').trigger("change.select2");
Now what I want to do is if the options returned by ajax call are only one then I should make that option selected automatically and if it is greater than one then the user can select the required by clicking.
For a single option I want it to be selected automatically without clicking. When I console logged the processResults it is being called only on clicking the dropdown and not on loading the page widget where this dropdown is shown.
How can I get the desired result?
Since I could not find a way to trigger click on select2 on page load, my solution was to add these lines on page load or whenever the widget containing that select2 is called in a function:
$('#dropdownElem').select2('open');
$('#dropdownElem').select2('close');
So since I am checking the length of options in processResults, I had to trigger click and close functionality on the dropdown.
select2 has methods open and close to replicate almost the same for my use case.
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
Hi i have a flexigrid to display some data on my site. Each row has a hyperlink that when the user hovers over it brings up a tool tip containing more information. However this only works for the first page on the table, when i change pages the tool tips stop working. I know this is because i use the tool tips in document.ready but i am unsure on how to solved the problem. any help would be appreciated. I've included a fiddle for the tool tips however the table does not have pagination. See fiddle ive included the code below too. This is called in document.ready
function tooltip(){
$('#tblOrder tr td a').on('mouseenter', function(event) {
var id = $('#tblOrder tr[id*="row"]').attr('id').substr(3);
$(this).qtip({
content: {
text: 'Loading.....',
ajax: {
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
success: function (data, status) {
this.set('content.text', data);
},
error: function (xhr) {
console.log(xhr.responseText);
}
}
},
show: {
event: event.type,
ready: true,
effect: function () {
$(this).slideDown();
}
},
hide: {
effect: function () {
$(this).slideUp();
}
}
}, event);
});
};
When you are updating the content inside of #tblOrder you should rebind the event handler or even easier bind the mouseenter event to #tblOrder and filter the event callback with a detailed selector. So instead of your code - use this:
$('#tblOrder').on('mouseenter', 'tr td a', function(event) {
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.
I'm using the prime-ui autocomplete control (because the primefaces autocomplete control does not support partial update). I have my control defined thus:
$(document).on('click','.amd_auto_look_up',
function(event){
$('.amd_auto_look_up').puiautocomplete({
effect: 'fade',
effectSpeed: 'fast',
forceSelection: true,
delay: 100,
select: function (event, item) {
updateFunder(item, "amd", $(this))
},
completeSource:function(request, response) {
$.ajax({
type: "GET",
url: 'http://www.myURI',
data: {query: request.query},
dataType: "jsonp",
context: this,
success: function(data) {
response.call(this, data);
}
});
}
});
event.stopPropagation();
}
);
If I set
forceSelection: false,
all works fine. If I set
forceSelection: true,
the autocomplete popup fails to display altogether. Would anyone be able to point me in the direction of a solution/workaround for this please?
Answering my own question. Also posted in Prime ui forum. It was a bug. Now fixed. view response here: forceSelection fix