jQuery serialize problem - javascript

On my website I have a CKEDITOR to publish content. I have build an automatic save function when you switch pages that looks like this:
var oEditor = CKEDITOR.instances.text;
var content = oEditor.getData();
$('#form #text').html(content);
$.post("news/save/" + id + "/" + page, $("#form").serialize());
This gets the current content of the editor, places it in the textarea (it did not always do that automatically apparently). Then serializes the entire form and posts it to my website's save page.
This is works except for when I put youtube code inside the editor. Printing out the following works without any problems (after the content was set):
alert($('#form #text').html());
This would just prints the actual content with the youtube code. But when the .serialize() functions is called the content gets empty.
alert($('#form #text').serialize());
This would just print: "text=%0A".
Can anybody help me fix this problem or suggest another way to post the form's content to the save page?
Thank you.

Is #text is a textarea? if it is then you should probably using val() method to set the value instead of html(), because val() should be used to set/get form element's value.

You should call editor's synchronize procedure, that synchronizes editor contents with the value of the textarea.
After that, the value will be available for serialization as well.

Related

How to use JavaScript or Jquery to dynamically changes HTML text input

I have a web service that returns a string.
https://localhost:5001/mywebservice
Now, I made a HTML page with a text input.
I'd like to use to JavaScript or JQuery to call my webservice.
Then update the text input with whatever returns from my web service
https://localhost:5001/mywebservice
I tried to use the following JQuery code snippet.
But it won't work.
$('button').on('click', function (e) {
var str = $('https://localhost:5001/mywebservice').val();
$("#MyString").prop('value', str);
});
I'd appreciate it if someone can give me a hint.
Thank you for your help.
ok, so first of all, you did the event listener right.
If this script runs within the HTML file, then you can select elements from the document. Use
$("<select your input>").val()
if it is a text box or .html() if it is an element.
To request the return info of your service, do not use jquery $. it was not built to ajax.
make sure it is always up and running when you use the platform
Instead of hosting it on localhost, try running it on whatever platform this js is on.
make the localhost only display the info you are sending back
send an ajax call to your localhost website, use
$.ajax({
url:"https://localhost:5001/mywebservice",
success:function(d){
//d is your data
}
})

Is it possible in JavaScript to get html page code and replace TextBoxes with it's values?

I kind of need to create html page copy by clicking on button in this page, but where all <input type = 'text'... replaced with it's values.
I think, I can handle the second part, but how first to get html code?
Are this ever possible?
I need this for generating html reports.
Page is shown in internal browser of my prog. The basic idea, the student see the page with inputs, then when he fill all, he press button inside HTML page, some JS handler work and send to my prog same page, but without inputs for later review for teacher.
If you want to get the html for the body of the document, use this:
document.body.innerHTML
You can then modify it as needed and change it:
document.body.innerHTML = ... modified html ...
There are better ways to achieve the result though, like manipulating the DOM with jQuery.
You can use document DOM element and serialize it:
(new XMLSerializer()).serializeToString(document);
for cross-browser compatibility see this post
If you have a <form> you can post to the same page adding ?post=1 to the action.
Then in the php
if ($_GET["post"]==1) {
//same table or div structure getting the values submitted by the form
}
Do you know how to do it? was this you needed?

element.innerHTML not giving full data

I'm trying to get the innerHTML of an YUI table element. Whenever I try to do so the innerHTML or .html() (jQuery) doesn't give me full html but only a part of it. I'm confused why is it happening. I don't think there is some kind of upper bound to the size of html() we can retrieve. Here is my code..
alert(document.getElementById("table").innerHTML);
console.log($("#table").html());
$.post("MainPageHTML",
{
"data" : $("#table").html()
},function(result){
TCProJSM.newsClicked = false;
location.href = result;
},
"text"
);
Please help and thanks in adance.
Basically I want to save the state of my current page(means all the selections, maps etc on it) while I'm migrating away from it to another page, so when I comeback to this page I just have to repaint the page with my saved stuff. For that I'm doing .html() for the elements required and posting the data to server to be saved. But as I said above I'm getting incomplete data (only few lines from the beginning) for every element I want to save it's state for.
Is there any thing else I can try apart from HTML to get the data which can be repainted when I visit the page again ??
try to use .html() in jQuery.It will give the whole html.
innerHTML can't be applied for several DOM elements, such as table, tr or select, instead of it should be used childNodes or something similar.
In your situation it will be better to create some json file based on #table data and post exactly it.

Change Page for jQuery Mobile between two html files

I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?
This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');
From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.
If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();
Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');
$('#name_of_your_textarea').val('');

Categories

Resources