There isn't really a problem, I just know that the way I have my current Jquery plugin working that it is not the most efficient and I am hoping someone could point me in the right direction.
So, this is the behaviour of the plugin:
1. On click of a link with a certain class (there could be multiple links with the same class), options are passed to the plugin, some are hard coded but some are gathered from data-attributes.
2. A bootstrap modal is shown (blank modal).
3. Ajax post to external page with options from function posted.
5. Ajax success callback puts the new html content into the modal to display.
This is my current jquery plugin
(function($){
$.fn.custom_xedit = function( options ) {
var settings = $.extend({
type: this.attr("data-type"),
selectsource: this.attr("data-selectsource"),
mask: this.attr("data-mask"),
title: this.attr("data-title"),
pk: this.attr("data-pk"),
posturl: this.attr("data-posturl"),
originalvalue: this.attr("data-originalvalue"),
name: this.attr("data-name")
}, options );
this.addClass('xedit___el___active');
$('#xedit_modal').modal({
backdrop: 'static',
keyboard: false
});
$.ajax({
type: 'POST',
url: 'url',
data: {
'type': settings.type,
'selectsource': settings.selectsource,
'mask': settings.mask,
'title': settings.title,
'pk': settings.pk,
'posturl': settings.posturl,
'originalvalue': settings.originalvalue,
'name': settings.name
},
success: function(callback_modal){
$("#xedit_modal").html(callback_modal);
}
});
};
}( jQuery ));
And I currently call it by:
$('body').on("click", ".some_class", function () {
$(this).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});
});
It would be nice to be able to call it without surrounding it with a on click, but not sure how to do that (like below:)
$(.some_class).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});
Related
I am using the select2 library.
My select2 element can search the database for each tag via the ajax and that works fine.
My issue is, I want the user to also be able to create a new tag. Looking at their documentation I should use the createTag option; however, this fires as soon as I click into the element and on each key press.
Can anyone offer any guidance on how I can achieve my goal?
here is my code thus far
I am using ajax top search for tags but I would also like to create new tags to the database. I have tried doing this via createTag but this seems to be firing as soon as I click in the HTML element and on each key press.
Here is my code:
$('.tags').select2({
tags: true,
placeholder: "These tags will apply to all lines",
tokenSeparators: [','],
ajax: {
url: '/api/tags/find',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
return {
results: data
}
},
cache: true,
},
createTag: function(params) {
alert('tag created') // This is were I would put my ajax POST.
}
});
After reading the documentation again, I can see I should have been using the events https://select2.org/programmatic-control/events
I used the createTag option to assign newTag: true to newly created tags and used the select2:selected event which checked if a new tag had been selected and, if it was, sent an ajax request to the server to create that tag.
$('.tags').select2({
tags: true,
placeholder: "These tags will apply to all lines",
minimumInputLength: 3,
tokenSeparators: [','],
ajax: {
url: '/api/tags/find',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
return {
results: data
}
},
// cache: true,
},
createTag: function(params) {
let term = $.trim(params.term);
if (term.length < 3)
{
return null
}
return {
id: term,
text: term,
newTag: true,
}
},
});
$('.tags').on('select2:select', function (e) {
let tag = e.params.data;
if (tag.newTag === true)
{
axios.post('/api/newtag', {
name: tag.text,
type: 'default',
})
}
});
I am using jQuery notify plugin. I include all the JS files in header. Now I am calling the $.notify function in another JS file where I am using AJAX, but there I cannot access the $.notify function.
My ajax file is here which I am including in header also:
$.ajax({
url:'index.php?page=ajax_insertdimension.php',
type:'post',
data:'code='+dcode+'&des='+ddesc,
success:function(msg){
$.notify({
title: 'Email Notification',
text: 'You received an e-mail from your boss. You should read it right now!',
image: "<img src='images/Mail.png'/>"
}, {
style: 'metro',
className: 'info',
autoHide: false,
clickToHide: true
});
addcols();
}
})
Sometimes for success method to work, you have to specify what data type "msg" argument is there in parameter for success function. This can be done by adding dataType parameter to post method as specified in documentation here jQuery.post()
$.ajax({
url:'index.php?page=ajax_insertdimension.php',
type:'post',
data:'code='+dcode+'&des='+ddesc,
success:function(msg){
$.notify({
title: 'Email Notification',
text: 'You received an e-mail from your boss. You should read it right now!',
image: "<img src='images/Mail.png'/>"
}, {
style: 'metro',
className: 'info',
autoHide: false,
clickToHide: true
});
addcols();
},dataType: "json"})
This should do the work for you. You can put a debugger in success function and test, whether your callback is even getting called or not.
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 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 } });
}
});
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}
});
}
});
});
});