Unobtrusive client side validation in partial view not working - javascript

I have read most of the posts on here relating to this issue and I still can't see what's wrong. Can someone have a looksy please? I am getting an error "Cannot read property 'unobtrusive' of undefined" If I comment out that line then I get "cannot read property 'options' of undefined" So obviously I have something referenced improperly but I can't see it. If I take all the validation code out the form pops up and works fine, but of course no validation. Also, I've tried putting "#updateContactForm" in place of "#updateDialog" and got the same results. Hoping this is something simple that I just can't see from looking at it for too long. Thanks in advance!
<div id="updateDialog" title="Update Contact"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".editLink").button();
$("#updateDialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$("#update-message").html(''); //make sure there is nothing on the message before we continue
$("#updateContactForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".editLink").click(function () {
//change the title of the dialog
linkObj = $(this);
var dialogDiv = $("#updateDialog");
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updateContactForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($("#updateDialog"));
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog("open");
});
return false;
});

Just to check, have you correctly referenced the jquery validation scripts in the cshtml or master page?.
You should load first the script jquery.validate.js and then the jquery.validate.unobtrusive.js one.

Related

Ext JS Cannot read property 'getItems' of null

I have an Ext 4.2.1 application with an Ext.form.Panel, and when trying to send the form field values to the server, I need to first determine one of the values to do a switch on. Sorry I can't provide a complete example, but the trouble I have is with this command:
form.getForm().findField('TASK_ID')
In my application if throws:
TypeError: Cannot read property 'getItems' of null
at Ext.define.getFields (ext-all-debug.js:89221)
at Ext.define.findField (ext-all-debug.js:89471)
at Ext.Ajax.request.success
Line 89221 is as follows:
getFields: function() {
return this.monitor.getItems();
},
I'm not sure what monitor is, so I'm a little out of my depth debugging this. Does anyone have any insight as to what might be wrong or what I can check?
When creating form in Ext.window.Window after window.close() I got the same error. Debugging my source code, I found out window handles autoRender again, it actually conflicts at my singleton window effect, as follow code:
getUpdateGroupWindow: function(){
var me = this;
if(me.updateGroupWindow == null){
me.updateGroupWindow = Ext.create('MyApp.view.groupEditWindow');
}
return me.updateGroupWindow;
},
read api: http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.window.Window-cfg-closeAction window closeAction defaults to "destroy", remove the window from the DOM and destroy it and all descendant components. The window will not be available to be re-displayed via the show method, another value 'hide': hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be re-displayed via the show method.
My final code for example:
Ext.define('MyApp.view.groupEditWindow',{
extend:'Ext.window.Window',
title:'修改信息',
width: 400,
closeAction: 'hide', //fix error config
modal: true,
groupForm:null,
getGroupForm:function(){
var me = this;
if(me.groupForm == null){
me.groupForm = Ext.create('MyApp.view.EditGroupForm');
}
return me.groupForm;
},
initComponent: function(){
var me = this;
Ext.applyIf(me, {
items: [me.getGroupForm()],
buttons: [{
text: '取消',
handler: function() {
me.close();
}
}]
});
me.callParent(arguments);
}
});

Show JqueryUI tooltip based on parsley validation

I am having some trouble with getting the JQueryUI Tooltip Widget working with parsley validation. This is my code:
$.listen('parsley:field:error', function (fieldInstance) {
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
if(fieldInstance.$element.tooltip('instance') != undefined) {
fieldInstance.$element.tooltip('destroy');
}
fieldInstance.$element.tooltip({
items: fieldInstance.$element,
content: messages,
show: 'pulsate'
});
fieldInstance.$element.tooltip('show');
});
My methology is:
Check if a tooltip exists (as multiple validation occur), if it does destroy it.
Create the tooltip with the appropriate message
Show the tooltip
But I just get a consol error:
Uncaught Error: no such method 'show' for tooltip widget instance
Also, if anyone thinks there is a better way of doing this please don't hesitate to answer!
You have a few issues with your code:
The main issue is that you're calling .tooltip('show'); but there is no such method or event, according to the API documentation. You have to use .tooltip('open').
The content option accepts a function or string and you're passing an array. You need to implode the messages array with something like messages.join('<br />')
In order to show the errors only within the tooltip, you need to change the default options of parlsey, specifically errorsContainer and errorsWrapper.
Your final code will be something like this (test in this jsfiddle):
$(document).ready(function() {
$("#myForm").parsley({
errorsContainer: function (ParsleyField) {
return ParsleyField.$element.attr("title");
},
errorsWrapper: false
});
$.listen('parsley:field:error', function (fieldInstance) {
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
if(fieldInstance.$element.tooltip('instance') != undefined) {
fieldInstance.$element.tooltip('destroy');
}
fieldInstance.$element.tooltip({
content: messages.join('<br />'),
items: fieldInstance.$element,
show: 'pulsate'
});
fieldInstance.$element.tooltip('open');
});
});

