Starting a div programmatically and then running into trouble when trying to close it, an error was encountered with an end tag for "div" without a corresponding start tag

I am looking to create the following HTML structure:

<div id="my-grid" class="isotope">
   <div class="myProject-item">....</div>
   <div class="myProject-item">....</div>
   <div class="myProject-item">....</div>
   <div class="myProject-item">....</div>
</div>

Essentially, every 4th row (out of more than 200 rows) with a class of myProject-item should be wrapped in 

<div id="my-grid" class="isotope">

This is what I have tried:

@{
    var counter = 0;
    for (int i = 1; i < 200; i++)
    {
        counter++;
        if (counter % 4 == 0)
        {
          <text><div id="my-grid" class="isotope"></text>
        }
         <div class="myProject-item">....</div>
        if (counter % 4 == 0)
        {
           </div> // ***** on this line render breaks ******    
        }      
    }
}

Parser Error Message: Encountered end tag "div" with no matching start tag. Are your start/end tags properly balanced?

jqueryhtmlcssasp.net-mvcrazor

Answer №1

It is important to mention that the closing tag </div> represents a content block.

        if (counter % 4 == 0)
        {
           <text></div> </text>
        }

An alternative method is to use the @: sequence, which signals that the succeeding line of content should be considered as a content block.

@{
    var counter = 0;
    for (int i = 1; i < 200; i++)
    {
        counter++;
        if (counter % 4 == 0)
        {
          @:<div id="my-grid" class="isotope">
        }
         <div class="myProject-item">....</div>
        if (counter % 4 == 0)
        {
           @:</div> 
        }      
    }
}

Answer №2

Make sure to move your initial <div> tag outside of the <text></text> in order for it to function correctly.

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

Utilizing REACT to dynamically load multiple HTML elements

Recently, I began developing with React and wanted to load multiple new Input Fields and Labels in a Form using Hooks. However, when clicking the button, only one input field is created using the last value of my array. Upon checking the console, I notic ...

htmlreactjs

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

htmlcsscss-selectors

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

jquerycssgsp

What steps can be taken to resolve the delay in transition when clicking on "read less

I implemented a transition effect for the Read More and Read Less buttons, however, there seems to be a delay on the transition when clicking on the Read Less button. This delay was not intentionally set by me. How can I resolve this issue and also apply a ...

javascriptcssreactjs

Changing the Title of UI Tabs

I am facing an issue with setting the title in tabs, as the title is appearing behind the background. If I set background: transparent; in the #tabss .ui-tabs-nav class, then my title shows up properly. Otherwise, it gets displayed behind the background. ...

jqueryhtmlcsstabsjquery-ui-tabs

Exploring the differences between Material-UI's makeStyles and withStyles when it comes to

One thing I've observed is that the naming convention for classes created with makeStyles and hooks looks like this: https://i.stack.imgur.com/HcDUc.jpg On the other hand, classes produced using withStyles and higher order components (HOC) follow a ...

htmlreactjsreact-hooksmaterial-uihigh-order-component

Using JQuery to send an array to PHP and save it to a file

I am currently working on a project where I write test code that posts an array to a PHP page. The PHP page needs to write this array to a file in order to check the data. Here is the JQuery code snippet: $("#Trash").click(function () { $.post("tests ...

phpjquery

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

javascripthtmlcssarraysjson

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

I have a Bootstrap tour set up with code that is meant to capture the user pressing the end tour button and scroll them back to the top of the screen. However, currently the code runs when a new popover loads instead of when the end tour button is clicke ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-tour

What is the best method for eliminating tags from an HTML tag attribute using PHP?

I have a substantial amount of posts created using an old CMS. The content is in HTML markup, but unfortunately it's quite messy. It includes constructs like: ....<IMG alt="Хит сезона - <b>Лучшие фразы...</b>" src=" ...

phphtmlregexpreg-replace

Provide a blade template in response to an ajax request completion

I have a question about developing a platform using Laravel and Ajax. I want to load a Blade template after a successful Ajax request. How can I achieve this? Controller public function store(Request $request) { $equipo = new Equipo(); $equipo->id ...

phpjqueryajaxlaravellaravel-blade

Invoke two functions simultaneously on a single Onchange event

Can someone help me understand how to trigger two functions by changing the value of a specific dropdown list using the "OnChange" event in Ajax? Note: The system typically only displays the output of the showhistory() function. Here is my existing code: ...

javascriptphpjqueryajax

Harness the power of Highcharts through an Ajax request to retrieve a JSON file

I am having an issue using Highcharts with a JSON file from an external server. When I try to bind the returning file to the chart in my ASP.NET MVC application, it doesn't work. Here is the code I have attempted: http://jsfiddle.net/Q6ngj/2/ jQuery ...

javascriptjqueryajaxjsonhighcharts

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

htmlcsscss-transitions

Generate and store text inputted from contenteditable

As I embark on creating my own custom rich text editor, I have a couple of questions regarding its functionality. First and foremost, is it possible to prepopulate the text area with content? Additionally, I'm seeking guidance on how to save and utili ...

javascriptjqueryiframedesignmode

Learn how to showcase video information in a vue.js template

I am having difficulty displaying a saved media (video) file on another page after collecting it using the ckeditor5 media option. The data is stored along with HTML tags generated by ckeditor, so I'm using v-html to display other content like <p&g ...

javascripthtmlvue.jsckeditor

Using jQuery's .load() method to load a PHP file can result in an exponential increase in XHR finished loading time with each subsequent load

There seems to be an issue with my code using .load() to load a PHP page into a div whenever the navbar or link is clicked. After multiple clicks, I noticed that the "XHR finished loading" increases exponentially and it appears that the same PHP file is be ...

javascriptphpjqueryhtmlperformance

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

Execute javascript whenever the page is being loaded

Within my web application, I've implemented a modal popup with a loading bar to appear during any lengthy commands such as button clicks. While this feature is functioning well, there's an issue with the performance of the in-house web server it& ...

javascriptc#jqueryasp.nettwitter-bootstrap

Using the URL parameter in a jQuery AJAX request

When I try to make an ajax call from a modal window, the request URL doesn't seem to be correct. My webserver is set up to accept URLs like http://localhost/search, but not file:///search. How can I fix this issue? I have posted more details about wh ...

jqueryajax