How to provide preview functionality using JavaScript or jQuery? - javascript

I have 3 templates (static html pages).
Based on my selection one template will open in the form of popup. I have to add some content to that template when I want to show that template in the form of popup. Now I'm showing that templates with using window.open(url).
But I'm not able to add the content to that template while showing in the form of popup (in single word when I click on "preview" button in the form then popup will generate with predefined HTML template with some form data).
Basically I am looking for preview functionality using JavaScript or jQuery, so please provide code for the same.

create a test.html page and Paste this code into the HEAD section of your HTML document.
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
Paste this code into the BODY section of your HTML document
<form>
<textarea name="htmlArea" cols=45 rows=6></textarea>
<br>
<input type="button" value=" view " onclick="displayHTML(this.form)">
</form>
Test it in browser..
If found helpfull please do the same in your code.

if you use window.open() you can give a name to your window and then manipulate the content of that window:
var win = window.open(url, 'mywindow');
win.document.write('<h1>Popup Test!</h1>');
if the window with name 'mywindow' doesn't exist it will open a new one, otherwise it will use the existing window

Related

Is there a to change the value of an element using JavaScript

I'm trying to change the value of an element on a third-party web page using a JavaScript Add-on to display a hyperlink
I already have the link on the page i would like to be able to click it
I think I'm on the right track using document.getElementById although I'm not sure how to then change the id into a "a href" and then how to pass it back into the value.
Sorry, this is a bit of a tricky situation so I'll try my best to explain it. On a third-party web-page which we use for our HR related tasks, there is a section titled "File Link" although this isn't a link. When you copy and paste the address into a browser it displays the file. What i am trying to do is create a hyperlink on the "File Link" section to remove the need to copy and paste the link. Because this is a third party website. We have access to the JavaScript on the website and need to change the address into a hyperlink. I'm not entirely sure this is possible.The element id is "__C_cb_file_link" and i would like to insert the link address into the element using a variable then add the link parameters into the variable then reinsert it into the element/value.
function linkIt() {
var intoLink = document.getElementById("__C_cb_file_link");
var hLink = "<a href="+intoLink+"</a>;
intoLink.value = hLink;
}
window.onload = linkIt();
<td><div class="sui-disabled" title="">m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674</div>
<input type="hidden" name="__C_cb_file_link" id="__C_cb_file_link" value="m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674"/></td></tr>
In below code first we read input value with new link (however we can read this value from other html tags), then we remove this element (and button) and add to parent element (of removed input) the new link
function linkIt() {
let intoLink = __C_cb_file_link.value;
let parent = __C_cb_file_link.parentNode;
__C_cb_file_link.remove();
btn.remove();
parent.innerHTML += `${intoLink}`;
}
<input id="__C_cb_file_link" value="https://example.com">
<button id="btn" onclick="linkIt()">Link It</button>
There are a number of issues with your code:
1) The code snippet in your question doesn't run because of a missing " at the end of the second line of the linkIt() function.
2) intoLink is a hidden field so anything you add to it will not be visible in the page
3) Even if point 2 were not true, setting the value of a form field will not cause HTML to appear on the page (at best you might get some plain text in a textbox).
4) "<a href="+intoLink+"</a>" doesn't work because intoLink is a complex object which represents the entire hidden field element (not just its value property). You can't convert a whole object into a string directly. You need to extract the value of the field.
A better way to do this is by creating a new element for the hyperlink and appending it to the page in a suitable place. Also I recommend not adding your event via onload - when written using this syntax only one onload event can exist in a page at once. Since you're amending another page which isn't under your control you don't want to disable any other load events which might be defined. Use addEventListener instead, which allows multiple handlers to be specified for the same event.
Demo:
function linkIt() {
var intoLink = document.getElementById("__C_cb_file_link");
var hLink = document.createElement("a");
hLink.setAttribute("href", intoLink.value);
hLink.innerHTML = "Click here";
intoLink.insertAdjacentElement('beforebegin', hLink);
}
window.addEventListener('load', linkIt);
<td>
<div class="sui-disabled" title="">m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674</div>
<input type="hidden" name="__C_cb_file_link" id="__C_cb_file_link" value="m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674" /></td>
</tr>
P.S. m-files:// is not a standard protocol in most browsers, unless some kind of extension has been installed, so even when you turn it into a hyperlink it may not work for everyone.
[UPDATE] I supose that your "__C_cb_file_link" was a paragraph so I get the previous text http://mylink.com and create a link with, is it what you want, right?
function linkIt() {
let fileLink = document.getElementById("__C_cb_file_link");
let hLink = fileLink.textContent;
fileLink.innerHTML = ""+hLink+"";
}
linkIt();
<div>
<p id="__C_cb_file_link">http://myLink.com</p>
</div>

