Clearing uikit html editor - javascript

i am trying to clear the content of my uikit html editor after saving data of when closing/cancelling my modal.
i tried clearing it with these codes:
$("#description").val('');
$('#description').attr('data-uk-htmleditor');
$.UIkit.htmleditor('#description', { /* options */ });
but it's still not working. does anyone here can help me?
EDIT:
here's my other codes for pulling the data from the database:
function editTask(id){
key = id;
s_type = 'u';
console.log(s_type);
enableForm('#task');
$('#btn-save-task').hide();
$('#btn-save-edited-task,#btn-cancel-task').show();
$.ajax({
type: "GET",
url: baseUrl+"/opportunities/getInfo/task/"+id,
async : true,
data : {
getType : "getTask"
},
dataType: 'json',
error : function(req,error){
notify(req.statusText,'warning');
},
success: function(data){
$("#taskDescription").val(data.description);
$('#taskDescription').attr('data-uk-htmleditor');
$.UIkit.htmleditor('#taskDescription', { /* options */ });
}
});
}

Try this:
var task = '';
function editTask(id) {
key = id;
s_type = 'u';
console.log(s_type);
enableForm('#task');
$('#btn-save-task').hide();
$('#btn-save-edited-task,#btn-cancel-task').show();
$.ajax({
type: "GET",
url: baseUrl + "/opportunities/getInfo/task/" + id,
async: true,
data: {
getType: "getTask"
},
dataType: 'json',
error: function(req, error) {
notify(req.statusText, 'warning');
},
success: function(data) {
task = data.description;
}
});
}
$.UIkit.htmleditor('#taskDescription', { /* options */ });
//Get a reference to the CodeMirror editor
var editor = $('.CodeMirror')[0].CodeMirror;
//You can then use it as you wish
editor.setValue(task);

Related

How to append table correctly in jquery?

I am coming to an issue where I am appending to my table using jQuery and also to <div class="jobEntity" id="bestTable">. For some reason I don't want to append my table like that. Is there a way to work around with my jQuery code to append the table properly? Thanks for the help.
{request.contextPath} - is just localhost:8080/
var cache = {};
$("#searchTextField").autocomplete({
minLength: 2,
focus: function(event, ui) {
event.preventDefault();
},
source: function(request, response) {
var term = request.term;
if (request.term in cache) {
response(cache[request.term]);
return;
}
$.ajax({
url: "#{request.contextPath}/JobSearchItem.xhtml",
type: "GET",
data: {
term: request.term
},
dataType: "json",
success: function(data) {
response(data);
}
});
},
select: function select(event, ui) {
event.preventDefault();
var url = '#{request.contextPath}/index.xhtml';
var searchValue = ui.item.value;
var data = new FormData();
data.append('searchValue', searchValue);
$.ajax({
url: url,
data: data,
method: "POST",
processData: false,
contentType: false,
cache: false
}).done(function(text) {
$('#results').append($(text).find('#bestTable'));
$('#results').append($(text).find('#textTable'));
$('#results').append($(text).find('table'));
$("#clearone").show();
});
},
response: function response(event, ui, data) {
if (!ui.content.length) {
var message = {
value: "",
label: "NOTHING HAS BEEN FOUND"
};
ui.content.push(message);
}
}
});
Well you could do something like this:
$.ajax({
url: url,
data: data,
method: "POST",
processData: false,
contentType: false,
cache: false
}).done(function(text) {
let append = $(text).find('#bestTable').text() + $(text).find('#textTable').text() + $(text).find('table').text();
$('#results').append(append);
$("#clearone").show();
});
As an idea, first prepare the append content and then append at once.

jQuery Mobile pageload code with params not firing

$("#home").on("pageload", function() {
console.log("test2");
var url = window.location.search;
var split = url.split('=');
var vendorID = split[1];
$.ajax({
type: "POST",
url: "vendorpull.php",
data: 'id=' + vendorID,
cache: false,
success: function(data)
{
document.getElementById('vendor-data').innerHTML = data;
}
});
});
This code does not seem to be firing unless the page is physically refreshed. I've tried pageshow, pagebeforeshow and others and it doesn't change. The test console.log does not even fire. This event should be trigged as soon as vendor.html?id=1 is loaded, that is the page that is navigated to containing the above AJAX code. Any suggestions?
$("#home").ready(function() { //You can also use $(document).ready(function() {
console.log("test2");
var url = window.location.search;
var split = url.split('=');
var vendorID = split[1];
$.ajax({
type: "POST",
url: "vendorpull.php",
data: 'id=' + vendorID,
cache: false,
success: function(data)
{
document.getElementById('vendor-data').innerHTML = data;
}
});
});
This code for jQuery Mobile 1.4.5 will reload data for every page visit:
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
/* JQM NAVIGATE #2 */
if (typeof ui.toPage == "object") {
/* manipulate page navigating to */
switch (pageId) {
case "home":
var url = window.location.search;
var split = url.split('=');
var vendorID = split[1];
$.ajax({
type: "POST",
url: "vendorpull.php",
data: 'id=' + vendorID,
beforeSend: function() {
$.mobile.loading("show");
},
cache: false,
success: function(data) {
$("#vendor-data").html(data);
$("#home .ui-content").trigger("updatelayout");
},
complete: function() {
$.mobile.loading("hide");
},
error: function() {
$.mobile.loading("hide");
}
});
break;
default:;
}
}
});

