Develop Reference

How do I reinitialise jquery validation after loading form through ajax

I am loading a form via an ajax call. On the form I need to use jquery validation to validate the one text area.
The validation call is at the bottom of the page, but because the form isn't present when the page loads, I need to re-initalise it when the form has been loaded.
This is the code for the jquery validation:
class OpAuthSignIn {
static initValidationNotes() {
jQuery('.js-validation-notes').validate({
errorClass: 'invalid-feedback animated fadeInDown',
errorElement: 'div',
errorPlacement: (error, e) => {
jQuery(e).parents('.form-group > div').append(error);
},
highlight: e => {
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
},
success: e => {
jQuery(e).closest('.form-group').removeClass('is-invalid');
jQuery(e).remove();
},
rules: {
'notefield': {
required: true,
minlength: 1
}
},
messages: {
'notefield' : 'Enter some details for the note'
}
});
}
static init() {
this.initValidationNotes();
}
}
// Initialize when page loads
jQuery(() => { OpAuthSignIn.init(); });
Then this is my ajax call script. I have commented where I need to initilise the validation:
function openNotes(testID){
var dataString = 'pupilID=<?=$pupilID?>&testID='+testID+'&forename=<?=$forename?>';
console.log("datastring: "+dataString);
$.ajax({
type: "POST",
url: "note_sidebar.php",
data: dataString,
cache: false,
success: function(html) {
console.log("html returned: "+html);
if (html!="Error"){
document.getElementById("sidebarTitle").innerHTML = "Notes";
document.getElementById("sidebarContent").innerHTML = html;
//I need to now initialise the form
}else{
swal("Opps!", "There was an error loading the notes", "warning");
}
}
});
}

Auto Complete Popup not working properly on cloned elements

I am unable to explain it properly,so i have added the image,please help me with this and please dont down vote.
Hi i am cloning the div on button click,and i want the auto complete box on the cloned elements also. on first element it is working fine but on cloned element the auto complete box(popup) is showing on 1st element but it should be shown on newly created textbox
following is the html code
<div class="repeatingSection">
<input id="Jobs[0].SampleType" name="Jobs[0].SampleType" type="text" class="form-control classSampleType" placeholder="Sample Name" required />
Add Job
following is the js code for cloning
function resetAttributeNames(section) {
var tags = section.find('input,button'), idx = section.index();
tags.each(function () {
var $this = $(this);
$.each(attrs, function (i, attr) {
var attr_val = $this.attr(attr);
if (attr_val) {
$this.attr(attr, attr_val.replace(/\[\d\]/,'['+(idx-5)+']'))
}
})
})
}
$('.addJob').click(function (e) {
e.preventDefault();
var lastRepeatingGroup = $('.repeatingSection').last();
var cloned = lastRepeatingGroup.clone(true)
cloned.find("input").val("");
cloned.insertAfter(lastRepeatingGroup);
resetAttributeNames(cloned)
});
and following is the code for auto completion
$(".classSampleType").click(function () {
var index = $(".classSampleType").index(this);
$("#Jobs\\["+index+"\\]\\.SampleType").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Lab/GetSampleType",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response(data);
}
})
},
messages: {
noResults: "", results: ""
}
});
});
For Reference i have added the image Reference Image

worked for me by making following changes
var cloned = lastRepeatingGroup.clone(true,false)
$(document).on('click','.classSampleType',function () {
var index = $(".classSampleType").index(this);
$("#Jobs\\["+index+"\\]\\.SampleType").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Lab/GetSampleType",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response(data);
}
})
},
messages: {
noResults: "", results: ""
}
});
});

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

Dialog does not do autoposition

I use dialog from jQuery UI. On my website, content of the dialog is changing dynamically (custom autocomplete of typed text). I already set css max-height: 90%; on dialog, so on a long content, dialog should be fully visible. But, when dynamic content as automplete is generated, dialog is resized, but still in same position, so 40% of content is not visible, it os out of screen. How can I fix that, when long content is generated, dialog will be autpositioned to the middle of screen?
EDIT 1:
Here is litle part of code from my website:
$.ajax({
cache: false,
type: 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}),
success: function(data) {
var label = $('<label>Open file:<label>').appendTo(dialogElement);
dt = data;
input = $('<input type="text" />').appendTo(dialogElement).autocomplete({
source: data,
autoFocus: true,
minLength: 0
});
dialog.open();
}
});
Here is demo, what is so similar to original jsFiddle
EDIT 2:
This is initialization code for dialog:
var dialogElement = $('<div></div>'),
input, dt, self = {
serverEditor: server('editor')
}, dialog = new Dialog(dialogElement, 'Open', {
'saveable': 'Open',
'width': 400,
'saveOnlyIf': function() {
return dt.has(input.val());
},
'ifNotSaved': function() {
alert('Please choose correct file name!');
}
}).on('save', function() {
$.ajax({
'type': 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}) + input.val(),
'success': function(data) {
Presentation.unserialize(data);
}
});
});

form.submit() to a specific DIV

I want to submit a form using Javascript and jQuery to specific div but I can't work out how to do it.
This code below works, submitting the form to the header of the current page.
var form,
chart = this,
svg = chart.getSVG(chartOptions);
// merge the options
options = merge(chart.options.exporting, options);
// create the form
form = createElement('form', {
method: 'post',
action: options.url
}, {
display: NONE
}, doc.body);
// add the values
each(['filename', 'type', 'width', 'svg'], function(name) {
createElement('input', {
type: HIDDEN,
name: name,
value: {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: svg
}[name]
}, null, form);
});
// submit
form.submit();
// clean up
discardElement(form);
I have tried various options but nothing has worked. In simple terms I want to do this:
$('#myDiv').form.submit();
Or in other words, send the submit command to the div named myDiv.
Does anyone know how I would do this? Thanks.

You should be able to use the code given here:
Post form in JQuery and populate DIV - broken in IE
$.ajax({
url: options.url,
type: 'POST',
cache: false,
data: {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: svg
},
dataType: 'text',
complete: function(xhr, textStatus) {
alert('completed');
},
success: function(data) {
$("#myDiv").html(data);
},
error: function(xhr, textStatus, errorThrown) {
alert('woops');
}
});

$('#myDiv').click (function () {
$("form").submit();
});