How to add HTML code to a different HTML file using JavaScript or PHP

Alrighty, so I am trying to make a little page on my website that takes a few values and then when you click a button, it adds those values inside of a div on a different HTML page.
My code is:
<input type="text" name="URL"><br>
<input type="text" name="ImageURL"><br>
<input type="text" name="Title">
<button onclick="addCode()">Submit</button>
So for the addCode() function I want it so that it adds the values inside of a the item div on a different HTML file just like:
<div class="item">
<div class="animate-box">
<a href=URL><img src=ImageURL></a>
<div class="fh5co-desc"><a style="TEXT-DECORATION:none; COLOR:#818892; LINE-HEIGHT:20px;" href=URL>Title</a></div>
</div>
</div>
Thanks in advance.
What you are doing is technically impossible. without some sort of persistence, that is;
you cannot edit a page you aren't on. web browsing is a stateless technology.
if you meant you want to fill out those inputs then redirect on click and have those values available, there are a few different ways to do it:
1) Query String
write your code on the second page in a way that it accepts params from a query string in the url bar
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
var textDecoration = getUrlParameter('textdec'),
color = getUrlParameter('color'),
lineHeight = getUrlParameter('lnheight');
then you can send the request for the page as
http://page.com/page?textdec="someval"&color="somecolor"&lnheight="someheight"
however this will not work if you are not going directly to that page after your current one
2) localStorage
on your first page set the local storage values:
localStorage.setItem('lineHeight', 'someVal');
localStorage.setItem('color', 'someColor');
localStorage.setItem('textDecoration', 'someVal');
then on your second page retrieve the values
var lineHeight = localStorage.getItem('lineHeight'),
color = localStorage.getItem('color'),
textDecoration = localStorage.getItem('textDecoration');
3) serverSide persistence
this will vary MASSIVELY depending on how you your backend is structured
but the general gist is make a post request (ajax or otherwise) &
collect the data on the backend
then when you render the second page send the variables that were posted, either through interpolation or included as script variables
The only way to do this (without getting other technologies involved) is to use the localStorage, storage event. And, even with this, it will only work when the two pages are coming from the same domain and are open in different browser tabs (of the same browser) at the same time.
If those conditions are present, then modifying localStorage on one page will fire the storage event, which the other page can be set up to listen for. The other page can then respond to the event by pulling new values (that the first page wrote into localStorage) out and placing them anywhere on the second page that you like.
This is the kind of solution that you might encounter if you were on a travel site with more than one browser tab open. You may be looking at different flight options in different tabs. If one tab's code has an update that any/all other open tabs should know about, this technique does the trick.
Here's an example of how to set values into localStorage and use them. But, localStorage doesn't work here in the Stack Overflow snippet environment, so you can run the code here.
Once the values are in localStorage, you can pick them up from any other page that is being served from the same domain. So, the "getItem" code I'm showing here would really be placed on your "page2.html".
// Get DOM references:
var name = document.getElementById("name");
var color = document.getElementById("color");
var airspeed = document.getElementById("airspeed");
var btn = document.getElementById("btnGo");
// Set up button click event handler:
btn.addEventListener("click", function(){
// Get values and place in localStorage
localStorage.setItem("name", name.value);
localStorage.setItem("color", color.value);
localStorage.setItem("airspeed", airspeed.value);
// For demonstration, get values out of localStorage
console.log("What is your name? ", localStorage.getItem("name"));
console.log("What is your favorite color? ", localStorage.getItem("color"));
console.log("What is the airspeed of a laiden swallow? ", localStorage.getItem("airspeed"));
// If you wanted to redirect the user to the second page, now that the intial values
// have been set, you could just do:
location.href = "path to second page";
});
<div>What is your name?<input type="text" id="name"></div>
<div>What is your favorite color?<input type="text" id="color"></div>
<div>What is the airspeed of a laiden swallow?<input type="text" id="airspeed"></div>
<button id="btnGo">Go!</button>
If you're trying to edit the actual source code of the file, you'll need something like PHP. Otherwise, JS is just fine.
PHP Solution
You could use something like this:
<?php
$old = file_get_contents("some_page.html");
$content = explode("<span>",$old,2); // replace <span> w/ opening tag
$content = explode("</span>",$content[1],2); // replace </span> w/ closing tag
$data = "new content of element";
$new = str_replace($content[0],$data,$old);
?>
Updated JS Solution
You can't use my previous solution. Instead, you would have to create a function in the second HTML file that could be called from the first file, like this:
A script in file2.html:
function set(id,val){
$("#"+id).html(val); // jQuery
document.getElementById(id).innerHTML = val; // pure JS
}
A script in file1.html:
var win = window.open("http://example.com"); // open the window
win.set("some_id","Some content.") // the function that we set earlier
Note that this is reverted once the user closes or reloads the tab, and only applies to that user and that tab.

