Html form to local xml file - javascript

I'm trying to make a simple form that adds user input to a local xml file. Basically, I need to input a name and a proffesion.
The xml file looks something like this:
<mainNode>
<name>Jeff</name>
<proffesion>Dog Trainer</proffesion>
</mainNode>
But I need some method (either with jQuery or javascript) to populate or add to the existing file (example.xml) using that form instead of creating a new xml file or replacing the nodes. I would show I've tried so far, but i've tried so many examples I can't even decide what to show (but if necessary I'll edit this post ). Any help or pointing in the right direction would be appreciated, thanks ! :)

Related

How do I add lunr (or elasticlunr) search on an HTML page?

I have been trying unsuccessfully to make an offline HTML FAQ page that searches for answers in a JSON document, however, I cannot figure out how to get it working.
The main thing I tried is downloading the HTML and JS from the lunr example on the website https://olivernn.github.io/moonwalkers/
The problem seems to be that the text and index are hard-coded into the JS document (lines 176-182), so even when I edit the text in the HTML file it just resets to the original text when I click search. It does not rebuild the index.
My questions:
How can I modify the HTML and/or JS file to rebuild the index after I change the HTML?
Why is there just an index.js file instead of a separate lunr.js and then index.js just for the indexed data?
How can I change it so that it reads a separate JSON file with the data?
P.S.
If getting the example on the website working is too difficult (it looks very complex), can someone please show me a working barebones lunr search?
Just a super simple HTML text box with a button that builds an index from a JSON file and displays the results. If I can see a working example I think I can figure it out from there.

manipulating tinymce in Wordpress

I need to be able to extract, manipulate and update the text in wordpress's tinymce #content textbox.The code is coded in a wordpress plugin.
The below post helps but i am unable to comment or contact the original creator to ask him further questions. Having 1 points I cant practically do anything except ask questions. Let me know if i am doing this wrong.
Basically the code from this link is what i need to manipulate or edit the content in wordpress tinymce editor.
Manipulating TinyMCE content with jQuery
But the code seems to be overly simplified.
so my question is:
Do i need to include jquery
Do i need to include the tinymce js or class? is it in wordpress itself?
The code seems to be half javascript half php? Is the code suppose to be coded in a .js file?
do i need to put php tags here?
// make it into a jQuery object
var $content = $(content);
// manipulate the jquery object using jquery
$content = $content.remove('a');
Thanks.
hi I have figured it out after a bit more researching.
At first I was working with php to manipulate data after it is saved. But then i went on to wanting to manipulate the text before it was saved like underlining certain text based on a list in the database. So I needed to move on to javascript because i was editing the text before it was submitted or a page reload which i didn't wrap my head around yet.
So next i just coded the changes into javascript and built a button to call the process.
and seems i didn't need to include the tinymce class because probably the header of the editor page has already included it.

jquery ajax mutliple photo upload from a tutorial

I'm using a pretty basic jquery ajax photo upload for a page that I've created. I'm using exactly the same code as the tutorial, except I've made the few modifications explained later. The tutorial for creating it is here:
http://www.saaraan.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php
The problem I'm running into is I'm trying to convert the script to allow multiple uploads on a page. I have the page setup with multiple forms already, and the php action is ready to receive multiple photos, I'm just clueless when it comes to the jquery part. It declares myform with the id of UploadForm, but since I converted it, I now have the ids of UploadForm1, UploadForm2, UploadForm3, etc..
var myform = $("#UploadForm");
There is a short way of doing the this in jquery I'm sure, but the only solution I can come up with is just repeating the jquery function as many times as I need with the ids hard-coded. Once someone shows me how to fix the UploadForm id problem, I'll be able to fix the progressbar, progressbox, statustxt, and submitbutton ids as well.
Assign a class to each one and reference the class with $('.ClassName'). Then go through the collection with .each(function(){}).
You could allow for each photo to have an input element inside your form, and with a little JavaScript you could allow the user to add/remove rows in your form. Essentially, you are looking for multiple file upload. I've found something that might help:
How to upload multiple files using PHP, jQuery and AJAX

Inserting Text Into HTML

What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});

View HTML of jQuery injected code

I'm thinking of using a couple jQuery tools/plugins to dynamically change the DOM of a page:
http://plugins.jquery.com/project/appendDom
http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/
When the new DOM is changed, I can use Firebug to see the new elements as they are added, but I'm wondering if anyone has suggestions on how I can also build an .html page that can be saved off after a number of elements have been added.
My ultimate goal is to create an HTML Form Builder that will generate the HTML output so I can save the work as I go along. I also want to take the output that was generated and upload it, have it parsed, which will allow me to continue working at another time.
Any thoughts on how to at least get the .html file would be great or tools that I can use.
Assuming that you will just be needing the bits inside the body tag of the page you can get the HTML with document.body.outerHTML.
You can use the native outerHTML:
vat thehtml = $('#yourElement')[0].outerHTML;
You could use jQuery to get the HTML of the entire <body> section:
$('body').html();

Categories

Resources