How to make a search with jquery and the wikipedia API

I have read a lot of posts, old, new and the wikipedia documentation.
I have this request that works itself and in the sanbox:
https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=einstein&format=json
https://www.mediawiki.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&srsearch=einstein
but when I try to use it in a javascript script, I can not get the data:
I tried both ajax and Json:
here is the code I used:
a 'GET' request with ajax :
code markup sucks
function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}
$(document).ready(function() {
$("#doit").click(function() {
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
console.log(url);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function(errorMessage) {
console.log("damnn");
}
});
console.log("end");
});
})
a 'POST' request with ajax following the wikipedia documentation
var base_url = "https://en.wikipedia.org/w/api.php";
$.ajax( {
contentType: "application/json; charset=utf-8",
url: base_url,
data: {
action: 'query',
list: 'search',
format: 'json',
srsearch: 'einstein',
origin: '*',
},
dataType: 'json',
type: 'POST',
success: function(data) {
console.log("ok");
// do something with data
},
error: function(errorMessage) {
console.log("damnn");
}
} );
and a getJSON try:
//getJSON atempt.
console.log(url + '&callback=?');
$.getJSON(url + '&callback=?', function(json) {
console.log("ok");
});
Here is the output in my console:
Submit button clicked
https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=einstein
script.js
end
The problem comes in fact from the html:
<form >
<input type="text" id="search"> <button id="doit"> Search!!</button>
</form>
Since the button is in a form, this button normal behavior is to generate a submit action. So the idea is to disable this normal behavior with:
$("#doit").click(function(e) {
e.preventDefault();
The full working code :
function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var format = "&format=json";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}
$(document).ready(function() {
$("#doit").click(function(e) {
e.preventDefault();
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data.query.searchinfo.totalhits);
},
error: function(errorMessage) {
console.log("damnn");
}
});
});
})

post html as string through ajax

I have a tinymce wysiwyg and i want to post the html from it to my action method:
$("#save").click(function () {
var ed = tinymce.get('wysiwyg');
var id = $("#destinationId").val();
var PostContent = JSON.stringify({ 'content': ed.getContent(), 'destinationId' : id });
console.log(PostContent);
$.ajax({
url: '#Url.Action("SaveDestinationContent", "Home")',
type: 'POST',
dataType: 'JSON',
cache: false,
data: PostContent,
success: function (data) {
},
error: function (xhr, error) {
},
});
I always get null in my action method that looks like this:
[HttpPost]
public ActionResult SaveDestinationContent(string content, string destinationId)
{
return Json("TRUE");
}
i have tried to do this in a couple of different ways:
$("#save").click(function () {
var ed = tinymce.get('wysiwyg');
var PostContent = ed.getContent();
console.log(ed.getContent());
var id = $("#destinationId").val();
$.ajax({
url: '#Url.Action("SaveDestinationContent", "Home")',
type: 'POST',
dataType: 'JSON',
cache: false,
data: {
content: PostContent.toString(), destinationId: id
},
success: function (data) {
},
error: function (xhr, error) {
},
});
but none of them work!
<---- EDIT ------>
I know it has to do with the serialization of the html because when i just add some random string and post that it works as expected!

AJAX: How to clear interval if there is no more result

I am wondering how will I clear my ajax's setInterval if there are zero result found.
here is my code:
$(document).ready(function() {
var imageLoader = {}
imageLoader.render = function(event){
$.ajax({
url: UAI+'/useraccountimages/loadimage',
type: 'post',
data: {
id : UID,
},
success: function(data){
$("#available_images").html(data);
}
});
}
imageLoader.interval = setInterval(imageLoader.render,5000);
imageLoader.render();
});
I'm not sure with the code, just follow the "logic" !
$(document).ready(function() {
var imageLoader = {}
imageLoader.render = function(event){
$.ajax({
url: UAI+'/useraccountimages/loadimage',
type: 'post',
data: {
id : UID,
},
success: function(data){
if (data.is(':empty')) {
clearInterval(imageLoader.interval);
}
$("#available_images").html(data);
}
});
}
imageLoader.interval = setInterval(imageLoader.render,5000);
imageLoader.render();
});
With the function "clearInterval" to stop it. (stopInterval description)

Categories

Resources