I have conflicting jquery versions, the lastest jquery 3.6.0 and then Froala's 2.4.2 I believe. As the process loads jquery and then Froala they interact and Froala overwrites the 3.6.0. I need both versions to work in unisons so that I can save to my database. There have been similar problems that I have seen from past years, that is where I got noConflict from and setting a timeout. If I missed a conversation that explained my problem better please just point me in the direction, Thank You.
I have tried noConflict() with no avail. Tried moving all code to the actual page with no success. Taken Jquery 3.6.0 out and this breaks my code further. I have set a timeout for Froala with no victory.
@model List<jcperrestclient.JcpeRwebsitePageContentCommitteeDOA>
@{
Layout = "_Layout";
ViewData["Title"] = "Index";
}
<h2>Committee</h2>
<body>
<div>
<main role="main" class="pb-3">
<div class="container-fluid box mt-5">
<div class="row">
@for (var i = 0; i < Model.Count; i++)
{
<div class="col-md-10" id="section1">
@Html.AntiForgeryToken()
<input type="hidden" asp-for="@(Model[i].CreatedBy)" />
<input type="hidden" asp-for="@(Model[i].CreatedDate)" />
<input type="hidden" asp-for="@(Model[i].UpdatedDate)" />
<input type="hidden" asp-for="@(Model[i].UpdatedBy)" />
<div class="form-group row">
<div class="col-md-6">
<strong><label asp-for="@(Model[i].CreatedBy)"></label></strong>
<input asp-for="@(Model[i].CreatedBy)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].CreatedDate)"></label></strong>
<input asp-for="@(Model[i].CreatedDate)" readonly style="border: none" />
</div>
<div class="col-md-6">
<strong><label asp-for="@(Model[i].UpdatedBy)"></label></strong>
<input asp-for="@(Model[i].UpdatedBy)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].UpdatedDate)"></label></strong>
<input asp-for="@(Model[i].UpdatedDate)" readonly style="border: none">
</div>
</div>
<div class="form-group row">
<label id="lblSuccess" style="color: red">@ViewBag.lblSuccess</label>
</div>
<div class="form-group row">
<label asp-for="@(Model[i].PageTitle)" class="control-label col-md-1"></label>
<div class="col-md-5">
<textarea asp-for="@(Model[i].PageTitle)" class="form-control" placeholder="Enter your text here" id="txtEditor"></textarea>
</div>
</div>
<div class="form-group row">
<span asp-validation-for="@(Model[i].HtmlContentCurrent)" class="text-danger">this is the spot?</span>
<textarea asp-for="@(Model[i].HtmlContentCurrent)" id="froala-editor" name="Content"></textarea>
</div>
<div class="form-group row">
<div class="col-md-1 offset-md-1">
<input type="button" id="buttonCancel" name="stringValue" value="Cancel" title="Cancel these changes" class="btn btn-outline-dark" />
</div>
<div class="col-md-2">
<input type="button" id="buttonSave" name="stringValue" value="Save" title="Save your changes" class="btn btn-outline-dark" />
</div>
<div class="col-md-3">
<input type="button" value="Show/Hide Preview" title="Html Preview" onclick="showDiv()" class="btn btn-outline-dark" />
</div>
</div>
</div>
<div class="col-md-2" id="section2" style="font-family: arial; text-align: left;">
<h4>Page Content Properties</h4>
<strong><label asp-for="@(Model[i].AdminControllerName)"></label></strong>
<input asp-for="@(Model[i].AdminControllerName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].AdminControllerAction)"></label></strong>
<input asp-for="@(Model[i].AdminControllerAction)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PublicControllerName)"></label></strong>
<input asp-for="@(Model[i].PublicControllerName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PublicControllerAction)"></label></strong>
<input asp-for="@(Model[i].PublicControllerAction)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PublicViewName)"></label></strong>
<input asp-for="@(Model[i].PublicViewName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].HasRightSideBar)"></label></strong>
<input asp-for="@(Model[i].HasRightSideBar)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].RightSideBarName)"></label></strong>
<input asp-for="@(Model[i].RightSideBarName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].HasPartialView)"></label></strong>
<input asp-for="@(Model[i].HasPartialView)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PartialViewName)"></label></strong>
<input asp-for="@(Model[i].PartialViewName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].IsDeleted)"></label></strong>
<input asp-for="@(Model[i].IsDeleted)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].DateDeleted)"></label></strong>
<input asp-for="@(Model[i].DateDeleted)" readonly style="border: none" />
<br />
</div>
<div id="previewDiv" style="display:none; border: 1px solid #ccc; padding: 10px; margin-top: 20px;">
<h4>HTML Preview</h4>
<div id="previewContent"></div>
</div>
}
</div>
</div>
</main>
</div>
<!-- Include Froala Editor CSS -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Froala Editor JS -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>
<!-- Include Bootstrap JS (if needed) -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Include your custom JS -->
<script src="~/js/site.js" asp-append-version="true"></script>
<script>
//This makes jquery a variable and i can implement it like dependency injection this way it does not interact with Froala-->
var $j = jQuery.noConflict();
$j(document).ready(function () {
setTimeout(function () {
initializeFroala();
}, 1000); // 1 second delay to ensure Froala is fully loaded
function initializeFroala() {
new FroalaEditor('#froala-editor', {
key: "xxxxxxxxxxxx",
attribution: false,
heightMin: 300,
heightMax: 600,
toolbarSticky: true,
imageInsertButtons: ["imageBack", "|", "imageUpload", "imageByURL"],
quickInsertButtons: ['image', 'table', 'ul', 'ol'],
toolbarButtons: {
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'textColor', 'insertHR', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'clearFormatting'],
'buttonsVisible': 5
},
'moreLink': { 'buttons': ['|', 'insertLink'] },
'moreParagraph': {
'buttons': ['|', 'outdent', 'indent', 'formatUL', 'formatOLSimple', 'align', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'quote'],
'buttonsVisible': 5
},
'moreImage': { 'buttons': ['|', 'insertImage'] },
'moreRich': {
'buttons': ['|', 'insertTable', 'emoticons', 'specialCharacters']
},
'moreMisc': {
'buttons': ['undo', 'redo', 'spellChecker', 'fullscreen', 'selectAll', 'html', 'help'],
'align': 'right',
'buttonsVisible': 2
}
},
imageUploadURL: getCurrentPath(),
imageUploadParams: {
id: 'my_editor'
},
events: {
'contentChanged': function () {
document.getElementById('previewContent').innerHTML = this.html.get();
}
}
});
}
function getCurrentPath() {
var uploadURL;
switch (window.location.hostname) {
case 'intranet':
uploadURL = '/EditingPages/JCPeRServiceAPI/UploadFiles';
break;
case 'devi':
uploadURL = '/EditingPages-devi/JCPeRServiceAPI/UploadFiles';
break;
case 'localhost':
uploadURL = '/JCPeRServiceAPI/UploadFiles';
break;
default:
uploadURL = '/default-endpoint'; // Default upload URL
}
return uploadURL;
}
// Recognize the save button click event
$j('#buttonSave').on('click', function (e) {
e.preventDefault(); // This overrides the default form submission so that the following code can be implemented
var formData = {
createdBy: $j('#CreatedBy').val(),
createdDate: $j('#CreatedDate').val(),
updatedBy: $j('#UpdatedBy').val(),
updatedDate: $j('#UpdatedDate').val(),
pageTitle: $j('#PageTitle').val(),
htmlContentCurrent: $j('#froala-editor').froalaEditor('html.get')
};
// This is the save request with ajax
$j.ajax({
url: '@Url.Action("SaveCommitteeContent", "Home")', // This is the backend endpoint
type: 'POST', // What type of endpoint it is
data: JSON.stringify(formData), // Converts the data to JSON format for the database to accept the information
contentType: 'application/json; charset=utf-8',
headers: {
'RequestVerificationToken': $j('input[name="__RequestVerificationToken"]').val() // Token for security
},
success: function (response) {
if (response.success) {
$j('#lblSuccess').text('Content saved').css('color', 'green');
} else {
$j('#lblSuccess').text('Content failed to save').css('color', 'red');
}
},
error: function () {
$j('#lblSuccess').text('An error has broken your existence, welcome to the Matrix Neo').css('color', 'blue');
}
});
});
function showDiv() {
var previewDiv = document.getElementById('previewDiv');
var previewContent = document.getElementById('previewContent'); // Add reference to content area
if (previewDiv) {
if (previewDiv.style.display === "none") {
previewDiv.style.display = "block";
// Update the preview content with the HTML from Froala
previewContent.innerHTML = FroalaEditor.INSTANCES[0].html.get();
} else {
previewDiv.style.display = "none";
}
} else {
console.error("Preview div not found!");
}
}
});
</script>
</body>
jQuery.noConflict()is intended for. You need to show how you tried to use it, then we can help you fix it.$j('#froala-editor').froalaEditorshould be$jQuery('#froala-editor').froalaEditor. That should use the version of jQuery that was loaded by froala, not the version you loaded later.froala_editor.pkgd.min.js- see if you can get a version offroalathat isn't packaged with jquery.$j = $.noConflict()before you load the conflicting jquery or changevar $j = jQuery.noConflict();tovar $j = jQuery.noConflict(true);-see this answer (and comments)