Jump to content

Outputting "js" in Non-Editable Textarea


louisstephens
 Share

Recommended Posts

So, I am not even sure if this is possible, but I thought I would ask anyway. I was building a "system" that would make some modals (izimodal) using a few fields. A user would select the color combo they want, enter a title, fill out the body, and then I was going to pass this (in the template) to fill in the modal. I have this all working pretty flawlessly.

<div id="example-modal" class="model" data-izimodal-autoopen data-izimodal-transitionin="fadeInDown"  data-izimodal-iframeURL="<?php echo $page->example->url; ?>"></div>


<script type="text/javascript">
 
  $("#ca-entrance-modal").iziModal({
		title: 'Custom Title Here',
   		subtitle: '',
   		headerColor: 'Custom Color Here',
	    history: false,
    	iframe : true,
    	fullscreen: false,
    	loop: false,
    	width: 350,
		iframeHeight: 350,
   		top: null,
   		bottom: null,
   		borderBottom: false,
		closeButton: true,

  });

</script>

However, I have hit a road block. The modals are using iframes to pull in the corresponding modal page, but the javascript options are not being iframed (so the modal will actually launch etc). My thought was the user can just copy the page link to the modal, and insert it into the iframe and simply adding the js code, the modal would work (which it does).

I guess here is my actually problem. Since the user is selecting several options to "customize" the modal, the javascript is custom and differs between each modal. Is there a way to "disable" a textarea, and output the "custom" javascript inside the textarea so they can copy it for inclusion on their actual pages?

 

Or, is this something that I should just output in the frontend view for users.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Liam88
      Hi,
      I'm really struggling with this as it's something not in my wheelhouse. I'm creating a blog style page (a grid of cards) which has attributes.
      I have a snip of javascript which grabs values from checkboxes which are put into a value like the below:
      ?content=static_video&channel=facebook-ads_instagram-ads
      document.querySelector("form").onsubmit=ev=>{ ev.preventDefault(); let o={}; ev.target.querySelectorAll("[name]:checked").forEach(el=>{ (o[el.name]=o[el.name]||[]).push(el.value)}) console.log(location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&") ); document.location.href = location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&"); } As I'm currently refeshing the page on button click with those values the end result includes the location but can easily remove this.
      I then use this value in "input->get" to get the values which I then append to a find() rule. See code below:
      $selector = "template='adbank_pages',sort=published,include=all,status!=hidden"; // Get the channel and content inputs $channel = $input->get->channel; $content = $input->get->content; if($channel){ // Grab the channel string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $chanArray = explode("_", $channel); $chan = $channel = str_replace('_', '|', $channel); $selector = $selector .= ",ab_channels=$chan"; } if($content){ // Grab the content string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $contArray = explode("_", $content); $cont = $content = str_replace('_', '|', $content); $selector = $selector .= ",ab_content=$cont"; } if($input->get){ // If a valid input result $all = $pages->find($selector); } }else{ // If no input show them all $all = $page->children("template='adbank_pages',sort=-published,include=all,status!=hidden"); } $items = $all->find("limit=12"); // Limit the output and use pagination As mentioned above I currently refresh the page to adjust the $selector filter within the $all with a fallback $all if there are no results.
      I know I need to use AJAX to filter the content without refresh but I am really struggling with the set up. I have read multiple posts including the original by Ryan but still confused.
      If anyone can direct/help on this it would be appreciated.
      Thank you
    • By fruid
      could someone help me find the javascript bug?
      https://codepen.io/bbblgmsp/pen/LYxWJJa
      or here:
      https://foobar.roofaccess.org/carousell/
      I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it.
      It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element).
      I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though…
      Thanks for help
    • By franciccio-ITALIANO
      Hello to all. I would like to create an app. So I need to learn at least one programming language. I got informed online, and discovered that javascript with node.js, is the revolution of recent years, because it's faster than php. I wonder: if I develop an app with javascript and with a javascript framework (e.g. Meteor), is there a way to integrate processwire work? I know that processwire supports the transformation of the site into an application, but would it be as simple as Meteor? With the Meteor framework I have my app online in 10 minutes, and without even knowing javascript! (Knowing javascript would serve to personalize it). I should then install the app in a SUB-DOMAIN. If I study php, instead, and if I use a php framework (e.g. Laravel), how long does it take to have my first working app? Is it easy to process Laravel's components? Is writing forms for processwire apps with php a very complex job? Is it better to use Meteor and start with javascript? What would you recommend?
    • By ngrmm
      My clients wants a modal to show up on every page. But when a user clicks inside the modal -> a session-cookie is set and the modal gets a class.
      // user clicks on modal button $('.modal_button').click(function(){ // 1. set PW session cookie // 2. toggle class $('.modal').toggleClass('off'); }); I know how to set a cookie on page-load via PW-API. But the click on the modal button does not force a page-load. So i have to set the cookie through javascript. Is there a way to do that?
    • By adisharma
      Hello Everyone, I am new in this community and I am learning typescript but my friend was suggested to me go with javascript profile because it is most popular scripting language for many web projects and huge community support with lots of documentation and support for solving issues. Can anyone clear this point which one is better for future points of view typescript or javascript?
×
×
  • Create New...