Casey
Reputation: 11
Uncaught TypeError: $(...).froalaEditor is not a function.... This is my problem
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>Upvotes: -1
Views: 92
Answers (1)
Rena
Reputation: 36565
An alternative way for your requirement, you could just get the value by the following code :
htmlContentCurrent: $j('#previewContent').text()
BTW, your view contains for loop, what you did could not get the correct value in each loop. You need define unique id for the input and define the current index by using data-index like below:
<input type="hidden" asp-for="@(Model[i].CreatedBy)" id="CreatedBy_@i" />
<input type="hidden" asp-for="@(Model[i].CreatedDate)" id="CreatedDate_@i" />
<input type="hidden" asp-for="@(Model[i].UpdatedDate)" id="UpdatedDate_@i" />
<input type="hidden" asp-for="@(Model[i].UpdatedBy)" id="UpdatedBy_@i" />
//other code no need change....
<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)" id="PageTitle_@i" class="form-control" placeholder="Enter your text here"></textarea>
</div>
</div>
//other code no need change....
<div class="col-md-2">
<input type="button" data-index="@i" class="buttonSave" name="stringValue" value="Save" title="Save your changes" class="btn btn-outline-dark" />
</div>
Then get the data value like below:
var index = $j(this).data('index');
console.log(index)
var formData = {
createdBy: $j('#CreatedBy_' + index).val(),
createdDate: $j('#CreatedDate_' + index).val(),
updatedBy: $j('#UpdatedBy_' + index).val(),
updatedDate: $j('#UpdatedDate_' + index).val(),
pageTitle: $j('#PageTitle_' + index).val(),
htmlContentCurrent: $j('#previewContent').text()
};
Upvotes: 0
Related Questions
- Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
- Uncaught ReferenceError: $ is not defined?
- React JS - Uncaught TypeError: this.props.data.map is not a function
- How can I trigger the same function from multiple events with jQuery?
- TypeError: $.ajax(...) is not a function?
- jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
- "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project
- How can I remove a style added with .css() function?
- What's the difference between '$(this)' and 'this'?