Develop Reference

Automatically select the option in jquery select2, if only one option is present in dropdown, without clicking it, on page load

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.

JQuery popup not working after continuous call

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.

Twitter bootstrap popover shows on second hover and after but not first.

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 } });
}
});

I am making an ajax call to load the contents into modal dialog; which seems to be working on all other browser than IE

I am making an ajax call to load the contents into modal dialog; which seems to be working on all other browser than Internet Explorer. In Internet Explorer it is freezing and I cannot do any thing I have to use Task Manager to end task. Can anyone tell me what can i do to resolve the freezing issue? The content that I am loading from the URL are dynamic HTML contents, which has scripts, etc.
try{
var LOCALE ='en_us';
var custNUm= 'Y0392287497';
var dURL = 'https://www.over.com?cstNum='+custNUm+'&loc='+LOCALE;
var mModal = $("<div class=\"mdialog\" role=\"dialog\"></div>").html('Loading Please Wait....').dialog({
position : [ 'center', 20 ],
modal : true,
//autoOpen : false,
bgiframe : true,
resizable: false,
closeOnEscape : false,
title : "CUSTOMER MODAL",
close : function(event, ui) {
$(this).remove();
}
});
$.ajax({
url : dURL,
type : 'POST',
dataType : 'text',
timeout : 5000,
beforeSend: function()
{
$('html,body').css('overflow', 'hidden');
},
error : function(xhr, status, error) {
alert(error);
},
success : function(textResponse) {
mcdpModal.html(textResponse);
}
});
}catch(e){
alert(e);
}

Want to the following: 1.Is ur Modal Window getting opened ?
2.Is your data response comming from ur server
3.Is this url u access resides in different domain ? (for 3 rd point:IE does not support Cross Domain AJAX Calls.You need to have both ur execution domain and the server domain to be same.)

User profile is displying not properly using ajax

When i have fire ajax on mouseover, user profile is not displaying but second time when i mouserover on it then it is displaying. I have use tooltip for displaying user profile.
Please correct my code
$(document).ready(function(){
$(".user_profile").bind("mouseover",function(){
id = $(this).attr('id')
user_id=id.split('_')[1];
$.ajax({
url: "/admin/inbox/user_profile",
data: {user_id : user_id},
success: function(data){
$("#"+id).qtip({
content:{
text: data,
title:{
text: "User Profile"
}
},
style: {name:'blue', tip:true}
});
}
});
});
});

Because $.ajax is asynchronous, the mouseover event returns before the qtip is created.
When the page loads, you could run $.ajax to pull back data for all the user profiles displayed in the page in advance, store this data in an array, and then create each qtip with data from the already populated array.

I have resolve this problem by
I have read the solution:
"Because $.ajax is asynchronous, the mouseover event returns before the qtip is created.
When the page loads, you could run $.ajax to pull back data for all the user profiles displayed in the page in advance, store this data in an array, and then create each qtip with data from the already populated array.
"
$(document).ready(function(){
var i=0,j=0;
$(".user_profile").each(function(){
id = $(this).attr('id')
user_id=id.split('_')[1];
my_user_ids[i++]=user_id;
my_ids[j++]=id;
});
$.each( my_ids, function(index, value){
$.ajax({
url:"/admin/inbox/user_profile",
data: {user_id : my_user_ids[index]},
success: function(data){
myArray[value]=data;
$("#"+my_ids[index]).qtip({
content:{
text: myArray[my_ids[index]],
title:{
text: "New User's Profile"
}
},
show: 'mouseover',
hide: 'mouseout',
style: {name:'blue', tip:true}
});
}
});
});
});

You do not need to bind mouseover: it's already done by qtip plugin. Using bind you generate a "conflict" on events at first mouseover event.
You shound resolve, simply, using jQuery .hover instead of bind:
$(document).ready(function() {
$(".user_profile").hover(function() {
{
id = $(this).attr('id')
user_id=id.split('_')[1];
$.ajax({
url: "/admin/inbox/user_profile",
data: {user_id : user_id},
success: function(data) {
$("#"+id).qtip({
content: {
text: data,
title: {
text: "User Profile"
}
},
style: {name:'blue', tip:true}
});
}
});
});
});