I am trying to make a custom widget that creates tabs .But the problem Im facing is ,I have a click event defined on clicking on one of the tabs but I am unable to access the attributes associated with that tab element (like myid="summarytab")
Here is a code snippet for the same
jquery.tabs.js
$.widget('ui.tabs', {
options: {
},
_create: function() {
alert('attaching')
var me = this
me._on('td', {
click: "_selectedTab"
})
},
_selectedTab: function(el) {
alert("coming" + el.attr('goto'))
},
_destroy: function() {
}
});
jstChking.html
<table id="tabs-container" goto="summary">
<tbody>
<tr class="a-detail-menu">
<td myid="summary" goto="summary" class="selected">
<i class="fa fa-bank deco"></i>
Summary
</td>
<td goto="applicability" myid="applicabilityTab" >
<i class="fa fa-tags deco"></i>
Applicability
</td>
<td goto="assessments" myid="assessmentTab">
<i class="fa fa-check-circle-o deco"></i>
Assessments
</td>
<td class="ignore"></td><td class="ignore"></td>
</tr>
</tbody>
</table>
<div class="a-section summary" >
<h2>HTML Markup for these tabs</h2>
content1
</div>
<div class="a-section applicability" style="display:none">
<h2>JS for these tabs</h2>
content2
</div>
<div class="a-section assessments" style="display:none">
<h2>CSS Styles for these tabs</h2>
content3
</div>
The idea is to hide all tabs and show the one that is clicked.I am trying to do that in jquery using the goto="xyz" and and show only that div. Now when i m trying to make in widget then i m not getting the attribute.Also if u have any suggestions ,that would be welcome.
Thanks in advance
Related
Im trying to use jquery to manipulate elements created by angular, but I am not able to get it to work. I was wondering if anyone could help me out. Thanks
Here is the HTML
<div class="patients">
<tbody ng-repeat="patient in patients">
<tr>
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<div class="sendreminder">
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style=" background-color: #00e699; border-color:#00e699; " ng-click="post($index) " "$parent.selected = $index" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
</div>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">
</a>
</td>
</tr>
</tbody>
</div>
Here is the jquery
$(function() {
$('.patients').on('click', ".sendreminder",function(e){
alert('worked');
});
});
ng-repeat recreates DOM everytime it detects changes(and hence, all the attached events will be gone). So to reattach the events after ng-repeat finishes, you can do
<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">
$last will be set to true if its the last item for ng-repeat
and in you controller, create ngRepeatFinish() function
$scope.ngRepeatFinish = function(){
$('.sendreminder').click(function(e){
alert('worked');
});
}
you can also make custom directives for this which is better than this, but this will suffice for a quick solution.
See this for a solution with custom directives
You should call that code immediately after you dynamically create the new element since that code sets the handler for the actual elements (when you call the function) that have class .patients, not the new ones...
i recommend you to use Angular instead of Jquery
added both methods below
//using Jquery
$('.patients').on('click', ".sendreminder", function(e) {
alert('from JQuery');
});
function TestCtrl($scope) {
$scope.patients = [{
name: 'one',
number: 1,
date: '2016-08-16',
reminded: true
}, {
name: 'two',
number: 2,
date: '2016-08-16',
reminded: true
}, {
name: 'three',
number: 3,
date: '2016-08-16',
reminded: false
}];
//using angular
$scope.post = function(i) {
alert('from Angular');
var selectedPatient = $scope.patients[i];
console.log(selectedPatient);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
<div class="patients" ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Date</th>
<th>Reminded</th>
<th>Request</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="patient in patients">
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style="background-color: #00e699; border-color:#00e699;" ng-click="post($index)" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">test
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'm using datatable editor with inTableControl buttons. The inTableControl buttons work fine when the table is in normal status, but in combination with responsive and if the inTableControl buttons are in the child tr (when collapsed in the dropdown), the sample js is not working. There are no records to edit in the modal. Does anyone know how to adjust the js for the inTableControl buttons for them also to work when in the child tr? I tried a couple of things like .parent().prev('parent') , .closest('tr.child').prev('tr.parent'), .closest('tr').prev('tr') , .parent().prev('tr') .... but none of them work. And do I need an if for both status? How would that look like?
This works fine ...
var edit_inTable_editor_bafin = $('#bafin').on('click', 'a.editor_cog', function (e) {
e.preventDefault();
editor_bafin.edit( $(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
} );
} );
<tr id="row_2812" class="odd selected parent" role="row">
<td>Test</td>
<td class=" datatable-link" style="">
<a class="editor_cog" title="Edit Entity" role="button" href="">
</td>
</tr>
... but when the inTableControl buttons are in child tr (dropdown of responsive):
<tr id="row_2812" class="odd selected parent" role="row">
<tr class="child">
<td class="child" colspan="15">
<ul data-dtr-index="0">
<li data-dtr-index="11">...</li>
<li data-dtr-index="12">...</li>
<li data-dtr-index="13">...</li>
<span class="dtr-title"></span>
<span class="dtr-data">
<a class="editor_cog" title="Edit Entity" role="button" href="">Edit</a>
</span>
</li>
</ul>
</td>
</tr>
...
I have a similar problem. But I solved it this way
$('#tb_sos tbody').on( 'click', 'input.aja', function () {
var tr=$(this).parents('tr');
if ($(tr).hasClass("child")){
var api = tablaSOS.tabla.row( $(this).parents('tr').prev('tr') ).data();
}else{
var api = tablaSOS.tabla.row( $(this).parents('tr') ).data();
}
console.log(api);
} );
Say I have a table:
<table class="table table-bordered table-hover employes_list_panel">
<thead>
<tr>
<th></th>
<th></th>
<th class="center">Name <i class="fa fa-angle-double-down"></i></th>
<th class="center">IQ <i class="fa fa-angle-double-down"></i></th>
<th class="center">Efficiency <i class="fa fa-angle-double-down"></i></th>
<th class="center">Focus <i class="fa fa-angle-double-down"></i></th>
<th class="center">Happiness <i class="fa fa-angle-double-down"></i></th>
<th class="center">Quality <i class="fa fa-angle-double-down"></i></th>
<th class="center">Salery <i class="fa fa-angle-double-down"></i></th>
</tr>
</thead>
<tbody>
<%Employe.where(company_id: company.id, request: false).each do |employe|%>
<tr>
<td class="center cd-popup-trigger" id="popup3"><i style="color: red;" class="fa fa-close"></i></td>
<td class="center cd-popup-trigger" id="popup4"><i style="color: green;" class="fa fa-arrow-up"></i></td>
<td class="center"><%=employe.name%></td>
<td class="center"><%=employe.iq%></td>
<td class="center"><%=employe.efficiency%></td>
<td class="center"><%=employe.focus%></td>
<td class="center"><%=employe.happiness%></td>
<td class="center"><%=employe.quality.capitalize%></td>
<td class="center"><%=employe.salery%></td>
</tr>
<%end%>
</tbody>
</table>
And I want to get the value of the employe name <%=employe.name%> when popup3 for example is clicked. Note there can be more than one "employe" in the list. How can I get the value of the employe that is on the line where the user clicked the popup, so that I can prepend it using jQuery into the popup <p>.
Ex:
Click to Open Popup | Kevin |...
Click to Open Popup | Sam |...
I need to get the value Sam when I click the "second popup", the
problem is all popups currently have the same id.
Thank you.
Given your code, popup3 (and popup4 for that matter) is gonna be present multiple times on the page (once per tr). You need to give it a class, not an id. I personally like to prefix my JavaScript classes (not used for styling) with js-. In your HTML:
<td class="center cd-popup-trigger js-popup3"><i style="color: red;" class="fa fa-close"></i></td>
You also need to identify the cells which contain the employee name (you'll see why later).
<td class="center js-employee-name"><%= employe.name %></td>
In your JS code, you first need to select the all the td with the js-popup3 class:
$('js-popup3')
Then, you want to trigger something when an event occurs on the element you selected. With jQuery, you would do it like this:
$('js-popup3').on('click', function() {});
Lastly, you want to describe what should be done when the event occurs. This is done in the callback function.
$('.js-popup3').on('click', function() {
# employeeName is the value you want
employeeName = $(this).siblings('.js-employee-name').text();
});
I invite you to read a lot about JS (try to code without jQuery first). Once you feel confident with it, start looking at jQuery.
You can create a click function for the Table tr's and get the value of the third column (index 2):
$('table.reference.notranslate tbody').delegate("tr", "click", function(){
var YourEmployeName = $(this).find('td').eq(2).text();
alert(YourEmployeName);
});
To make the popups ahve unique id's according to employee try something like this:
">
Then I presume you have some js somewhere to handle the popup clicks. This js can extract the employee id with
emp_id = my_clicked_popup_trigger.attr("id").split('-')[-1]
So I have the following view in MVC4:
#model ViewModel
#section Sidebar
{
<ul style="margin-left:-20px">
...
<li>
#Html.ActionLink(#menuItem.Name, #menuItem.ActionName, #menuItem.ControllerName, #Model, new { id = #menuItem.Name + "MenuItemId", style = "font-weight: bold;", #class = "loading" })
</li>
...
</ul>
}
#using (Html.BeginForm())
{
<article class="widget widgetFullPage" data-role="collapsible" data-collapsed="true">
<h2 id="Details">GENERAL INFORMATION</h2>
<table>
<tr id="Row1" style="background-color: #FFFFFF;">
<td id="VarOneId" style="padding-bottom: 10px; padding-top: 20px; width: 300px">
#Html.TextBoxFor(x => x.VarOne, null, new { style = "width:100px;" })
</td>
</tr>
...
...
...
<tr id="RowX">
<td>
<input value=" " class="nextbutton loading" type="submit" id="NextButton" />
</td>
</tr>
</table>
</article>
}
The Submit button in the form works just fine, but I also want to pass the updated model (whatever the user has already typed) through the Html.ActionLink to a different controller in the Sidebar section above, when the user clicks on the sidebar link instead of the submit button.
What I have seems to only pass back the Model with data that's initially passed into the View, not the updated values from the page. What would I need to do to get the updated model and pass that back through the ActionLink?
I work on a node.js app and I have a list of n elements in an ejs view.
It contains filters, pagination, ...
Every element have an "edit" action. And when user clicks on "edit" button, a modal window with element's data is displayed.
My problem is with no pagination for the list, it works good.
But with pagination (e.g. 10 elements / page), only the 10 first elements will have modal working good...
Example of the generated list code with elem n°10 (works) and n°11 (not works) :
<tr class="even">
<td class=" ">Abella Sàrl</td>
<td class=" ">10 Rue du Village L-6585 Steinheim (Steenem)</td>
<td class=" ">
<a href="#editMarkerModal" data-toggle="modal">
<i class="fa fa-edit editMarker" data-marker="{"address":"10 Rue du Village L-6585 Steinheim (Steenem)","longitude":null,"latitude":null,"name":"Abella Sàrl","_user":"5305051a6f2529844824c1c5","_id":"53077ef91f85d2c752f1cb50","uptade_date":"2014-02-21T16:29:45.175Z","create_date":"2014-02-21T16:29:45.175Z","active":true,"spritesheet_y":null,"spritesheet_x":null,"logo":"default","__v":0}"></i>
</a>
</td>
</tr>
<tr class="odd">
<td class=" ">Action Line SA</td>
<td class=" ">28 Route de Longwy L-8080 Bertrange (Bartreng)</td>
<td class=" ">
<a href="#editMarkerModal" data-toggle="modal">
<i class="fa fa-edit editMarker" data-marker="{"address":"28 Route de Longwy L-8080 Bertrange (Bartreng)","longitude":null,"latitude":null,"name":"Action Line SA","_user":"5305051a6f2529844824c1c5","_id":"53077ef81f85d2c752f1ca18","uptade_date":"2014-02-21T16:29:44.720Z","create_date":"2014-02-21T16:29:44.720Z","active":true,"spritesheet_y":null,"spritesheet_x":null,"logo":"default","__v":0}"></i>
</a>
</td>
</tr>
My Jquery code for test :
$('.editMarker').on('click', function() {
var marker = $(this).data('marker');
alert(marker.name);
});
Appreciate your help.
C.
When you click paginate button, probably you are getting next 10 elements with ajax. In your success function of ajax call, you can use following initialization code for bootstrap modal;
$('a[data-toggle="modal"]').modal();
If you are not using ajax, no problem. Just put above code in your pageinate button click event.
Update: Added example;
You can add function to paginate event to re-init modal;
$(document).ready(function() {
$('#example').dataTable({"sPaginationType": "full_numbers", "iDisplayLength":2});
initModal();
$(".dataTables_paginate").find("a").on("click", function() {
initModal();
})
function initModal() {
$('.mymodal').on("click", function() {
$('.modal').modal('hide');
$("#modal-content").html(JSON.stringify($(this).find(".editMarker").data("marker")));
$('.modal').modal();
});
}
});
Here is a working example: http://jsfiddle.net/HEDvf/1137/