How to get the value of h1 tag using JS?

I have 3 pages, the 2 pages are WordPress pages and the other 1 is a custom page template with a form. The 2 pages are created using wp-job manager plugin. The 1st page has had a dropdown menu and contains list of jobs. On the 2nd page is the description of a job.
Now, I want to get the value of h1 tag on the 2nd page after the user click the input button and pass it to the 3rd page and displayed it in one of the input textbox (Position input textbox) using JS.
How to do this?
Here's the link of the 2nd page
3rd page
HTML:
<header class="entry-header">
<h1 class="entry-title">Collections Trainer</h1>
</header>
Vanilla JavaScript solution (no framework required):
var h1Text = document.querySelector(".entry-title").textContent;
can you use jquery? if so, get the h1 values when you click the button from jquery and then sent to the other page using query string.
EDITED
Add the jquery file in your page to user jquery features. And you need to put the function inside $(document).ready() function in order to attach the function into the object.
you can learn more about jquery in https://learn.jquery.com/.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"/>
<script>
$(document).ready(function(){
$('.application_button').click(function(){
var headervalue = $(".entry-title").text();
window.location = "http://homecredit.ph/testEnvironment/4537-2/?position="+headervalue;
});
});
</script>
Use the class you've given the heading in normal js use the following.
var x = document.getElementsByClassName('entry-title').value;
console.log(x); //outputs collections trainer
If you're using jQuery then its
$('.entry-title').text
Hope that helps.
If you want to get the h1 value only after the button click you will need to put the onclick for the button.
$.(document).ready(function(){
var header1Text ='';
$('.application_button').onclick(function(){
header1Text = $('h1').html();
});
//To display it in whichever textbox you want:
$('#GivesomeIDtoYourTextBox').val(header1Text);
});
PS:You need to also include the jquery source to your page.
jQuery: To get H1 value
var gValue=jQuery("header h1.entry-title").text();
alert(gValue);
As you need to fetch values on other pages, for that you can send values via QueryString or using HTML5 LocalStorage
Sample Code:
var first_page_h1_Value=jQuery("header h1.entry-title").text();
var second_page_h1_Value=jQuery("header h1.entry-title").text();
localStorage.setItem("FirstPage", first_page_h1_Value);
localStorage.setItem("SecondPage", second_page_h1_Value);
On third Page you can get both pages header text
alert(localStorage.FirstPage);
alert(localStorage.SecondPage);
If you are using Jquery then i would recommend that you give id to your H1 tag assuming id of your H1 tag is "h1Title".
HTML:
<h1 id="h1Title">Heading here</h1>
Then to get the title you write following in JQuery:
var title = $("#h1Title").text();
//To Check Whether you are getting text or not
console.log("title :"+title);
By this you will get text of your heading.

