I am getting success in the Ajax Call but after submission it is not hidding.

I tried .hide(); .modal(‘hide’);
Here is

    <div class="modal fade" id="addWorkModal" tabindex="-1" role="dialog" aria-labelledby="addWorkModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addWorkModalLabel">Add Work</h5>
                </div>
                <div class="modal-body">
                    <form id="create-work-form">
                        {% csrf_token %}
                        {{ work_form|crispy }}
                        <div class="form-group">
                            <label for="user-id">User ID:</label>
                            <input type="text" class="form-control" id="user-id" name="user" value="{{ client.user.id }}">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="save-work-button">Save Work</button>
                </div>
            </div>
        </div>
    </div>

<script>
document.getElementById('save-work-button').addEventListener('click', function() {
    var form = document.getElementById('create-work-form');
    var formData = new FormData(form);

    var url = "";
    console.log('URL being requested:', url);

    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log("AJAX call successful"); // Debugging
            if (response.work) {
                $('#addWorkModal').modal('hide');
            } else {
                // Handle errors from response
                var errorText = 'Error creating work: ' + JSON.stringify(response.errors || 'Unknown error');
                console.error(errorText);  // Log error to the console instead of alerting
            }
        },
        error: function(xhr, status, error) {
            var errorMsg = 'An error occurred. Status: ' + status + '. Error: ' + error;
            if(xhr.responseText) {
                errorMsg += '. Response: ' + xhr.responseText;
            }
            console.error(errorMsg);  // Log error to the console instead of alerting
        }
    });
});

My question after submitting the form how can I close or hide the modal as it is not suppose to appear after submission.

The unmodified default Google Search home page looks like this with the handy results count. If the Tools button is pressed, the Tools Bar saying “Any Time” appears like this – but it also removes the results count even though there’s room for both. My goal is to have the Tools button automatically pressed on loading the page (showing the “Any Time” drop down) AND still showing the “results count” all at once like this.

I think it should be possible because when the Tools button is pressed, I can force the page to temporarily display both the Results Count and Tools bar with the Firefox Inspector by editing

class="appbar hdtb-ab-o"

as shown here, to

class="appbar"

Shown here.

Searching for UserScript examples relevant to modifying a Class element, I found things like this but when I modified the example to target this class, the add/remove calls didn’t seem to do anything. Another hour of reading docs has me suspecting maybe the issue is due to the Google Search page being dynamic. Trying to adapt examples I found related to MutationObservers just yields syntax errors, probably because I’m still too inexperienced.

I’m a complete newbie regarding Javascript/CSS syntax and formatting although I have a fair bit of experience in old-school assembly language development. I’m learning this web stuff and having fun with UserScript but so far am only able to cut, paste, merge and modify other people’s working scripts. At this point, with nothing I’m trying even appearing to change anything, I feel like I’m just fumbling in the dark and unlikely to kludge or stumble my way forward by poking around. It all seemed pretty straightforward when I started. Just change that one line of code from class=”appbar hdtb-ab-o” to class=”appbar” and it’s done! I now realize how naive I was… 🙂

I use WSL on my laptop to code in C and Java and that works well, but for some reason it won’t run an HTML file. My PC has both linux and Windows and so I was working on a project there(HTML, CSS and JS) and want to now run it on WSL on my laptop. The code runs well in Linux so I don’t get why I keep getting this error for WSL. Here is the error:
Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol “chrome-error:”

I have bitdefender installed on my laptop so I thought it could be that but I turned off the antivirus and firewall and nothing changed. I also tried getting the live server extension but that didn’t work either. I have updated my windows(Windows 11 home). When I run it with just chrome it says ERR_FILE_NOT_FOUND and if I run it with the live server it says that it refused to connected. I tried just running an HTML file on its own and it also didn’t work. I’m not really sure what else I could try.
For info I am using WSL: Ubuntu-20.04,node v20.10.0 and vscode 1.85.1.

