I am trying to display an image using jquery.I have a function which has ID & PATH as a parameter.The ID indicates the section(Each section is a html page which gets loaded on user action),Also there is a text area where I am displaying the text file content.Now in a same way i want to display image ,I tried different methods but it didn't work out.Below is my Java Script file & HTML file
HTML File:
<html>
<body>
<div id="tab1" name="tab" style="cursor: pointer; cursor: hand; width:90px;float: left;height: 22px ; margin-top: 0px;
background-color:lightgrey;font-size: 13px;text-align: center;border-bottom: none;display: table-cell;" onClick="tabs(1)">
<div style="margin-top: 3px" >TAB1</div>
</div>
<div id="tab2" name="tab" style="cursor: pointer; cursor: hand; width:90px;background-color:lightgrey;float: left;height: 20px; margin-top: 2px; font-size: 12px;text-align: center" onClick="tabs(2)">
<div style="margin-top: 3px">TAB2</div>
</div>
<div style="width:auto;height: 22px; border-bottom-color: white;border-bottom-style: solid;border-bottom-width: 1px"></div>
<div name="tab_content" style="display: block; margin-left:20px;" >
<br></br>
<br></br>
<div id="legendReport">
Notes 1:
</div>
<textarea name="textArea1" rows="4" value="" cols="50"></textarea>
<br></br>
<br></br>
<div id="legendRough">
Notes 2:
</div>
<textarea id="roughNotes_textArea" name="textArea2" rows="4" cols="50"></textarea>
</div>
<div name="tab_content" class="tab_content" style="display: none;margin-left:20px;">
<br></br>
<br></br>
<textarea name="textArea3" rows="4" cols="50" ></textarea>
<br></br>
<br></br>
<textarea name="textArea4" rows="4" cols="50"></textarea>
<br></br>
<br></br>
<br></br>
<br></br>
<!-- Schematic of selected analysis Point -->
<img id="myImage" src="" style="width:304px;height:228px;"></img>
</div>
</body>
</html>
JavaScript File:
//Displays the file content in text area
function displayTextfileData(textFilePath,ID){
readTextFile(textFilePath);
alert(textFileContent);
var sectionDIV = "#section" + ID;
alert(sectionDIV)
$(sectionDIV).find("[name=textArea3]").val(textFileContent);
$(sectionDIV).find("[name=textArea4]").val(textFileContent);
}
//This function display the image
function displayImage(imageFilePath,ID){
var sectionDIV = "#section" + ID;
alert("displayImageforDropdown():"+imageFilePath);
//$(sectionDIV).find("myImage").src = imageFilePath;
$(sectionDIV).getElementById("myImage").src = imageFilePath;
//document.getElementById("myImage").src = imageFilePath
//alert("displayImageforDropdown(): Assigned result: "+(document.getElementByName("displayImage").src = imageFilePath));
}
Display text file content is working fine,But i want the same on Image
Replace
$(sectionDIV).getElementById("myImage").src = imageFilePath;
with
$(sectionDIV).find("img#myImage").attr("src", imageFilePath);;
Try the following
$(sectionDIV)[0].getElementById("myImage").attr("src", imageFilePath);
or
$(sectionDIV).find("#myImage").attr("src", imageFilePath);
Try
$(sectionDIV).find("#myImage").attr("src", imageFilePath);
Or if you want to use getElementById use $(sectionDIV)[0] to get the HTML DOM Object from the jQuery Object. Something like,
$(sectionDIV)[0].getElementById("myImage").src = imageFilePath;
You can set the 'src' attribute as following:
$(sectionDIV).find("#myImage").prop("src", imageFilePath);
function displayImage(imageFilePath, ID) {
var sectionDIV = "#section" + ID;
//Change this line.....
$("#myImage",$(sectionDIV))[0].src = imageFilePath;
}
Related
I've created an HTML script that allows the user to update keywords in a block of text, then copy that text to their clipboard. The text should display like this:
{
"key1":"value1",
"key2":"value2",
"key3":"value3"
}
But because of the "span" tags, the formatting is completely off (run the code below to see what I mean). I believe span is adding a line break before and after the text it is covering.
Here is my code:
<p>Enter value 1</p>
<input type="text" id="myText1" value="1st value">
<br>
<p>Enter value 2</p>
<input type="text" id="myText2" value="2nd value">
<br>
<button onclick="myFunction()">Update text block</button>
<br>
<br>
<pre style="color: #000; background: #cccccc; padding:10px; display: inline-flex" id="TextToCopy">
{
"key1":"<span id="var1">value1</span>",
"key2":"<span id="var2">value2</span>",
"key3":"value3"
}</pre>
<button style="display: grid" onclick="copyToClipboard()">Click to Copy</button>
<script>
function myFunction() {
var x = document.getElementById("myText1").value;
document.getElementById("var1").innerHTML = x;
var y = document.getElementById("myText2").value;
document.getElementById("var2").innerHTML = y;
}
</script>
<script>
function copyToClipboard() {
var copyText = document.getElementById("TextToCopy");
navigator.clipboard.writeText(copyText.innerText);
}
</script>
Any help would be greatly appreciated! Thank you
You need to remove display: inline-flex; property, and it should work:
<pre style="color: #000; background: #cccccc; padding:10px;" id="TextToCopy">
{
"key1":"<span id="var1">value1</span>",
"key2":"<span id="var2">value2</span>",
"key3":"value3"
}</pre>
You can use a CSS style to remove the white space before and after the text:
<pre style="color: #000; background: #cccccc; padding:10px; display: inline-flex; white-space: pre-wrap;" id="TextToCopy">
{
"key1":"<span id="var1">value1</span>",
"key2":"<span id="var2">value2</span>",
"key3":"value3"
}</pre>
The white-space: pre-wrap; style will preserve any line breaks in the text, while still preventing the text from breaking to a new line when the text is too wide to fit the container.
It can be done without span or ids
<!DOCTYPE html>
<html>
<body>
<p>Enter value 1</p>
<input type="text" id="myText1" value="1st value">
<br>
<p>Enter value 2</p>
<input type="text" id="myText2" value="2nd value">
<br>
<button onclick="myFunction()">Update text block</button>
<br>
<br>
<pre style="color: #000; background: #cccccc; padding:10px; display: inline-flex" id="TextToCopy">
</pre>
<button style="display: grid" onclick="copyToClipboard()">Click to Copy</button>
<script>
function myFunction() {
var x = document.getElementById("myText1").value;
var y = document.getElementById("myText2").value;
document.getElementById("TextToCopy").innerHTML =
`
{
"key1":"${x}",
"key2":"${y}",
"key3":"value3"
}
`;
}
</script>
<script>
function copyToClipboard() {
var copyText = document.getElementById("TextToCopy");
navigator.clipboard.writeText(copyText.innerText);
}
</script>
</body>
</html>
I'm trying to create my own jsfiddle funcionality.
Three textboxes with some codes, but have no idea how to make (and remake) files with their contents.
Or, is there another way to play the code, without creating files ?
$('.button').on('click', function(){
// create demo.css, demo.html and demo.js
// open a new tab and play all the code
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='txthtml'>
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>
<textarea class='txtcss'>
.parent{
background:gold;
}
.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>
<textarea class='txtjs'>
$('.title').on('click', function(){
console.log('clicked');
});
</textarea>
<br><br>
<button>CLICK</button>
create iframe and write the content to the iframe. jsFiddle Demo, not working here because not allowed to aceess iframe.
$('button').on('click', function() {
var addJquery = $('#addJqury').is(':checked')
var html = $('.txthtml').val(),
css = $('.txtcss').val(),
js = $('.txtjs').val(),
output = '<style>' + css + '</style>' +
html +
'<script>' + js + '<\/script>';
if (addJquery)
output = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>' + output;
var iframe = window.results.document;
iframe.write(output);
iframe.close();
});
textarea{min-height:80px;min-width:200px}
iframe{width:100%;height:100%;display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea class="txthtml">
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>
<textarea class='txtcss'>
.parent{
background:gold;
}
.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>
<textarea class='txtjs'>
$('.title').on('click', function(){
console.log('clicked: ' + $(this).html());
});
</textarea><br>
<input type="checkbox" id="addJqury" checked> Add Jquery?
<br><br>
<button>CLICK</button>
<hr>Results:
<hr>
<iframe name="results" src="about:blank"></iframe>
Below, you can find a very simple example that you want.
For render html into your view, you can juste get the value from your textarea and paste in into your content that when you want to do
const code = document.querySelector('.code');
const btn = document.querySelector('.btn');
const render = document.querySelector('.render');
btn.addEventListener('click', () => {
const getHTML = code.value;
render.innerHTML = getHTML;
})
.code {
width: 200px;
height: 200px;
}
<textarea class="code"></textarea>
<button class="btn">go</button>
<div class="render"></div>
On my script I can preview my out put by clicking on my preview button.
In side my pre tags if there is a open <div> and close </div> found with < and > how can I just replace it with the html entities I have tried
$('.preview pre').html(str.replace(/</g, "<").replace(/>/g, ">"));
But because there are br tags in there it replaces the ones around br also which I do not want. I only just want to replace the ones around the open and close div's in side my pre tag.
Question: how can I just replace it with the html entities < and
> only round the open and close divs
Codepen Example Here
Script
<script type="text/javascript">
$('#preview-question').on('click', function (e) {
var editor = $('#question').val();
$('.preview').html(editor.replace(/\n/g, '<br/>'));
$('.preview pre').next('br').remove();
if ($('.preview').find("pre").length > 0){
var str = $('.preview pre').html();
$(".preview pre div").replaceWith("<div>");
//$('.preview pre').html(str.replace(/</g, "<").replace(/>/g, ">").next('div'));
$('.preview pre').html(str);
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
}
});
</script>
I have make a for loop for detect only div element and remove all <br>. It's a bit ugly but work fine.
$('#preview-question').on('click', function (e) {
var editor = $('#question').val();
$('.preview').html(editor.replace(/\n/g, '<br/>'));
$('.preview pre').next('br').remove();
if ($('.preview').find("pre").length > 0){
var $str = $('.preview pre');
var pre = $str.html();
$str.html("");
pre = pre.replace(/<br>/g,"\n")
for(t=0;t<pre.length;t++){
if(pre.substr(t,1) == "<" && pre.substr(t+1,3) == "div"){
$str.html($str.html() + pre.substr(0,t).replace(/</g, '<'))
}else if(pre.substr(t,1) == "<" && pre.substr(t+1,4) == "/div"){
$str.html($str.html() + pre.substr(0,t+5).replace(/</g, '<'))
}
if(pre.substr(t,1) == ">" && pre.substr(t-3,3) == "div"){
$str.html($str.html() + pre.substr(t,1).replace(/>/g, '>'))
}
}
}
});
body {
background-color: #F0F0F0;
}
.panel {
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}
.panel-default > .panel-heading {
background-color: #4d525b;
border-color: none;
color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title"></h1>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-lg-2">Title</label>
<div class="col-lg-10">
<input type="text" name="title" class="form-control" placeholder="Title" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2">Question</label>
<div class="col-lg-10">
<textarea name="question" id="question" class="form-control" rows="10">
Hello this is some code
<pre>
<div class="">
</div>
</pre>
</textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-2"></label>
<div class="col-lg-10">
<div class="preview"></div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" id="preview-question" class="btn btn-default">Preview</button>
Cancel
</div>
</div>
</div>
I have a script which has three buttons which shows a div when clicked, now my question is how do I hide those div's so let's say div 1 is opened and I click to open div 2, then make it show div 2 but hide div 1 so that I can have the div's be in the same position, but they only show if they are supposed to.
My script:
<!-- SUPPORT CONTACT FORM START-->
<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showSupForm()"/>
<div id="contactSupportForm">
TEST
</div>
</div>
<script type="text/javascript">
function showSupForm() {
document.getElementById('contactSupportForm').style.display = "block";
}
</script>
<!-- SUPPORT CONTACT FORM ENDING-->
<!-- BUSINESS CONTACT FORM START-->
<div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showBusForm()"/>
<div id="contactBusinessForm">
TEST
</div>
</div>
<script type="text/javascript">
function showBusForm() {
document.getElementById('contactBusinessForm').style.display = "block";
}
</script>
<!-- BUSINESS CONTACT FORM ENDING-->
<!-- OTHER CONTACT FORM START-->
<div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showOtherForm()"/>
<div id="contactOtherForm">
TEST
</div>
</div>
<script type="text/javascript">
function showOtherForm() {
document.getElementById('contactOtherForm').style.display = "block";
}
</script>
<!-- OTHER CONTACT FORM ENDING-->
css part:
#contactSupportForm{
display: none;
}
#contactBusinessForm{
display: none;
}
#contactOtherForm{
display: none;
}
Here is a JSFiddle to show the whole process of how it works.
http://jsfiddle.net/m0jdv6u0/3/
You could try this:
function showOtherForm(idElement) {
document.getElementById('contactOtherForm').style.display = "none";
document.getElementById('contactSupportForm').style.display = "none";
document.getElementById('contactBusinessForm').style.display = "none"
document.getElementById(idElement).style.display = "block"
}
And you call in each button passing the id of the div, like this:
showOtherForm('contactOtherForm')
Of course, you can make some verifications, so you don't need to set the display on the 3 divs, but I think you dont need that...
Hope it helped!
There's probably a more elegant way to use classes as selectors and achieve the same functional goal, but here's a solution that would enable you to add additional form / button elements without having to add additional show/hide blocks:
[Note - this is not significantly different from #Cleversou's answer]
function showForm(elemId){
var arr = ["Other", "Business", "Support"] ;
for(var i = 0; i < arr.length; i++){
if(elemId === "contact" + arr[i] + "Form"){
document.getElementById(elemId).style.display = "block";
} else {
document.getElementById("contact" + arr[i] + "Form").style.display = "none";
}
}
}
#contactSupportForm{
display: none;
}
#contactBusinessForm{
display: none;
}
#contactOtherForm{
display: none;
}
<!-- SUPPORT CONTACT FORM START-->
<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showForm('contactSupportForm')"/>
<div id="contactSupportForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- SUPPORT CONTACT FORM ENDING-->
<!-- BUSINESS CONTACT FORM START-->
<div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showForm('contactBusinessForm')"/>
<div id="contactBusinessForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- BUSINESS CONTACT FORM ENDING-->
<!-- OTHER CONTACT FORM START-->
<div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showForm('contactOtherForm')"/>
<div id="contactOtherForm">
TEST
</div>
</div>
<script type="text/javascript">
</script>
<!-- OTHER CONTACT FORM ENDING-->
Here is my jQuery code:
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('input[type="submit"]').click(function() {
$.ajax({
type: 'POST',
url: $('form').attr('action'),
success: function(data) {
//
}
});
return false;
});
}); //-->
</script>
What I want to do after the submit button is clicked is:
make an AJAX request to the page identified by form's action attribute (which happens to be the same php script with the form... so basically the form should submit to the same page).
replace the HTML of the whole page with the ajax request returned value.
However, I don't know how to do that. There is no html or body tag on the page with the form as the form is getting icnluded in another page with jQuery.
So how to replace the HTML of the page with the HTML ajax returns?
This is how the whole HTML looks like (this is evrything, there is no html or body tag):
<form enctype="application/x-www-form-urlencoded" method="post" action="editDocumentQuestion.php?iqid=-5">
<dl>
<dt>
<label for="questionBody">Otázka:</label>
</dt>
<dd style="margin-left: 0;">
<textarea name="questionBody" id="questionBody" rows="4" cols="95" style="border: 1px solid #2278B9; font-family: sans-serif;">Otazka</textarea>
</dd>
<dt style="padding-top: 1em;">
<label for="questionCorrectAnswer">Odpovede:</label>
</dt>
<dd style="margin-left: 0;">
<div class="pad-top">
<div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="1" checked="checked" />a)</div>
<div style="float: left;"><textarea name="questionAnswer1" id="questionAnswer1" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved a</textarea></div>
<div style="clear: both; height: 0; line-height: 0;"></div>
</div>
<div class="pad-top">
<div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="2" />b)</div>
<div style="float: left;"><textarea name="questionAnswer2" id="questionAnswer2" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved b</textarea></div>
<div style="clear: both; height: 0; line-height: 0;"></div>
</div>
<div class="pad-top">
<div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="3" />c)</div>
<div style="float: left;"><textarea name="questionAnswer3" id="questionAnswer3" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved c</textarea></div>
<div style="clear: both; height: 0; line-height: 0;"></div>
</div>
</dd>
<dt>
</dt>
<dd style="margin-left: 24.5em;">
<input type="submit" name="editovatDokumentovuOtazku" id="editovatDokumentovuOtazku" value="Ulož" style="width: 6em; padding: .3em 0;" />
</dd>
</dl>
</form>
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('input[type="submit"]').click(function() {
$.ajax({
type: 'POST',
url: $('form').attr('action'),
success: function(data) {
//
}
});
return false;
});
}); //-->
</script>
Even though there is no body or html tag you should be able to replace it like this:
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('input[type="submit"]').click(function() {
$.ajax({
type: 'POST',
url: $('form').attr('action'),
success: function(data) {
$('body').html(data);
}
});
return false;
});
}); //-->
</script>
Firefox 3.6.8, IE 8 and Chrome automatically inserts html and body tags if they are not present (those are the ones I have tested against)
replace the HTML of the whole page
with the ajax request returned value.
Try modifying your success handler like this:
success: function(data) {
$('form').after(data).end().remove();
}
What it does is that it inserts ajax data after your current form with .after(data) and end() is used to revert back to the form and finally remove() is used to remove the form.