I insert fields on my page using the JQuery .html() function. The fields have a class attribute, but it seems like the CSS, which is declared in the header part of the page doesn't apply to the element.
I believe it just impact class selector, since I have a #editZone input selector that work like a charm.
Here's a code sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
#editZone input, #editZone textarea, #editZone select{
border:0px;
}
#editZone .dependant {
background-color:#CCC;
border-bottom:1px solid #333;
}
#editZone .original {
background-color:#FFF;
border-bottom:1px solid #300;
}
</style>
</head>
<body>
<div id="headZone">
Template:
<select id="template">
</select>
<input type="button" id="generateTpl" value="Go" />
</div>
<div id="editZone" style="background-color:#ccc;">content will be filled here upon template selection</div>
<div id="previewZone">final</div>
</body>
</html>
Here's a content sample (from firebug):
<div style="background-color:#ccc;" id="editZone"><br>
<br>
Name - <input type="" class="original" value="" name="first_name" id="first_name_1"> <input type="" class="original" value="" name="last_name" id="last_name_1"><br>
Title<br>
...
You should close the html tags and I think it should work then. Close the tags like "<tagname />" or "<tagname></tagname>". I mean input, br and all the opened tags are not closed.
Hope it helps.
Cheers
In the style declaration, I had a weird space between the class name and the {.
Related
I am developing a cultural web portal where users, after registering, will be able to add an article via a dedicated form.
As happens in most cultural web portals and also on social media, articles will be accompanied by a cover image that will anticipate the topic, a title and a description, as well as other fields that are not relevant here.
The CMS I have developed for the management (insertion, updating, removal) of articles has been designed for the total management in PHP of the data sent by forms. No forms are or will be loaded via JS/Ajax.
The form for saving articles will contain both mandatory and optional fields. If a mandatory field (e.g. title or text) is not filled in, the PHP script will redirect to the form, displaying the information previously entered in the fields that were filled in, to ease the user by relieving them of the task of having to re-enter all the fields again.
This choice does not create any problems for text, select and textarea type fields. It does, however, create a problem for the file type field dedicated to loading the cover image, since for security reasons it is impossible to save the local path to the image in order to retrieve it in the form and display it in the file type field.
In the form, as can be seen in the snippet below, after choosing the image it will be displayed as a preview, so that the user can check that he has chosen the correct image for his article.
Is there a way or an alternative to be able to pre-fill the file field in order to relieve the user of the task of having to choose the image again? Because the save script will retrieve all the fields via $_POST and the image via $_FILES.
I want to absolutely avoid encoding the image in base64 because some of the images that will be loaded will exceed 1280px in width and the save operation, having to transmit all the base64 encoding, would slow down a lot. Test already carried out.
HTML (fields not pre-filled)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('input:file').on('change', function () {
var reader = new FileReader();
reader.onload = function () {
$('.row').find('.preview').attr('src', reader.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
<style>
form {
width: 500px;
margin: auto;
}
.row {
padding: 10px 0;
}
.row label {
display: block;
}
.row .preview {
display: block;
margin: 20px 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form method="post" action="save.php" enctype="multipart/form-data">
<fieldset>
<div class="row">
<label for="image">Image</label>
<input type="file" name="image" id="image">
<img src="" alt="" class="preview">
</div>
<div class="row">
<label for="title">Title</label>
<input type="text" name="title" id="title">
</div>
<div class="row">
<label for="text">Text</label>
<textarea name="text" id="text" cols="30" rows="10"></textarea>
</div>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
HTML (pre-filled fields)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('input:file').on('change', function () {
var reader = new FileReader();
reader.onload = function () {
$('.row').find('.preview').attr('src', reader.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
<style>
form {
width: 500px;
margin: auto;
}
.row {
padding: 10px 0;
}
.row label {
display: block;
}
.row .preview {
display: block;
margin: 20px 0;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form method="post" action="save.php" enctype="multipart/form-data">
<fieldset>
<div class="row">
<label for="image">Image</label>
<input type="file" name="image" id="image">
<img src="" alt="" class="preview">
</div>
<div class="row">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="<?php echo $_SESSION['title'] ?>">
</div>
<div class="row">
<label for="text">Text</label>
<textarea name="text" id="text" cols="30" rows="10"><?php echo $_SESSION['text'] ?></textarea>
</div>
</fieldset>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Screenshot (fields not pre-filled, image chosen)
Screenshot (fields pre-filled, image to be chosen again)
I want to change the "Search" text content next to the filter input.
I use a table template and the search filter is generated, I want to change the search text because I want to use a different language.
Using development tool I found the div id is user_data_filter and it is under a label element.
I can change this by copying out the input form and changing the search text
$('#user_data_filter label').html('Keresés: <input type="search" class="form-control input-sm" placeholder aria-controls="user_data">');
but after my change the filter doesn't work and I don't know why..
Here is the HTML:
<html>
<head>
<title>Iskola Tábla</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:1270px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:25px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="container box">
<h1 align="center">Iskola Tábla</h1>
<br />
<div class="table-responsive">
<br />
<div align="right">
<button type="button" name="add" id="add" class="btn btn-info">Hozzáadás</button>
</div>
<br />
<div id="alert_message"></div>
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Ügyfél neve</th>
<th>Termék</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
fetch_data();
function fetch_data()
{
var dataTable = $('#user_data').DataTable({
});
}
});
</script>
Can somebody help me to change the search text content with working filter?
These labels and controls are part of the datatables and are not available until initialized. You can use a callback function if you really want to continue with this approach:
var dataTable = $ ('#user_data').DataTable({
"initComplete": function (settings, json){
$('# user_data_filter label').html('Keresés: <input type = "search" class = "form-control input-sm" placeholder aria-controls="user_data">');
}
});
However, If I understood you correctly, you would like to display the datatable in a different language. Therefore, instead of trying to reinvent the wheel, I would strongly recommend that you take a closer look at the many options the datatable already brings to you.
https://datatables.net/reference/option/language
https://datatables.net/manual/i18n
Your code seems to work fine, was your $('#user_data_filter label').html('...'); line put in the $(document).ready function? That worked for me.
If you'd like to make the replacement a little more dynamic, you could replace only the "Search" word. That code would look like this, and also be placed in the $(document).ready function.
var labelElem = $("#user_data_filter > label");
var newText = labelElem.html().replace("Search", "Keresés");
labelElem.html(newText);
JSFiddle Example.
I am trying to display the content just like in facebook.but i dint get it.i used iframe.can some one help me with this without using iframe.i want it to get independently ..like if user1 post it must be seperated from user2 ..but i didnt get it using iframe ii just got a linebreak ..
i here by attaching two images for idea sake facebook layout
this is my outcome.it would be helpful if u solve ...Thanks in Advance..atleast the working ui would be helpful
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id = "midle">
<div id="posts" >
<h1>WHAT'S UP?</h1>
<tr> <form method="POST" action="tryy.php" target="iframe_a" >
<textarea name="post" rows="5" cols=110" target="iframe_a" ></textarea>
<td><input id="button" type="submit" name="submit" value="POST" ></td>
</form>
<iframe width="100%" height="590" src="tryy.php" name="iframe_a"></iframe>
</div>
</div>
</html>
You can use ajax.
(replace the iframe with a div that for this example has the id "status")
<div id="status"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
</script>
Inserted into your example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#status {
background:#555;
width: 100%;
height: 590px;
}
</style>
</head>
<body>
<div id="midle">
<div id="posts">
<h1>WHAT'S UP?</h1>
<tr>
<form method="POST" action="tryy.php" target="iframe_a">
<textarea name="post" id="statusBox" rows="5" cols=110 target="iframe_a " ></textarea>
<td><input id="button" type="submit" name="submit " value="POST " ></td>
</form>
<div id="status"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js "></script>
<script>
function updateStatusList(){
$.get(
'tryy.php',
function(response){
$("#status").html(response);
}
);
}
$("#button").click(function(e) {
e.preventDefault();
updateStatusList();
return false;
});
$("#statusBox").keydown(function(e) {
if(e.keyCode == 13){ // when return was pressed
updateStatusList();
}
});
</script>
</body>
</html>
PS:
Since you are new some hints:
You should use <!DOCTYPE html> instead.
Use a closing </body> tag ;)
Don't use td, tr elements without a table element (and you shouldn't actually use tables at all for layouting)
So I am currently using google picker, and once the user selects the proper file I want a much smaller html box to appear on top of the picker.
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
window.document.location.href = 'metadata.html';
}
}
Obviously the last line is wrong I was just testing. The issue's that the picker is disappearing once the action is performed and I don't know how to format the html to make it appear as a smaller window, i think its a container but I dont know. It makes sense as to why I just don't know a way around it. I want to mention that the other html is in a separate file and looks like this.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<img src="https://www.artusmode.com/wp- content/uploads/2014/06/geotabC7EC4363A3736759998B3CE5.jpg" alt="Geotab Logo" style="width:250px; height:75px; position: relative; bottom: 9px; left: 70px;">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<script>
//When the metadata has been successfully saved as document properties
// close the metadata form panel
function onSave() {google.script.host.close()}
</script>
<div>
Department ID: <select id = "drop" style="margin-bottom: 0.25cm;">
<option value="#001">#001---Law</option>
<option value="#002">#002---Sales</option>
<option value="#003">#003---Tech</option>
</select>
<input
type="button"
style="position:relative; left:60px;"
id="set_dep"
value="Set Department"
onclick=" google.script.run.description(document.getElementById('drop').value)"
/>
</div>
<div style="overflow: hidden; padding-right: .5em;">
Date:<input type="text" id = "date" style="margin-left: 60px; margin-bottom: 0.25cm;"/>
<input
type="button"
id="set_date"
value="Set Date"
onclick=" google.script.run.submitDates(document.getElementById('date').value)"
/>
</div>
<div>
Additional Tag: <input type="text" id="metadata" style="overflow: hidden; padding-right: .5em; margin-bottom: 0.25cm;" onkeydown="if(event.keyCode == 13) document.getElementById('set_tag').click();"/>
<input
type="button"
id="set_tag"
value="Set Tag"
onclick="google.script.run.submitDates(document.getElementById('metadata').value ); clearFields();"
/>
<input
type="button"
value="Close"
onclick="google.script.host.close()"
/>
<input
type="button"
value="Clear"
onclick="google.script.run.clear()"
/>
</div>
<script type="text/javascript">
function clearFields() {
document.getElementById("metadata").value="";
}
</script>
<script>
$("#date").datepicker({
showWeek: true,
firstDay: 0,
});
</script>
</body>
</html>
Basically i just want this to appear as a little pop-up that can receive users information. Ignore the methods as those are fine and were used for a previous project. I'm sure it's super obvious but im not used to working with Javascript.
Thanks everyone.
Opening a Bootstrap modal with JQuery can be done with the following
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Example
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
$('#myModal').modal('show')
}
}
Source
I got an image with which links to another page using <img ...> .
How can I make it make a post like if it was a button <input type="submit"...>?
More generic approatch using JQuery library closest() and submit() buttons.
Here you do not have to specify whitch form you want to submit, submits the form it is in.
Submit Link
<input type="image" name="your_image_name" src="your_image_url.png" />
This will send the your_image_name.x and your_image_name.y values as it submits the form, which are the x and y coordinates of the position the user clicked the image.
It looks like you're trying to use an image to submit a form... in that case use
<input type="image" src="...">
If you really want to use an anchor then you have to use javascript:
...
input type=image will do it for you.
Untested / could be better:
<form action="page-you're-submitting-to.html" method="POST">
<img src="whatever.jpg" />
</form>
<html>
<?php
echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];
?>
<form action="test.php" method="POST">
<input type="hidden" name="c" value="toto98">
<input type="hidden" name="d" value="toto97">
<input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">
Click
</form>
</html>
So easy.
So easy.
What might be a handy addition to this is the possibility to change the post-url from the extra button so you can post to different urls with different buttons. This can be achieved by setting the form 'action' property. Here's the code for that when using jQuery:
$('#[href button name]').click(function(e) {
e.preventDefault();
$('#[form name]').attr('action', 'alternateurl.php');
$('#[form name]').submit();
});
The action-attribute has some issues with older jQuery versions, but on the latest you'll be good to go.
Something like this page ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BSO Communication</title>
<style type="text/css">
.submit {
border : 0;
background : url(ok.gif) left top no-repeat;
height : 24px;
width : 24px;
cursor : pointer;
text-indent : -9999px;
}
html:first-child .submit {
padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
text-indent : 0;
color : expression(this.value = '');
}
</style>
<![endif]-->
</head>
<body>
<h1>Display input submit as image with CSS</h1>
<p>Take a look at the related article (in french).</p>
<form action="" method="get">
<fieldset>
<legend>Some form</legend>
<p class="field">
<label for="input">Some value</label>
<input type="text" id="input" name="value" />
<input type="submit" class="submit" />
</p>
</fieldset>
</form>
<hr />
<p>This page is part of the BSO Communication blog.</p>
</body>
</html>
Dont forget the "BUTTON" element wich can handle some more HTML inside...
We replace the submit button with this all the time on forms:
<form method="post" action="whatever.asp">
<input type=...n
<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>
Clicking the image submits the form. Hope that helps!