Output var value inside html string

multichild · July 2, 2018, 11:02am

I have this code below and a div asigned to var selectedRowContent, but I dont know how to get that var to appear inside the after brackets inside the td element

$('#js_btnExpandCollapseCategory@(Model.ID)')
.button()
.click(function () {

var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');

$('#tableRowCategory2').after('<tr id="2" style="height:40px"><td colspan="3">selectedRowContent</td ></tr > ');
});

m_hutley · July 2, 2018, 11:07am

concatenate the variable with the string.

'<tr id="2" style="height:40px"><td colspan="3">selectedRowContent</td ></tr >'

=>

'<tr id="2" style="height:40px"><td colspan="3">'+selectedRowContent+'</td ></tr >'

Though you probably want some aspect of said variable… .html() or .value() or… whatever applicable pieceof the variable you’re trying to put in there.

multichild · July 2, 2018, 11:09am

Ah yes, I went code blind then.

Shame its out putting as [object Object]

This is that var value

<div id="js_TableRowCategory@(Model.ID)" style="display:none">

    <!-- #region tblSection -->

    <table id="tblSection" class="tablesorter-bootstrap" style="table-layout: fixed;">
        <thead>
            <tr>
                <th>
                    <p class="text title textSizeStandard alignCenter">Number</p>
                </th>

                <th>
                    <p class="text title textSizeStandard alignCenter">Section</p>
                </th>

                <th>
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var section in Model.Sections)
            {
                <tr id="tableRowSection@(section.ID)">
                    @Html.Partial("~/Views/Questionnaire/_QuestionnaireSection.cshtml", section, new ViewDataDictionary { { "recordID", ViewData["recordID"] } })
                </tr>
            }
        </tbody>
    </table>

    <!-- #endregion -->

</div>

m_hutley · July 2, 2018, 11:10am

and you want to output… what, exactly?

multichild · July 2, 2018, 11:11am

That whole div, I posted it after I originally replied sorry

m_hutley · July 2, 2018, 11:19am

selectedRowContent.html() will give you the contents of the div.

multichild · July 2, 2018, 11:24am

That’s perfect, thank you very much…

multichild · July 2, 2018, 11:47am

me again, its off topic but its the same code, but wondered if you could help me with the button click function.

I want to use that button to open that div, but then the same button to delete the tr row I created, basically to close it up.

Whats the best way to do this.

This below.

<td><button id="js_btnExpandCollapseCategory@(Model.ID)" class="text textSizeStandard">+</button>


$('#js_btnExpandCollapseCategory@(Model.ID)')
.button()
.click(function () {
var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');

$('#tableRowCategory@(Model.ID)').after('<tr style="height:auto"><td colspan="3">'+selectedRowContent.html()+'</td></tr> ');
});

m_hutley · July 2, 2018, 11:49am

I don’t understand what you mean by ‘open that div’, or ‘tr row i created’. You’re trying to… delete the thing you just added? Why not just…not add it in the first place? Give me an example of what you start with, and what you want to end with.

multichild · July 2, 2018, 11:54am

Ok this is my thinking.

what happens when you first click the button, is that I create that new tr row and populate the td row inside it with the div.

But what I need to then happen, is if they click the same button (+), it then hides that row that I created so in effect like an accordion.

