I have a page with this code:
<tr class="item" data-id="123" style="cursor: pointer;">
<td>
<div class="info">
<div class="title">Title 1</div>
<div class="description alpha">Description 1</div>
</div>
</td>
<td>
<div class="prices">
<div class="price">25</div>
</div>
</td>
</tr>
And a JQuery code like this:
$('.item').on('click', event => {
const i = $(event.currentTarget).data('id');
location.href = Util.buildUrl('order') + '&i=' + i;
});
I'd like to know how can I track this click on Google Tag Manager?
You have to use a Click - All Elements trigger choosing This trigger fires on Some Clicks adding Click Classes equals item.
Related
I'm new to most online code. (The page in question is written in cshtml) When a customer clicks a button on the item they want to purchase, I need a loading indicator (consistent with others) to start when button is clicked and end when downloading is complete. I am limited with what I can change since this program is humongous and updated by several of us in several locations. I have tried several different approaches to no avail. I even tried to make a new modal for the indicator, but I am way over my head here. I don't have any experience in Promise and that is what they are relying on here. Any help would be greatly appreciated. (Top section is button code, Bottom is indicator code)
<tbody data-bind="foreach: PurchaseItemsCAI">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Description"></td>
<td>
<button type="button" class="btn btn-default btn-xs" data-bind="click: function ApplyPurchase() {
$root.MakePurchase(Name, Id)
.then(function () {
$('#make-purchase-modal').modal('hide');
setTimeout(function () { $('.modal-backgroup').remove(); }, 500);
});
}">
Apply
</button>
</td>
</tr>
</tbody>
<div class="modal-body">
<div data-bind="ifnot: PurchaseModalLoaded">
<div style="text-align: center;">
Loading Purchasable Items . . .
</div>
<div class="sk-spinner sk-spinner-five-bounce">
<div class="sk-bounce1"></div>
<div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
<div class="sk-bounce4"></div>
<div class="sk-bounce5"></div>
</div>
</div>
</div>
In older asp.net pages you could tell the DataList to fill horizontally like this :
<asp:DataList ID="dl" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" RepeatColumns="2">
Starting from a Razor Page vertical fill :
#foreach (var x in Model.records)
{
<tr class="border text-center">
<td>#x.AccessDate</td>
<td>#x.AccessLocationName</td>
<td>
<img src="#x.imagepath" class="grow" />
</td>
</tr>
}
Is it possible to get a horizontal layout that is 2 wide before it starts next row, with a Razor page ?
Found a solution that works for my project in this thread :Display three columns per row in MVC cshtml
Letting Bootstrap automatically wrap the columns is working so far. As I wanted two records per row, I went with something similar to this :
<div class="row">
#foreach (var x in Model.scanrecords)
{
<div id="dataListItem" class="col-md-6 border border-dark rounded mx-auto">
<div class="">
<img src="#x.imagepath" class="grow" />
</div>
<div class="row">
<div class="col-md-12">
<label>Access Date: #x.AccessDate</label>
</div>
</div>
</div><!-- end col-md-6 -->
}
</div>
I'm trying to render the rows of a table where each row is my custom component <todo-list>, but the resulting rows get rendered outside of my table. Why is this?
Here's a screenshot of the DOM tree which shows what is happening:
My view:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<div id="appTest">
<div>#{{error}}</div>
<table class="table-responsive">
<todo-list
v-for="todo in todos"
v-bind:todo-obj="todo"
v-bind:key="todo.id"
:todo-obj.sync="todo"
v-on:usun="deleteTod"
></todo-list>
</table>
<div v-if="isLogged" id="todoText">
<textarea v-model="todoText" cols="53" rows="5"></textarea>
<div id="addButton">
<button v-on:click="addTodo" class="btn btn-success" >Add to do</button>
</div>
</div>
<div v-else>
You have to be
Login
to add new todos
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my component:
Vue.component('todoList', {
props: ['todoObj'],
template: '<tr>' +
'<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' +
'<td class="textTodo">{{todoObj.description}}</td>' +
'<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' +
'</tr>',
Also my checkboxes are not working. They look fine, but they don't toggle when I click them, they only react when checking the first row from the table. Why?
Your table might not be rendering correctly due to DOM Template Parsing Caveats. Try this instead:
<table class="table-responsive">
<tr
v-for="todo in todos"
is="todo-list"
:todo-obj="todo"
:key="todo.id"
#usun="deleteTod"
></tr>
</table>
Also you had the todoObj bound twice (I removed the .sync one in the above code).
As for the checkbox issue, I'm not completely sure on what the problem is, especially since you have not provided the code for the component (a fiddle would be great). Why do you have #toggle and v-model? Couldn't you just use v-model? You also forgot to v-bind to the checkbox's id attribute: id="todoObj.id" (is that necessary anyway?).
Example here: https://jsfiddle.net/vdLk2wzk/. click in the CLICK HERE button to see the situation in action. The dropdown menu should show above everything.
<div class="col-md-12">
<div class="panel-group" id="accordionGroups">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX">
<span class="panel-subtitle">TITLE</span>
</div>
<div id="XX" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsi">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span>
<ul class="dropdown-menu">
<li>XXXXX</li>
<li>YYYYY</li>
<li>ZZZZZ</li>
<li>PPPPP</li>
</ul>
</div>
</td>
<td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap applies overflow-x:hidden on .table-responsive, and once you have an overflow it will actually cut it in both direction to guarantee that the scrollbar is accessible. You could of course remove the overflow whatsoever like so:
.table-responsive {
overflow:visible !important;
}
But it will break the responsive design so with this table layout you are out of luck. On the other hand this table layout is terrible to use on mobile anyway, so I would suggest using one of the following instead: https://css-tricks.com/responsive-data-table-roundup/
Yes, Even i was having the same problem but using the jquery it got fixed, please have a look into the below snippet.
i have found this# http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/
so based on you id change accordingly its working for me.
jquery mouse enter and mouse leave, you can try like this, for me its working fine
//Function to display/hide scroll on mouseenter/mouseleave
$(‘.slds-button–icon-border-filled’).each(function() {
$(this).on(‘mouseenter’,function() {
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’);
//alert(“hello-mousenter”);
});
$(this).on(‘mouseleave’,function() {
// alert(“hello”);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’);
});
});
I have run into an interesting dilemma. I am trying to create a collapsible div to hold my data, and thus far it does not work. I thought it might be the jquery that is giving me my nightmare but after referencing it to google I still get the same problem. Once I click to collapse/expand. It does not do anything. Can you guys see anything wrong ?
<div class="panel-group" id="accordion" style="margin-top: 15px">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Complete Database Export</a>
<small style="margin-left: 10px">(click here)</small>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row" style="text-align: center; margin-top: 10px">
<asp:Label runat="server" CssClass="label">Complete Database Export</asp:Label>
<table style="width: 100%; margin-top: 10px">
<tr>
<td>
<p class="fg-color-grey">Enter the email addresses where the report will be sent to, seperated by commas:</p>
</td>
</tr>
<tr>
<td style="text-align: center">
<asp:TextBox ID="txtDumpEmails" runat="server" CssClass="genericTextBox widthOverride"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnDump" runat="server" Text="Generate Complete Database Export" CssClass="simpleButton marginOverride" OnClick="btnDatabaseDump_Click" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Is there anything I can try to check or that I have forgotten ?
Thanks in advance. I am really frustrated with this at the moment.
EDIT
I should also note that I do not get any errors in the web inspector console.
Ok, the code that you have will do the collapse/expand but it is on the link i.e.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Complete Database Export</a>
and not on the following code:
<small style="margin-left: 10px">(click here)</small>
Expanded screen shot
Collapsed screen shot
If by selecting the 'Complete Database Export' link it is not exanding/collapsing you need to check that all your bootstrap resource files are loading correctly.
I would guess at the js file being missing which you could test by referencing the cdn i.e.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>