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.
Related
I am using select2 plugin (v.4.0).
What I am trying to do:
$("#search-input-chains").select2({
placeholder: "Unit",
theme: "bootstrap4",
allowClear: true,
initSelection: function (element, callback) {
callback({id: 1, text: 'Text'});
},
ajax: {
url: function () {
return getURLForFilial();
},
dataType: 'json',
delay: 250,
processResults: function (response) {
console.log(response);
return {
results: response
};
},
cache: false
}
});
function getURLForFilial() {
return '/user/rest/data/entry/units/branches?type=1';
}
I need to understand, whether my control has data retrieved from DB or not, and if there is no data - this select list shall not be activated.
I found how I can understand the data amount:
$("#search-input-chains").data().select2.results.$results[0].childNodes.length
(maybe there is another way that is much better?)
But this piece of code returns 0 until I will activate (click) on the select2 box and trigger AJAX request to find data.
I read a lot about how can I perform the pre-call off AJAX, but it doesn't work.
I tried to trigger event on select2 in such a way:
$("#search-input-chains").val().trigger('change');
Please, advice, how can I load data to my select2 control with the page load to understand whether I need to disable this select or not?
I've made it via AJAX:
ajax({
type: 'GET',
url: '/user/rest/data/entry/units/branches?type=1'
}).then(function (data) {
if (data.length !== 0) {
chainsSelectElement.prop("disabled", false);
chainSelectorHasData = true;
} else {
// create the option and append to Select2
let option = new Option('Nothing', 'null', true, true);
chainsSelectElement.append(option);
chainSelectorHasData = false;
chainsSelectElement.prop("disabled", true);
}
getDataForSubdivisions();
});
When running the following code I get the desired results updating my view on success, but I also get a warning in the console and certain items on the page don't work any more. I though putting the async option in would have sorted it but obviously not.
Can anyone suggest how I should change this?
xmlhttprequest on the main thread is deprecated because of its
detrimental effects to the end user's experience
$("#addSelectedModules").on("click", function () {
event.preventDefault();
$('#createLearningPathForm').validate();
if ($('#createLearningPathForm').valid()) {
var request = $.ajax({
async: true,
type: "POST",
url: "/umbraco/Surface/CreateLearningPath/SetSelectedList",
data: $('#createLearningPathForm').serialize(),
success: function (data) {
$("#top").html(data);
},
error: function (data) {
//$('#failModal').removeClass("d-none").addClass("d-block");
}
})
}
}
);
I am trying to send an AJAX request when I click a jQuery UI dialog Save button and this is how I am doing it:
$(function () {
var comment_dlg = $('#add_comment_dialog');
var quote_id = $('#comment_quote_id');
$('#order_push').click(function () {
quote_id.val($(this).data('id'));
comment_dlg.dialog('open');
});
comment_dlg.dialog({
title: "Write a comment",
autoOpen: false,
modal: true,
width: 600,
height: 300,
buttons: {
Cancel: function () {
$(this).dialog('close');
},
'Save': function () {
$.ajax({
url: Routing.generate('push_order_xml'),
method: 'GET',
data: { quote_id: quote_id },
cache: false
}).done(function (data, textStatus, jqXHR) {
if (data.success.length) {
alert(data.success);
} else {
alert('Something went wrong!');
}
});
}
}
});
});
But I am getting this error:
Uncaught TypeError: Illegal invocation
I am not sure where the issue is. I have checked jQuery UI Dialog and jQuery $.ajax docs several times and my code seems to be right.
Any ideas?
Ok, finally and thanks to this answer I figure it out where the problem was coming from.
First thing, because of this:
var quote_id = $('#comment_quote_id')
the value of quote_id was the whole HTML on not a value as I expected to be.
Second, I was assigning a value to $('#comment_quote_id') right here:
quote_id.val($(this).data('id'));
which is correct.
Third, again my mistake was to use quote_id here:
data: { quote_id: quote_id }
which is - again - wrong because is the whole HTML and not the value itself.
The solution, use quote_id.val() Ex:
data: { quote_id: quote_id.val() }
I can't use processData: false because I don't want to pass the HTML but the value.
I am using MVC4 along with slickgrid to display data to the user. I am trying to implement the ability to double click on a slickgrid row and have the page go to another view, but all I am able to get is the HTML returned to the client, but not rendered.
I am doing,
grid.onDblClick.subscribe(function (e, args) {
$.get(
"MapSetEdit/Edit/",
{ 'mapSetId': 1 }
);
});
and I have also tried:
grid.onDblClick.subscribe(function (e, args) {
$.ajax({
type: "GET",
url: "MapSetEdit/Edit/",
dataType: 'text',
data: {'mapSetId': 1}
})
.fail(function () {
console.log("Error retreiving map list.");
});
});
All this does is return the html to the browser but never renders it. How do I make a javascript request so that I am able to actually render the view. I think I am missing something obvious here as I am new to javascript and mvc.
You should render the returned HTML with jQuery. For example:
grid.onDblClick.subscribe(function (e, args) {
$.ajax({
type: "GET",
url: "MapSetEdit/Edit/",
dataType: 'text',
data: {'mapSetId': 1}
})
.succes(function(data){
var someemptydiv = $("#myEmptyDiv");
someemptydiv.html(data);
})
.fail(function () {
console.log("Error retreiving map list.");
});
});
I was able to do what I needed with:
grid.onDblClick.subscribe(function (e, args) {
window.location = '/MapSetEdit/Edit/?mapSetId=1'
});
I am generating a tree in plone using an add-on product called collective.virtualtreecategories . However, I keep getting a weird javascript error and the tree cannot be displayed.
On my browser's error console, I get the following:
$tree.tree is not a function
Here is the part of code that produces the error:
$tree.tree({
data: {
type: "json",
url: "##vtc-categories-tree.json",
async: false
},
lang: {
new_node: "New category"
},
rules: {
deletable: ["folder"],
renameable: ["folder"],
draggable: "none",
droppable: "none",
},
callback: {
beforechange: function(node, tree_obj) {
return before_change_node()
},
onselect: function(node, tree_obj) {
node_selected(node)
},
oncreate: function(node) {
jq(node).attr('rel', 'folder')
},
onrename: function(node, lang, tree_obj, rb) {
old_id = node.id // may be undefined (new node)
new_name = jq(node).children("a:visible").text();
// shared code. Server determines if creating/renaming by the old_name value
jq.ajax({
type: 'POST',
url: "vtc-category-added-renamed",
data: {
'category_path': selected_category(node),
'old_id': old_id,
'new_name': new_name
},
success: function(data) {
jq.jGrowl(data.msg, {
life: 1500
});
// set/change node id
if (data.result) {
node.id = data.new_id
}
},
dataType: 'json',
traditional: true
})
},
beforedelete: function(node, tree_obj) {
jq.ajax({
type: 'POST',
url: "vtc-category-removed",
data: {
'category_path': selected_category(node)
},
success: function(data) {
jq.jGrowl(data.msg, {
life: 3000
});
},
dataType: 'json',
traditional: true
});
return true;
}
}
});
The complete code listing can be found HERE
Can someone help me fix this?
UPDATE:
I should perhaps add that, this was working before in a different setting. Now, I just recreated the project and thats when I got this error.
As far as I can tell from your code $tree isn't a function, its an element
on line 89 var $tree = jq('ul#VTCTree');
therefore I assume .tree() is a JQuery widget and isn't working as expected?
Just seen some of the comments and the updates. Have you checked the path/file inclusion of the tree plugin/widget?
On my browser's error console, I get the following:
if your browser is Internet Explorer, the extra comma that you have here
droppable: "none",
is a widely known problem.
Not a problem for Firefox, but will give unexpected results, like 3 elements in the following array. but length = 4
myArr = [1,2,3,,]
also, check this https://stackoverflow.com/a/5139232/982924
I had the same issue, even though I had jquery loaded and the jquery.filetree.min plugin loaded. I was missing the jquery UI js which is also required.