move jquery into js file cause reference error and type error

So, in my html file, I have a script for flashing message like this
<script>
$(document).ready( function() {
flashThisMessage("me");
});
//I want to move this code below to js file, so I dont have to copy this part
//to every html file that need to use, so I can just include the js file
(function($) {
$.fn.flash_message = function(options) {
options = $.extend({
text: 'Done',
time: 5000,
how: 'before',
class_name: ''
}, options);
return $(this).each(function() {
if( $(this).parent().find('.flash_message').get(0) )
return;
var message = $('<span />', {
'class': 'flash_message ' + options.class_name,
text: options.text
}).hide().fadeIn('fast');
$(this)[options.how](message);
message.delay(options.time).fadeOut('normal', function() {
$(this).remove();
});
});
};
})(jQuery);
</script>
and my js file look like this
function flashThisMessage( theMessage ) {
$('#status-message-area').flash_message({
text: theMessage,
how: 'append'
});
}
How can I move this the flash_message script into js file, I tried to just copy it, it will give an error "ReferenceError: jQuery is not defined" and "TypeError: $(...).flash_message is not a function" ?
I can't see how you've added your js file but if you have jQuery loading after your js file you'll run into this error.
Like it's said in the comments, and like cyclops1101 said, you should be initializing the JS file after your script.
Happy scripting!

How do I hide a jquery dialog until content is retrieved?

I have a button's onclick set to use the following function EditContact. This function sets up a jquery dialog, gets the data from the server and displays it. Everything works but I would like to get it to work a little better. Right now the empty dialog pops up for the time it takes the code to go and fetch the content from the server then the dialog populates with the content. My question is how can I get the dialog to not pop up until the content has been received.
function EditContact() {
$('#editContactView').dialog({
modal: true,
width: 'auto',
position: ['top', 'center'],
resizable: false,
autoOpen: false,
open: function (event) {
var szAction = "Content url for this example";
$(this).load(szAction,
function (response, status, xhr) {
$('#editContactView').dialog('open');
return false;
});
}
});
$('#editContactView').dialog('open');
}
I think you should be able to essentially turn what you have inside out and and open the dialog on $().load() completion. Something like this might do it:
function editContact() {
var szAction = "Content url for this example";
$(this).load(szAction, function (response, status, xhr) {
$('#editContactView').dialog({
modal: true,
width: 'auto',
position: ['top', 'center'],
resizable: false
});
});
}
Edit:
Notice I removed the {autoOpen: false}. This will create it and open it in one shot after you receive the content.
You are calling .dialog('open') twice: in the end of the code and in the callback for the loading.
As JavaScript is asynchronous, it runs the line $('#editContactView').dialog('open'); in the end before the data is received.
Removing this line should solve the problem.

Error when displaying dialog pop up screen in angular js

I have a problem -> I do some logic in angular js and when the logic is found something the user gets an error using dialog box from jquery ui.
In Angular function i need to display the pop up.
The pop up is displayed correctly but i get an error if i look in debug mode.
The error :
Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.6/$rootScope/inprog?p0=%24apply
I don't understand why is it happening?
my function in order to present pop up :
function dialogWithOneButton(message,title, callbackOnOK){
var htmlString = "<div id=\"modalConfirm\" class=\"bold\" title=\""+title+"\">" + message + "</div>";
var dialogButtons = {};
var approveButtonText = messageToUser.dialogOkButton;
dialogButtons[approveButtonText] = {
text: approveButtonText,
class:'btnApprove btnDialog onlyOneButton',
click:function() {
if (callbackOnOK)
callbackOnOK();
$(this).dialog("destroy");
}
};
$(htmlString).dialog({
height: 205,
width:330,
modal: true,
resizable: false,
buttons:dialogButtons
});
}

Categories

Resources