Develop Reference

Summernote dynamic contents in dropdown

I created dropdownnemu:
var format = function (context) {
var ui = $.summernote.ui;
// create button
var buttonGroup = ui.buttonGroup([
ui.button({
className: 'dropdown-toggle dropdown-format',
contents: 'Формат',
tooltip: 'Формат листа для печати',
container: false,
data: {
toggle: 'dropdown'
},
click: function() {
context.invoke('editor.saveRange');
}
}),
ui.dropdown({
className: 'dropdown-menu dropdown-formatlist',
contents:"<a class=\"dropdown-item\" >A5</a>",
callback: function ($dropdown) {
$dropdown.find('a').each(function () {
$(this).click(function(e) {
var format = $(this).text();
$(".dropdown-format").text(format);
e.preventDefault();
});
});
}
})
]);
return buttonGroup.render(); // return button as jquery object
};
Everything is okey.But if i adding dynamic content after ajax:
$.ajax({
....
success: function(data, textStatus, jqXHR) {
$('.dropdown-menu').prepend("<a class=\"dropdown-item\">"+data.data+"</a>")
});
dropdown-item inserted in html (.dropdown-menu),but when i click on this dropdown-item nothing happens. How add dynamic content on Summernote ?

MVC5 Ajax update

I have a dropdown with selection id StaffId. What I am doing is once an item is selected I want to pass on the StaffId to controller to fetch records in a database using the staffId. This is giving an error on page load without passing the StaffId to the controller. below is the snippet
controller
[HttpPost]
public PartialViewResult GetStaffPosts(int? id)
{
var sPost = db.StaffPosts.Where(a => a.StaffId == id.Value);
return PartialView(sPost.ToList());
}
<div id="divPartialView">
#{Html.RenderPartial("GetStaffPosts");}
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#StaffId").change(function (event) {
var options = {};
options.url= "/StaffPost/GetStaffPosts/" + $(this).val(),
options.data= { id: $(this).val() },
options.cache= false,
optionstype= "POST",
options.dataType= "html",
options.success= function (data, textStatus, XMLHttpRequest) {
$("#divPartialView").html(data); // HTML DOM replace
$.ajax(options);
}
});
});
</script>

Your current code is not actually making an ajax call on the change event because you are invoking the $.ajax(options); call inside the success callback of the options object. You are not calling the $.ajax method on the change event!
This should work (assuming your controller code is returning a 200 response).
$("#StaffId").change(function (event) {
var options = {};
options.url= "/StaffPost/GetStaffPosts/" + $(this).val(),
options.data= { id: $(this).val() },
options.cache= false,
options.type= "POST",
options.dataType= "html",
options.success= function (data, textStatus, XMLHttpRequest) {
$("#divPartialView").html(data); // HTML DOM replace
}
$.ajax(options);
});
You may also simplify your code using the $.post method.
$("#StaffId").change(function() {
$.post("/StaffPost/GetStaffPosts/",{ id: $(this).val() } ,function (data) {
$("#divPartialView").html(data);
});
});
Or even using the $.load method and a one liner
$("#StaffId").change(function(event) {
$("#divPartialView").load("/StaffPost/GetStaffPosts/", { id: $(this).val() });
});

Hi just put your ajax call outside of the success function and make an url like the below code and try again
Your changed code:
<script type="text/javascript">
$(document).ready(function () {
$("#StaffId").change(function (event) {
var options = {};
options.url= "../StaffPost/GetStaffPosts,
options.data= { id: $(this).val() },
options.cache= false,
optionstype= "POST",
options.dataType= "html",
options.success= function (data, textStatus, XMLHttpRequest)
{
$("#divPartialView").html(data); // HTML DOM replace
}
$.ajax(options);
});
});
</script>

How to refresh the bubbles content via ajax rather than refreshing entire bubble?

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

cannot call val() if initSelection() is not defined error in select2 plugin

I am using select2 plugin to load remote data. I am using an aspx page which returns JSON data and same is assigned to select2 plugin. After user selects some value from the select2 textbox, i am forcing page to postback. After the postback i am using following code to reload to set the text in the select2 textbox.
var data = { "PatientID": "XYX", "Email": "testing#gmail.com" };
$('#e6').select2('val', '123');
But system is throwing following error: cannot call val() if initSelection() is not defined
Even if I define init, I am not able to set the value. I am using following code. Please help me set the value on the select2 textbox after the postback.
$(document).ready(function () {
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "data.aspx",
dataType: 'json',
quietMillis: 1000,
data: function (term, page) {
return {
name: term
};
},
initSelection: function (element, callback) {
var data = { "PatientID": "XYX", "Email": "testing#gmail.com" };
callback(data);
},
results: function (data) {
var results = [];
$.each(data, function (index, item) {
results.push({
id: item['Email'],
text: item['PatientID']
});
});
return {
results: results
};
},
},
});
});
window.onload = function () {
var data = { "PatientID": "XYX", "Email": "testing#gmail.com" };
//When this is called system is throwing error
//This code is required to show the value in select2 textbox after the post back
$('#e6').select2('val', data);
}
$(document).ready(function () {
$("#e6").on("select2-selecting", function (e) {
//alert("selecting val=" + e.val + " choice=" + JSON.stringify(e.choice));
var id = document.getElementById('<%= savebtn.ClientID %>');
document.getElementById('<%= hdnFld.ClientID %>').value = e.val;
id.value = e.val;
//causes post back
id.click();
});
});

There is a mistake with your script. I had the same problem and I saw your question. After I read the API docs of Select2 I realised my error.
You should place the initSelection at the same level as ajax. e.g.
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
initSelection: function (element, callback) {
var data = { "PatientID": "XYX", "Email": "testing#gmail.com" };
callback(data);
},
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "data.aspx",
dataType: 'json',
quietMillis: 1000,
data: function (term, page) {
return {
name: term
};
},
results: function (data) {
var results = [];
$.each(data, function (index, item) {
results.push({
id: item['Email'],
text: item['PatientID']
});
});
return {
results: results
};
},
},
});

Why does the Jquery dialog keep crashing on $(this)?

I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});

Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}

I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}