The document.write function in JavaScript is malfunctioning

I've been attempting to utilize the javascript function document.write to incorporate an external css file in my template. However, I am aiming to achieve this using Twig, like so:

document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');

Unfortunately, it does not seem to work. Why is the document.write function failing? Can I include that Twig code within it?

Alternatively, what is the most effective way to pass a css route with Twig to a document.write javascript function?

Apologies if my English is not perfect. I hope my message comes across clearly. Thank you.

javascripthtmlcsssymfonytwig

Answer №1

Incorporate this into your code

{% stylesheets
    "@StylesBundle/Resources/public/css/app-red.css"
    "%kerner.root_dir%/Resources/css/custom.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}

Answer №2

After some reflection, I have finally figured out what was causing the issue. It turns out that my error was using the document.write() function within the $(document).ready() function. Unfortunately, I failed to provide all of the code earlier for better understanding. Lesson learned - I now know that document.write() cannot be used inside the $(document).ready() function. Thank you to everyone for your comments and responses!

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

Characteristics of events within the embed element

<div id='aplayer'></div> js $('#note').click(function() { $('#aplayer').html("<embed src=" + music + " onended='test();'" + ">"); }); function test(){ alert ('525'); } audio is ...

javascriptjqueryeventsembed

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

Methods for updating the value of a `<select>` element in an AngularJS controller

Within my HTML code, I have a select element with options ranging from 1 to 10: <select id="selVal" ng-model="product.quantity" ng-options="o as o for o in quantityValues" ng-change="updateDelta(product.quantity, {{product.quantity}}, product.selec ...

javascripthtmlangularjsselectng-options

Angular 2 template can randomly display elements by shuffling the object of objects

I am working with a collection of objects that have the following structure: https://i.stack.imgur.com/ej63v.png To display all images in my template, I am using Object.keys Within the component: this.objectKeys = Object.keys; In the template: <ul ...

javascriptangulartypescriptjavascript-objects

The AJAX call is failing to update the state data in my React component

I've recently delved into ReactJS and encountered an issue regarding setting state while using an AJAX request. The AJAX call successfully communicates with the server, receiving a 200 code response, indicating that the API request functions properly ...

javascriptjqueryajaxreactjses6-module-loader

Tips on incorporating negation in npm script's glob pattern usage?

I have been struggling to create a clean npm script that works properly. Every time I try, I either encounter an error in the console or the intended outcome doesn't occur. My goal is to remove all root JavaScript files except for certain config files ...

javascriptnpmnpm-scripts

After extended periods of use, the website experiences frequent crashes

Currently, I am developing a website using a free provider (000webhost) and focusing on integrating a chat feature. To achieve this, I have implemented an interval every 500 milliseconds that reads a file to check for new messages. When a new message is de ...

javascriptajaxwebcrashchat

Adjust the height of the second column in Bootstrap 4 textarea to fill the remaining space

I am facing an issue with my layout where I have 2 columns, one containing some inputs and the other only a textarea. The problem is that I want the textarea in the second column to extend and fill the remaining height of the first column, but so far I hav ...

htmlcssbootstrap-4heightmultiple-columns

Is there a way to determine whether my CSS style modifications will impact other web pages?

Managing a team of junior developers has its challenges, especially when they unknowingly make CSS style changes that impact multiple pages on our website. Is there a tool or method available to alert them that modifying the color of a specific class will ...

css

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

javascriptangularpowershellangular-cli

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Currently, I am utilizing a JavaScript code that connects to the web3 package on Ethereum's JSON RPC API. This code is designed to iterate through each transaction in an incoming block. If the transaction involves an internal wallet, it sends the rele ...

javascriptnode.jsgo-ethereum

Strategies for tracking distinct property values in Firestore

Is it possible to count the occurrences of unique values in Firestore? For instance, if there are 1000 documents with dates and only 50 different dates repeated, how can I get a list of each date along with its frequency? Context: These documents represe ...

javascriptreactjsexpressgoogle-cloud-firestore

Checking variable length time with JavaScript Regular Expression

My specific requirement is to validate a string ranging from 1 to 4 characters in length (where H stands for hour and M represents minutes): If the string has 1 character, it should be in the format of H (a digit between 0-9). A 2-character string should ...

javascriptregex

Is it feasible to combine border-radius with a gradient border-image?

I'm trying to style an input field with a rounded border using the border-radius property, and also add a gradient to that border. Despite successfully creating both the gradient and rounded corners separately, I am unable to make them work together. ...

csslinear-gradients

Switching from a right arrow to a down arrow using jQuery for a collapsible accordion feature

I have developed a unique type of toggle feature similar to an accordion design. When I click on the right-arrow next to an item, such as Area A, it expands to reveal the list of items within Area A. The arrow also changes orientation to point downwards (L ...

javascriptjqueryangularjs

Enhance the readability of your Angular/Ionic applications with proper hyphenation

In my Ionic 3 app, I am using an ion-grid. Some words do not fit within the columns and are cut off, continuing on the next row without any hyphens added for proper grammar context. See image https://i.stack.imgur.com/3Q9FX.png. This layout appears quite ...

javascriptangulartypescripthybrid-mobile-appionic3

sfWidgetFormChoice allowing for selection of more than one option

In my current project using Symfony 1.4, I am tasked with creating a CRUD application for a client. The specific requirement is to include a select field with multiple choices in order to generate newsletters and send emails. I have attempted to use the ...

phpsymfonyselect

AngularJS not passing date data to web API

Greetings! I am currently working on a web application using AngularJS. I have a date value in AngularJS, for example 13-10-2017. In C#, I have the following field: public DateTime LicenseExpiryDate { get; set; } When I send 13-10-2017 in an AJAX reques ...

javascriptc#angularjs

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

Click here for the image reference showing the 0ms potential saving message I'm having trouble with a warning in Google PageSpeed and I've tried everything. This is the code I'm using to define the font-family: @font-face { font-family: ...

htmlangularseofont-facepagespeed

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5