I am trying to improve an old website which has been created by having one index.php
Which is behaving like a parent to several sub sites which then
insert their specific contents into the parent using javascript (getElement, add all sorts of content and then appendChild).
This results in a huge code to just create a little form, which can be done far neater with HTML.
Thus my question;
how can I input HTML content into a parent file's elements without creating these contents all with javascript?
I am looking for a solution like:
<?php
include_once('index.php');
?>
<ul id="nav">
<li class="navi">Log uit</li>
</ul>
<script>
somehow insert newly created unsorted list "nav" into the included index.php
</script>
I hope I have formulated my question clearly and am looking forward to your answers!
I thing best to use angularJs for this.
I have found what I was looking for, it was innerHTML
This way I can simply type an HTML code inside javascript which is then inputted into the included php as I wanted.
Example;
document.getElementById('databox').innerHTML =
'<div class = "selectform">' +
'<form id="login" method="post" action="requestklant.php">' +
'<select name="klantdropdown"></select>' +
'<button type="submit">Opvragen</button>'+
'</form>' +
'</div>';
Thank you for your suggestions and effort, though.
Related
Hi I have a problem while using set interval function with .load events and append please explain what I did mistake in my code please give a solution
HTML
<div id="user2<?php echo $d['qid'] ;?>">
Comments Loads Here
Jquery code
setInterval(function(){
$("#user2").load( "test2.php,#user2");
},1000);
qid means Query id I have multiple(qid) queries in my site How to add append
please give a solution I am new in jquery Thanks in advance
Id of div is dynamic, as "qid" is appended to it.
<div id="user2<?php echo $d['qid'] ;?>">
In above code, if "$d['qid']" is 101, then generated html will be as given below.
<div id="user2101">
Hence, your javascript must include dynamic id using "" syntax. Also, you should be using space instead of comma in load event (http://api.jquery.com/load/#loading-page-fragments). You should be passing "qid" to "test2.php" page as query string to get comments related to "qid".
setInterval(function(){
$("#user2<?php echo $d['qid'] ;?>").load( "test2.php #user2");
},1000);
First, as qid is the query id. Having the following code with qid 2 will yield
<div id="user22">
Is this really the div you really want? If you want user2 it should be:
<div id="user<?php echo $d['qid'] ;?>">
Second, you need to pass a valid path to your page you want to load. Are you sure test2.php,#user2 is the correct path?
I have a drag and drop UI. Its like a bucket list. What I have done is I have seperated the forms and the UI html for easier data manipulation. I have an empty form like this: (Take note that I am using spring form tags "form:")
<form:form method="POST" id="sampleForm" commandName="sampleForm" modelAttribute="sampleForm" class="navbar-form navbar-center">
<table id="formToBeSaved">
</table>
</form:form>
And then I have a script that is triggered whenever my other sortable receives an item. Sample below:
$("#sortable2").sortable({
connectWith : "#sortable2 ul",
scroll: false,
receive: function(event,ui) {
var saveElement = '<tr id="saveRow['+statusCounter+']"><td><form:input type="hidden" '+
'path="sampleFormModel['+statusCounter+']." class="form-control" '+
'id="name['+statusCounter+'].sampleForm" value="'+ someValue +'"></form:input></td></tr>'
console.log(saveElement);
$("#formToBeSaved").append(saveElement);
statusCounter = statusCounter + 1;
console.log(statusCounter);
};
},
Now the problem is, whenever I submit the form thru ajax an error occurs. It seems that the system does not recognize my < form:input > tag (since I am using spring) because I've just assigned it as a string into a variable. Is there a way to fix this? Thanks stackoverflow community!
You are using Spring XML templates, but the web browser can only work with HTML. This works when you are declaring your code in JSP files because Sprint will parse them and transform them to HTML.
So instead of manually adding JSP to the document, you should edit your JSP files in a way they generate the JSP you expect. In this case, you could use <c:forEach> to generate each <tr>. This answer could help you to do that.
If you only have access to the datas required by these <tr> dynamically, I do not know Sprint enough to help you. Maybe you could find some resources on this question.
I'm looking to change the title of an html page according to certain form elements, as well as some text found on that page. I found a good site describing how using Javascript can do almost what I need, located here: http://www.devx.com/tips/Tip/13469.
The problem with the script found there is that the option to change the title is restricted to the textarea, or if I try to include another element, I get an error message. I authored web page/form templates, nothing complicated, where the intended users, who, shall we say, are not very computer literate(one of them has never used computers), fill out certain textareas and drop-down options and then save the pages in an ARCHIVE folder. To make it easier for them, I would like to give them the luxury of saving the pages without having to type the relevant date and # (each form is basically one of a series of 59), essentially standardizing the titles of the saved pages which should make it easier to categorize them using another script in the future. Can the code below(the one found in the above web site) be extended to include more than one html item, such as the select drop-down options found below, and maybe something found inside elements such as a or div?
<HTML>
<HEAD><TITLE>Change Title Dynamically:</TITLE></HEAD>
<BODY>
<FORM action="" method=POST name="SampleForm">
<B>Enter Title for the window:</B>
<TEXTAREA NAME=WindowTitle ROWS=1 COLS=50></TEXTAREA>
<INPUT TYPE=BUTTON VALUE="Change Title" ONCLICK="javascript:UpdateTitle()">
</FORM>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function UpdateTitle()
{
document.title = document.SampleForm.WindowTitle.value;
}
</SCRIPT>
</BODY>
</HTML>
<SELECT>
<option>-----</option>
<OPTION>JAN</OPTION>
<OPTION>FEB</OPTION>
<OPTION>MAR</OPTION>
<OPTION>APR</OPTION>
<OPTION>MAY</OPTION>
<OPTION>JUN</OPTION>
<OPTION>JUL</OPTION>
<OPTION>AUG</OPTION>
<OPTION>SEP</OPTION>
<OPTION>OCT</OPTION>
<OPTION>NOV</OPTION>
<OPTION>DEC</OPTION>
</SELECT>
I would recommend jQuery to get the values of the fields you want to display in the title and set it. More info on jQuery can be found at http://jquery.com/
You can use a jQuery selectors to get the values of the fields and concatenate it accordingly. Something like this:
document.title = $('textarea').val() + ' - ' + $('select').val();
I came across this post on SO, and I basically copied the code (html, css and jquery) to my web page. Everything works except that I don't know how to get the tags when my html form is submitted.
From my understanding of the javascript code, the tags are stored in tags, they are not stored in fields, so my question is how to capture those tags when the form where it's embedded is submitted?
Thanks
You can iterate a jquery object and get the child's content in this way:
var tags = '';
$('#tags > span').each(function() {
tags = tags + $(this).html() + ',';
});
$('#inputInForm').val(tags);
Just add a hidden input field to each of your tags like this when you create them:
<span class="tag">
tag-name
<input type="hidden" name="tags[]" value="tag-name">
</span>
This way you will automatically get the tags array when you post the form (obviously those tags should be within your form).
I wrote an ajax program.when i am getting response, at that time i will display
that content in my web page using html tags.
So how can I use html tags in javascript?
A sample data you get from server, and a sample html you want to add would make it easier for people to help you.
The basic steps are
1.Get a reference to the html node you want to put the new data in. There are multiple strategies to get reference to the node. If it has an id, it's most starightforward.
2.set innerHTML property.
eg
var node = document.getElementById("targetNode");
node.innerHTML = "<div>data</div>";
Well... Not much detail so not much of an answer...
Easy way
document.write("<body> <div> this is on my page! </div> </body>
or you can edit the innerhtml of an element to place things inside it
document.getElementById("id").innerHTML = "<div>This is inside my element with id="id" </div>"
Answers the question, no?
Instead of embedding html into javascript, you could make a bunch of predefined javascript functions and then use them outside of the script tags. For example, here's how to display a picture while still using the javascript functions.
<html>
<script type="text/javascript">
function display_message()
{
alert("This is a message.");
};
</script>
<body>
<img src="image.jpg">
<form>
<input type="button" value="Click me!" onclick="display_message()" />
</form>
</body>
</html>
I know this is an old post, but this could be helpful...
Using jquery is great way to combine html elements with script
Note: This would be used in the body, if using it in the be sure to enclose it in
$(document).ready (function(){ YOUR CODE });
// Create an object:
var url = {
link: "https://stackoverflow.com/questions/2834929/how-can-i-use-html-tags-in-javascript"
};
// Display URL object:
$('#panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//Note: the # denotes id, if you want to use a class it would be:
//$('.panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//your html would be: <div id="panel"></div> or whatever you choose ie <p> and so //forth