Not right, but something like this

    $(document).ready(function () {

        // #region btnExpandCollapse

        var button@(Model.ID) = false;

        if (button@(Model.ID) == false) {
            $('#js_btnExpandCollapseCategory@(Model.ID)')
                .button()
                .click(function () {
                    var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');

                    $('#tableRowCategory@(Model.ID)').after('<tr style="height:auto"><td colspan="3">' + selectedRowContent.html() + '</td></tr> ');
                    var button@(Model.ID) = true;
                });
        } else {
            $('#js_btnExpandCollapseCategory@(Model.ID)')
                .button()
                .click(function () {
                    var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');

                    "In here i delete that tr row I created."

                    var button@(Model.ID) = false;
                });
        }

m_hutley · July 2, 2018, 12:16pm

instead of creating and deleting it constantly, why not just toggle it.

multichild · July 2, 2018, 12:18pm

Ye that would do it, think my way is huge overkill.

Could you help me get that working.

m_hutley · July 2, 2018, 12:23pm

Construct the row(s) and button in-situ, and show me the resulting HTML, and we can target properly.

multichild · July 2, 2018, 12:55pm

OK I’ve just looked at the code and its huge, so I’m wondering if my attempt below will allow us to get there, if not then just say.

<td><button id="js_btnExpandCollapseCategory@(Model.ID)" class="text textSizeStandard">+</button>

$('#js_btnExpandCollapseCategory@(Model.ID)')
.button()
.click(function (toggleFunction) {
});


function toggleFunction() {
var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');
var x = $('#tableRowCategory@(Model.ID)').after('<tr style="height:auto"><td colspan="3">' + selectedRowContent.html() + '</td></tr>');
if (x.style.display === "none") {
x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

And this is the div that gets displayed

<div id="js_TableRowCategory@(Model.ID)" style="display:none">

    <!-- #region tblSection -->

    <table id="tblSection" class="tablesorter-bootstrap" style="table-layout: fixed;">
        <thead>
            <tr>
                <th>
                    <p class="text title textSizeStandard alignCenter">Number</p>
                </th>

                <th>
                    <p class="text title textSizeStandard alignCenter">Section</p>
                </th>

                <th>
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var section in Model.Sections)
            {
                <tr id="tableRowSection@(section.ID)">
                    @Html.Partial("~/Views/Questionnaire/_QuestionnaireSection.cshtml", section, new ViewDataDictionary { { "recordID", ViewData["recordID"] } })
                </tr>
            }
        </tbody>
    </table>

    <!-- #endregion -->

</div>

m_hutley · July 2, 2018, 1:21pm

So i’m going to try and extrapolate a bit from what you’ve shown me.

When ‘expanded’, the code looks something like…

<tr id="js_TableRowCategory1"><td>SomeTDHere</td><td>SomeOtherTDHere</td><td><button id="js_btnExpandCollapseCategory1" class="text textSizeStandard">+</button></td></tr>
<tr style="height:auto"><td colspan="3">
    <table id="tblSection" class="tablesorter-bootstrap" style="table-layout: fixed;">
        <thead>
            <tr>
                <th>
                    <p class="text title textSizeStandard alignCenter">Number</p>
                </th>

                <th>
                    <p class="text title textSizeStandard alignCenter">Section</p>
                </th>

                <th>
                </th>
            </tr>
        </thead>
        <tbody>
            //This bit gets replaced/repeated a bunch of times.
            @foreach (var section in Model.Sections)
            {
                <tr id="tableRowSection@(section.ID)">
                    @Html.Partial("~/Views/Questionnaire/_QuestionnaireSection.cshtml", section, new ViewDataDictionary { { "recordID", ViewData["recordID"] } })
                </tr>
            }
        </tbody>
    </table>
</td>
</tr>
</table>

Yes?
If so, then the toggle code is as follows:

$('.js_btnExpandCollapseCategory')
.button()
.click(function () {
  $(this).parent().parent().next().toggle();
  $(this).html(($(this).html() == "+") ? "-" : "+");
});

So what does it do?
$(this) refers to the button.
.parent() refers to the TD the button is in.
.parent() (again) refers to the TR the TD is in.
.next() moves to the next sibling (the TR below the button)
.toggle() hides or shows said row, depending on its current state.

The second line toggles the button’s content from + to - and back again.

Additional steps:

Make the buttons classed “js_btnExpandCollapseCategory”, with no ID (unless otherwise required).
Unless required by other code, Remove the ID from TableRowCategory entirely, and instead insert the rows naturally. We don’t need it anymore, because we just tell the buttons “whatever your next row is, hide/show that.” rather than doing it by ID and adding/deleting things.
Default the data rows to hidden.

multichild · July 2, 2018, 3:06pm

I got you, and I don’t think it will work out in this case, as the tables aren’t structured like you have it.

This is my bit of an huge project so Im working with what I have and below is probably closer what Im going to have to work with.

var click = false;
$('#js_btnExpandCollapseCategory@(Model.ID)')
.button()
.click(function () {
if (click == false) {
    document.getElementById("js_btnExpandCollapseCategory@(Model.ID)").innerHTML = "-";
    var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');
    $('#tableRowCategory@(Model.ID)').after('<tr style="height:auto"><td colspan="3">' + selectedRowContent.html() + '</td></tr>');
   click = true;
} else {
    document.getElementById("js_btnExpandCollapseCategory@(Model.ID)").innerHTML = "+";
   click = false;
}
});

Thanks for coming back to me though, I really am appreciating it.

I think I’ll have to do the create the ‘tr’ and delete ‘tr’ where I was at the start, cant see it working otherwise, nightmare.

Not even sure how to delete the ‘tr’ I created now to even try that

Something like this, but its then deleting itself rather than the child ‘tr’ I created

.button()
.click(function () {
if (click == false) {
document.getElementById("js_btnExpandCollapseCategory@(Model.ID)").innerHTML = "-";
var selectedRowContent = $('#js_TableRowCategory@(Model.ID)');
$('#tableRowCategory@(Model.ID)').after('<tr style="height:auto"><td colspan="3">' + selectedRowContent.html() + '</td></tr>');
click = true;
} else {
document.getElementById("js_btnExpandCollapseCategory@(Model.ID)").innerHTML = "+";
$('#tableRowCategory@(Model.ID):first-child').hide();
click = false;
}
});

Used this too, but it just ends up removing the #tableRowCategory@(Model.ID) rather than the child ‘tr’ I created

$('#tableRowCategory@(Model.ID)').closest('tr').remove();

Then tried and still it doesnt delete the next tr lol, I give up, off to bed!

$('#tableRowCategory@(Model.ID)').parent('tr').next('tr').hide();

multichild · July 3, 2018, 8:04am

I was sort of on the right track, and found that this worked.

$('#tableRowCategory@(Model.ID)').next('tr').hide();

system · October 2, 2018, 3:04pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Variable inside jQuery output code with HTML JavaScript	4	4754	October 8, 2014
Newbie needs help inserting html into a js string JavaScript	11	1358	September 3, 2022
How to print the value of my variable dynamically JavaScript	4	908	October 8, 2014
Problem when you add a variable inside a variable JavaScript	3	456	September 21, 2010
Jquery var used in php string JavaScript	5	2261	November 27, 2014

Output var value inside html string

Related topics