Set the new cloned div to be read-only within the dialog box

I have customized a div on a webpage that I want to display as a preview in a dialog box using jQuery's clone function. Now I am trying to make the cloned div readonly once it is displayed in the dialog. Can someone please help me with this? Thank you.

function callPreview()
{
$('#maincontainer').clone().appendTo('#previewDiv');

document.getElementById('previewDiv').disabled=true;
$.fx.speeds._default = 500;
$(function() {

        $( "#previewDiv" ).dialog({
            autoOpen: false,
            width:600,
            height:800,
            autoClose: false,
            show: "fold",
            hide: "core",
            resizable:false

        });

        $( "#previewBtn").click(function() {
            $( "#previewDiv" ).dialog( "open" );
            return false;
        });
});
}

Answer №1

When readonly is defined as restricting user input but still enabling text selection and copying, the solution is to apply the 'readonly' attribute to each 'input' element within the specified div:

$("input","#outputDiv").attr('readonly', true);

Answer №2

$(".targetElement :input").prop("disabled", true);

I found success with this solution!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I eliminate the scrollbar from appearing on all browsers when visiting my website?

I've encountered an issue while building my portfolio with React.js. I'm having trouble removing the scrollbar. I've attempted using overflow: hidden for the parent element and overflow: scroll for the child div, but it's not producing ...

Display icons next to badges in a Bootstrap list for a visually appealing design

I am facing a challenge with my Twitter Bootstrap list that includes badges and a delete icon. There are two issues I need assistance with: The badge is automatically positioned to the right of the list row, but I would prefer the delete icon to come aft ...

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

Certain conditions in JavaScript are not executed by Internet Explorer

I am currently working on a Html file that involves XSLT. I have integrated some JavaScript code for filtering specific rows within tables. However, I have encountered an issue where certain if-cases in my JavaScript are not executing as expected when usin ...

Steps to transfer extra files such as config/config.yaml to the .next directory

I have the following folder structure for my NextJS project: _posts/ components/ hooks/ config/ <--- includes config.yaml file for the server pages/ public/ .env.local ... yarn build successfully copies all dependencies except for the config/ folder. ...

Discover the steps to incorporate a glowing effect into your custom progress bar using JavaFX

After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar. To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a tim ...

Generating a dynamic form by utilizing a JavaScript JSON object

I need assistance with creating an html form based on a JSON object’s properties. How can I target multiple levels to generate different fields and also drill down deeper to access field details? I am open to suggestions for alternative formats as well. ...

Is it possible to configure Nginx to provide HTTPS on port 10000 and implement Basic Auth for an Express app?

My Linux NodeJS/Express application is designed to serve a text file located at http://example.com/secret.txt. I am looking to restrict access to this file only over HTTPS on port 10000 with Basic Auth security measures in place. It's important to no ...

PHP - implement a button that triggers an AJAX request to switch languages

I am trying to find a basic PHP script that can modify a variable when a button is clicked to display different languages. Can anyone help me with this? Click on the button to change language options: English - value= en French - value= fr When I click ...

Utilize the size of the array as a variable

I have a question regarding the use of the length of an array as an integer value in JavaScript. Here is the code snippet: var counter = 0; var bannerLinks = document.getElementsByClassName("bannerlink"); var linkCount = bannerLinks.length; va ...

Creating a mobile-friendly split column layout with Bootstrap 5

I have a similar question to the one posed in this thread How to split Bootstrap column in mobile mode, but I am working with Bootstrap 5 and the previous solution using float: right no longer works due to flexbox. On desktop, I have two columns and I wan ...

React-modal triggers the file-explorer upon exiting the dropzone

Within my project, I have implemented a button that triggers a modal to appear on mouse-over. This button is nested inside a dropzone element. https://i.sstatic.net/95dxy.png The issue arises when I exit the modal by clicking (not exiting with the escape ...

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

Utilizing Element IDs for JQuery Tab Implementation

Having two buttons and two divs with paragraphs, I want to create tabs without adding new classes or IDs. Can I achieve tab switching using the existing IDs that end with "_one"? For instance: The first button has the ID "tab_button_one" and the first di ...

Ways to determine the overall cost of a shopping cart using Vuejs Vuex

Running a business requires managing various aspects, including tracking the inventory. In my store, I have an array called basketContents that contains items with their respective quantities and prices. An example of how it looks is: state: { basketConte ...

Issue with Bootstrap 4 list items not displaying in block format

Based on the information from , using li tags as block elements should result in a vertical menu. However, with Bootstrap 4, when I use li tags, the menu stays horizontal on toggle for small devices. Is this the expected behavior? <ul class="nav navb ...

Combining Asynchronous and Synchronous Operations in a Function: Using Cache and Ajax Requests in JavaScript

I am currently exploring how to combine two different types of returns (async / sync) from a function that is structured like this : retrieveVideo(itemID){ let data = localStorage.getItem(itemID) if ( data ) { return data; } else{ axios.ge ...

Can a text file be loaded into the title of a Bootstrap tooltip?

Looking to dynamically load a text file into bootstrap tooltip titles. Here is a snippet of working code with hardcoded values: <div> <a id="A" type="button" class="btn btn-outline-secondary btn-lg" data-toggle=& ...

"Choose all tick boxes that do not have any assigned classes

Having trouble selecting all checkboxes when the ".selectall" checkbox is checked. Despite trying various selector arrangements, I can't seem to make it work. I'm not sure how to properly structure the selectors to achieve label -> input selec ...

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

Currently, I am utilizing the MUI autocomplete feature in conjunction with react-hook-form. I have meticulously followed the guidance provided in this insightful response. ControlledAutoComplete.jsx import { Autocomplete, TextField } from "@mui/mater ...