I’m an experienced backend programmer, although I’m new to React. I’m working on adding functionality to our system to track impressions of video thumbnails. It turns out that at my company, there is code which already exists to achieve this, but it is tightly-coupled with identifying DOM elements and CSS selectors (to track an impression of a specific image, for example).

I would love to integrate the code we already have to achieve my own goal, and I’m dealing with React components, functions and classes. I’ve done a ton of research already, and it looks as though to identify a React component as a DOM element, that component needs a “ref”.

My question is: suppose that one is starting a project from scratch. Is it advisable when writing React code to put refs on (almost) every component? I can’t find a clear answer to this from my research…the best I can find is “yes, if you will be manipulating those components as DOM elements at some point”. But, if you don’t know in advance if you will need to access those elements in the DOM, is it better to just add a ref from the start?

I’m asking this question because I’m concerned that if I want to integrate this code to track impressions which relies on DOM elements, then I may need to refactor some of our existing code to include refs, and I’m not sure if this is an anti-pattern in React terms (for instance, if I were to add refs to every component in our codebase…would that be inadvisable, or is that more common in the React paradigm?).

I’m trying to get a Typography component to properly truncate overflowing text with an ellipsis, but it does not work when it is nested inside an Alert component. Here is a sample snippet of what I have:

<MenuItem>
  <Alert style={{ width: 300 }}>
    <AlertTitle>
      <Typography variant="inherit" noWrap>
        Here is my text.
      </Typography>
    </AlertTitle>
  </Alert>
</MenuItem>

According to the documentation for MaterialUI v4 (which I am using), the noWrap attribute only works on block or inline elements. I’ve tried adding the attribute to the Alert, AlertTitle, and Typography components, but none seem to properly truncate the text. I could style the menu items to look like an Alert so that I don’t need to nest the Typography inside of the Alerts, but if possible I’d prefer to keep the structure above if possible.

Can I use chart.js to make this circle?

the new note button create a div with a

in it … with a delete icon .. when multiple notes are created . i cant just delete one note specifically . instead all the notes i created up was deleted … if anyoneone know how to fix that plz help me

here’s my HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-container">
        <div class="container-1">
            <h1>Make Notes</h1>
            <button class="create-notes-button">New Note</button>
            <div class="notes">
                
            </div>
            </div>
        </div>
    </div>

</body>
<script src="script.js"></script>
</html>

CSS

*{
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
html{
    background:linear-gradient(rgb(134, 50, 173) , rgb(151, 35, 137));
    height: 100%;
}
.main-container{
    margin: 20px 20px ;
}
.main-container  h1{
    color: white;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.main-container .create-notes-button{
    padding: 20px;
    margin: 20px 0px;
    border-radius: 40px;
    cursor: pointer;
}
.notes{
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-items: center;

    
}
.added-notes{
    background-color: white;
    padding: 20px;
    max-height:200px;
    height: 200px;
    margin: 10px;
    width: fit-content;
    height: fit-content;
}
#text-boxs{
    outline: 0px;
    resize: none;
    width: 500px;
    height: 150px;
    min-width: 300px;

}
.added-notes h4{
    
}
#delete-icon{
    height: 20px;
    margin-right: 0;
    margin-left: 5px;
    cursor: pointer;
    
}

JS code

const notes = document.querySelector(".notes")
const newNotesButton = document.querySelector(".create-notes-button")

newNotesButton.addEventListener('click',()=>{

    function deleteContent(){
        deleteIcon.parentNode.remove()
    }

    const addedNotes = document.createElement("div")
    addedNotes.className="added-notes"
    const textArea = document.createElement("textarea")
    textArea.id="text-boxs"
    const deleteIcon =document.createElement("img")
    deleteIcon.id="delete-icon"
    deleteIcon.src="delete-1487-svgrepo-com.svg"


    addedNotes.append(textArea)
    addedNotes.append(deleteIcon)
    notes.appendChild(addedNotes)

    console.log(textArea.innerText)


    const deleteButton = document.querySelector("#delete-icon")
    deleteButton.addEventListener('click',()=>{
       
        deleteContent();
    })

    
})