Twitter Intent link is not opening in a new window

I have created an interface that allows people to Tweet at certain individuals from a webpage. To do so, I am utilizing Twitter's web intents. At first, the page had a textarea that contained a placeholder tweet that was passed through as a text parameter when a user clicked a Reply button, but the scope has changed so that the user should be able to enter text in the textarea, click the button, and see the Twitter popup with their updated tweet, because user testing showed that people were less likely to tweet at people if they weren't able to edit the content on the page.
The problem is that while this code does update the Twitter intent link, it seems to have broken some functionality of the Twitter intent link. Most notably, the links do not open up in a small popup like they normally do - instead, they replace the current page. Also, the "in_reply_to" functionality is intermittent - certain links that should contain tweets to reply to do not, while others do.
Anyone tried to do anything like this? And if so, any advice? I'm at a loss at this point.
The HTML (we're using Django, hence the template logic):
<div class="response">
{%if quote.tweet_id%}
<textarea id="twitter_response_text" class="has_tweet_id" maxlength="140">{{quote.twitter_handle}} {{quote.twitter_text_default}}</textarea>
<label for="twitter_response_text"><span></span></label>
<a class="hasReply" data-tweet-id="{{quote.tweet_id}}" href="https://twitter.com/intent/tweet?in_reply_to="><button value="respond" data-quote-id="{{quote.id}}"/><img src="{{STATIC_URL}}img/reply_arrow.png"> Reply</button></a>
{%else%}
<textarea id="twitter_response_text" maxlength="140">{{quote.twitter_text_default}}</textarea>
<label for="twitter_response_text"><span></span></label>
<button value="reply" data-quote-id="{{quote.id}}" /><img src="{{STATIC_URL}}img/reply_arrow.png"> Reply</button>
{%endif%}
</div>
Javascript:
$(".response a, .twitteraction a").on("click", function() {
//get text from the textarea of the current slide
var textarea = $(this).parents(".slide").find("#twitter_response_text")
if (textarea.val() !== "") {
text = textarea.val();
} else {
text = textarea.text();
}
//maybe we need the handle?
// var handle = $(this).parents(".slide").find("#twitterhandle").text();
//get the link
var link = $(this).attr("href");
//check to see if it needs reply link or regular
if ($(this).hasClass("hasReply")) {
//get the tweet id, stored as data attribute in the anchor
var tweetId = $(this).data("tweet-id");
//construct the query with a twitter id but no handle
var query = encodeURIComponent(tweetId) + "&text=" + encodeURIComponent(text) + "&related=ForecastFacts&original_referer=http://climatecliff.org/";
//add link to anchor
$(this).attr("href", (link + query));
} else {
//construct the query with text and related
var query = encodeURIComponent(text) + "&related=ForecastFacts&original_referer=http://climatecliff.org/";
//add query to anchor
$(this).attr("href", (link + query));
}
});
Turns out there is a way to remove the dependency on platform.twitter.com for their Javascript by adding it yourself - https://dev.twitter.com/docs/intents
Regarding the intermittent in_reply_to links, for some reason the data I attributes I had were adding 1 to the tweet_id that was being passed in the Django context. I'm not sure why, but I went ahead and refactored my code to only dynamically add the text, rather than the tweet id, since that isn't going to change.
Now it all works just fine.

Write to a div in a new window

I have an HTML page, X.html:
......
<div id = "content"></div>
......
I use following code to open the X.html and want to write something in the content div.
content = "show in the div in the new window";
newWindow = window.open('X.html','');
newWindow.document.getElementById("content").innerHTML = content;
This doesn't work.
I used Firebug, the code ends after the new window pops out. I don't want to write the whole thing in X.html and I want to use this simple way to write content in a specific area in the X.html.
What should I do?
I believe that will help you.
http://www.javascripter.net/faq/writingt.htm

Categories