i need only one of that specific note to be deleted when i clicked on delete icon

I’m currently using the following script (with AlpineJS directives) tag to check for an ad blocker. However, regarding to user feedback, this sometimes results in a false positive. What could be the reason for this?

<script async @abort="ad.blocked = undefined" @error="ad.blocked = 'VisX'" :src="`https://s.visx.net/tag.js`"></script>

I have a brushed chart with two datasets with vastly different values. I am trying to change the max of the y-axis for both datasets. I am successful in doing so in the brush chart line, but not in the main chart.
Currently, the y-axis on the left corresponding to the price graph does not have a max value of 1, which is what I expected my code to do. It does however work on the brush chart line.

I am at loss at how to solve this issue.

See an example of my issue in the snippet below.

const pricedata = [{
    "x": 1697842800000,
    "y": 0.834
  },
  {
    "x": 1697929200000,
    "y": 0.835
  },
  {
    "x": 1698015600000,
    "y": 0.831
  },
  {
    "x": 1698102000000,
    "y": 0.821
  },
  {
    "x": 1698188400000,
    "y": 0.768
  },
  {
    "x": 1698274800000,
    "y": 0.751
  },
  {
    "x": 1698361200000,
    "y": 0.756
  },
  {
    "x": 1698447600000,
    "y": 0.766
  },
  {
    "x": 1698534000000,
    "y": 0.75
  },
  {
    "x": 1698624000000,
    "y": 0.751
  },
  {
    "x": 1698710400000,
    "y": 0.761
  },
  {
    "x": 1698796800000,
    "y": 0.722
  },
  {
    "x": 1698883200000,
    "y": 0.705
  },
  {
    "x": 1698969600000,
    "y": 0.72
  },
  {
    "x": 1699056000000,
    "y": 0.736
  },
  {
    "x": 1699142400000,
    "y": 0.739
  },
  {
    "x": 1699228800000,
    "y": 0.738
  },
  {
    "x": 1699315200000,
    "y": 0.747
  },
  {
    "x": 1699401600000,
    "y": 0.702
  },
  {
    "x": 1699488000000,
    "y": 0.701
  },
  {
    "x": 1699574400000,
    "y": 0.703
  },
  {
    "x": 1699660800000,
    "y": 0.685
  },
  {
    "x": 1699747200000,
    "y": 0.668
  },
  {
    "x": 1699833600000,
    "y": 0.657
  },
  {
    "x": 1699920000000,
    "y": 0.621
  },
  {
    "x": 1700006400000,
    "y": 0.556
  },
  {
    "x": 1700092800000,
    "y": 0.541
  },
  {
    "x": 1700179200000,
    "y": 0.564
  },
  {
    "x": 1700265600000,
    "y": 0.566
  },
  {
    "x": 1700352000000,
    "y": 0.558
  },
  {
    "x": 1700438400000,
    "y": 0.558
  },
  {
    "x": 1700524800000,
    "y": 0.556
  },
  {
    "x": 1700611200000,
    "y": 0.526
  },
  {
    "x": 1700697600000,
    "y": 0.515
  },
  {
    "x": 1700784000000,
    "y": 0.521
  },
  {
    "x": 1700870400000,
    "y": 0.529
  },
  {
    "x": 1700956800000,
    "y": 0.545
  },
  {
    "x": 1701043200000,
    "y": 0.537
  },
  {
    "x": 1701129600000,
    "y": 0.55
  },
  {
    "x": 1701216000000,
    "y": 0.569
  },
  {
    "x": 1701302400000,
    "y": 0.584
  },
  {
    "x": 1701388800000,
    "y": 0.608
  },
  {
    "x": 1701475200000,
    "y": 0.629
  },
  {
    "x": 1701561600000,
    "y": 0.669
  }];
            const saledata = [{
    "x": 1697842800000,
    "y": "147746"
  },
  {
    "x": 1697929200000,
    "y": "130250"
  },
  {
    "x": 1698015600000,
    "y": "104664"
  },
  {
    "x": 1698102000000,
    "y": "100406"
  },
  {
    "x": 1698188400000,
    "y": "151495"
  },
  {
    "x": 1698274800000,
    "y": "131127"
  },
  {
    "x": 1698361200000,
    "y": "133737"
  },
  {
    "x": 1698447600000,
    "y": "127386"
  },
  {
    "x": 1698534000000,
    "y": "113109"
  },
  {
    "x": 1698624000000,
    "y": "95932"
  },
  {
    "x": 1698710400000,
    "y": "99510"
  },
  {
    "x": 1698796800000,
    "y": "144000"
  },
  {
    "x": 1698883200000,
    "y": "119658"
  },
  {
    "x": 1698969600000,
    "y": "111486"
  },
  {
    "x": 1699056000000,
    "y": "108381"
  },
  {
    "x": 1699142400000,
    "y": "96228"
  },
  {
    "x": 1699228800000,
    "y": "74594"
  },
  {
    "x": 1699315200000,
    "y": "73836"
  },
  {
    "x": 1699401600000,
    "y": "118380"
  },
  {
    "x": 1699488000000,
    "y": "101331"
  },
  {
    "x": 1699574400000,
    "y": "100519"
  },
  {
    "x": 1699660800000,
    "y": "102802"
  },
  {
    "x": 1699747200000,
    "y": "88036"
  },
  {
    "x": 1699833600000,
    "y": "72038"
  },
  {
    "x": 1699920000000,
    "y": "80203"
  },
  {
    "x": 1700006400000,
    "y": "144604"
  },
  {
    "x": 1700092800000,
    "y": "101407"
  },
  {
    "x": 1700179200000,
    "y": "91762"
  },
  {
    "x": 1700265600000,
    "y": "96331"
  },
  {
    "x": 1700352000000,
    "y": "84467"
  },
  {
    "x": 1700438400000,
    "y": "66007"
  },
  {
    "x": 1700524800000,
    "y": "69887"
  },
  {
    "x": 1700611200000,
    "y": "138652"
  },
  {
    "x": 1700697600000,
    "y": "111720"
  },
  {
    "x": 1700784000000,
    "y": "108708"
  },
  {
    "x": 1700870400000,
    "y": "101870"
  },
  {
    "x": 1700956800000,
    "y": "99798"
  },
  {
    "x": 1701043200000,
    "y": "72229"
  },
  {
    "x": 1701129600000,
    "y": "71358"
  },
  {
    "x": 1701216000000,
    "y": "102909"
  },
  {
    "x": 1701302400000,
    "y": "87627"
  },
  {
    "x": 1701388800000,
    "y": "89769"
  },
  {
    "x": 1701475200000,
    "y": "93981"
  },
  {
    "x": 1701561600000,
    "y": "78223"
  }];

            var options = {
                series: [{
                name: 'Sold units',
                type: 'column',
                data: saledata
            }, {
                name: 'Price',
                type: 'line',
                data: pricedata
            }],
                chart: {
                id: "chart2",
                height: 350,
                type: 'line',
                toolbar: {
                        autoSelected: 'pan',
                        show: false
                    }
            },
            tooltip: {
                    theme: 'dark',
            },
            colors: [ "#333", '#F44336'],
                stroke: {
                    width: 3
                },
            dataLabels: {
                enabled: false
            },
            fill: {
                    opacity: 1,
                },
            markers: {
                size: 0,
                strokeColors: '000',
                strokeWidth: 1,
                hover: {
                    ssize: 4
                }
            },
            xaxis: {
                type: 'datetime',
                labels: {
                    style: {
                        colors: "#FFFFFF"
                    }
                }
            },
            yaxis: [{
                    tickAmount: 3,
                    opposite: true,
                    labels: {
                        style: {
                            colors: ["#FFFFFF"]
                        },
                        formatter: function(val, index) {
                            return val.toFixed(0);
                        },
                    },
                    max: 500000,
                  },
                  {
                    tickAmount: 3,
                    labels: {
                        style: {
                            colors: ["#FFFFFF"]
                        },
                        formatter: function(val, index) {
                            return "$" + val.toFixed(2);
                      },
                    },
                    max: 1,
                  }
                ],
            grid: {
                borderColor: "#333"
            }
            };

            var chart = new ApexCharts(document.querySelector("#chart"), options);
            chart.render();
        
            var optionsLine = {
                series: [{
                name: 'Sold units',
                type: 'column',
                data: saledata
            }, {
                name: 'Price',
                type: 'line',
                data: pricedata
            }],
            chart: {
                id: 'chart1',
                height: 200,
                type: 'area',
                brush:{
                    target: 'chart2',
                    enabled: true
                },
                selection: {
                    enabled: true,
                    xaxis: {
                        min: new Date('25 Oct 2023').getTime(),
                        max: new Date('30 Oct 2023').getTime()
                    },
                    fill: {
                        color: '#F44336'
                    }
                },
            },
            colors: ['#FFFFFF','#FFFFFF'],
            xaxis: {
                type: 'datetime',
                tooltip: {
                enabled: true
                },
                labels: {
                style: {
                    colors: "#FFFFFF"
                }
                }
            },
            yaxis: [{
                opposite: true,
                labels: {
                style: {
                    colors: "#ffffff"
                },
                formatter: function(val, index) {
                            return val.toFixed(0);
                        },
                },
                max: 500000,
            },
            {   
                labels: {
                style: {
                    colors: "#ffffff"
                },
                formatter: function(val, index) {
                            return "$" + val.toFixed(2);
                        },
                },
                max: 1,                
            }
            ],
            grid: {
                show: false  // Hide horizontal grid lines
            }
            };

            var chartLine = new ApexCharts(document.querySelector("#chartline"), optionsLine);
            chartLine.render();

body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #1c1c1c;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <title>Document</title>
</head>
<body>
    <div id="chart"></div>
    <div id="chartline"></div>
</body>
</html>

Recently I have been learning JavaScript in the form of attempting to create a little game and would like to use a A* pathfinding algorithm that I have codded in python for it. Would it be possible to input two arguments and return what is returned from the pathfinding algorithm.

I’ve attempted to use python shell and the child process but any articles I have found on them seem to be out of date. Any help would be appreciated.

I have a string that i need to wrapped using Yii tag like Yii::t('app' , 'what_string') because i need this to translate per string in other page. but here, there is a word that place on alphineJs and i cant to wrap it using php Yii::t('app' , .. anyone can help me how to wrap something like this?

my code in alphine:

get articleCount() {
        if (this.blog.articles.length === this.blogArticle.length) return `${this.blog.articles.length <?=Yii::t('app', 'Article(s)')?> `
          return `${this.course.topics.length} Article(s), ${this.blogArticle.length} Filtered`
},

here i want to wrap ‘Article(s)’ so i just added but it doesn’t works here

I followed a tutorial for a basic JavaScript project (https://www.youtube.com/watch?v=oaliV2Dp7WQ&list=PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm) and I dont get any errors but my code still does not work like in the video. Is it the code that does not work or is it the api key that I used or is it something else? I’m confused

project:
codepen.io/num_/pen/zYbrNqp

When I enter a key word in the bar pictures should appear but in my project nothing happens.

I have problem with transition. I work with react + tailwindcss.
On screen MD and higher it work perfectly when content is flex row, but on small screen with flex-col, it does not work and I am now in a state of dispair.

full transition code is in class :

        className={`overflow-hidden transition-all duration-1000 ${
          isQuestOpen
            ? `h-[${options.current.getBoundingClientRect().height}px]`
            : "h-0"
        }`}

/* eslint-disable react/prop-types */
import { useState, useRef } from "react"

const Questions = ({
  question,
  option1,
  option2,
  option3,
  describe1,
  describe2,
  describe3,
}) => {
  const [isQuestOpen, setIsQuestOpen] = useState(false)
  const options = useRef(null)

  return (
    <div className="mb-24 last:mb-0 w-full">
      <div
        className="mb-8 flex items-center justify-between"
        onClick={() => setIsQuestOpen(!isQuestOpen)}
      >
        <h3 className="text-grey font-frauncesBlack font-black text-2xl leading-7 pr-2 md:text-[32px] md:leading-[48px] lg:text-[40px]">
          {question}
        </h3>
        <svg
          width="24"
          height="14"
          xmlns="http://www.w3.org/2000/svg"
          className={`duration-700 lg:cursor-pointer ${
            isQuestOpen ? "rotate-180" : ""
          }`}
        >
          <path
            d="M15.949.586l2.828 2.828-9.096 9.096L.586 3.414 3.414.586l6.267 6.267z"
            fill="#0E8784"
            fillRule="nonzero"
          />
        </svg>
      </div>

      <div
        className={`overflow-hidden transition-all duration-1000 ${
          isQuestOpen
            ? `h-[${options.current.getBoundingClientRect().height}px]`
            : "h-0"
        }`}
      >
        <div
          className="flex flex-col items-start gap-y-4 text-darkGreyBlue md:flex-row md:gap-x-[10px]"
          ref={options}
        >
          <div className="w-full min-h-[136px]  md:min-h-[232px] p-6 bg-[#F4F1EB] rounded-lg ">
            <h4 className="font-frauncesBlack  text-2xl font-black mb-2 md:mb-6">
              {option1}
            </h4>
            <p className="font-barlow leading-6">{describe1}</p>
          </div>

          <div className="w-full min-h-[136px] md:min-h-[232px] p-6 bg-[#F4F1EB] rounded-lg ">
            <h4 className="font-frauncesBlack  text-2xl font-black mb-2 md:mb-6">
              {option2}
            </h4>
            <p className="font-barlow leading-6">{describe2}</p>
          </div>

          <div className="w-full min-h-[136px] md:min-h-[232px] p-6 bg-[#F4F1EB] rounded-lg ">
            <h4 className="font-frauncesBlack  text-2xl font-black mb-2 md:mb-6">
              {option3}
            </h4>
            <p className="font-barlow leading-6">{describe3}</p>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Questions

I have set up a small program to test shallowRef.

The manual
/*
const state = shallowRef({ count: 1 })
// does NOT trigger change
state.value.count = 2
// does trigger change
state.value = { count: 2 }
*/

<script setup>
import { shallowRef } from 'vue';

let value = 0;
const shallowState = shallowRef({count: value});
</script>

The manual says that the first should update. But only the second updates. Why?

<template>
  <button @click="shallowState.value = {count: ++value}">shallowRef {{ shallowState.count }}</button>
  <br><br>
  <button @click="shallowState = {count: ++value}">shallowRef {{ shallowState.count }}</button>
</template>

I’m facing a bit of a challenge with Tailwind CSS and these two plugins in my project. Here’s the scoop – one plugin is working fine, but the other and its components are giving me trouble. Any suggestions on how to untangle this and make them all cooperate?

I’m using Tailwind CSS, Preline UI, and Daisy UI plugins, integrating their components into my HTML somewhat randomly. However, there’s a hitch: only the components from the last plugin I installed are behaving. While Tailwind CSS is styling things up, its JavaScript is not kicking in. On top of that, the JavaScript and CSS from the other plugin aren’t doing their job. Any tips on sorting this out and getting everything to work as intended would be greatly appreciated!