I am making a custom field for the Advanced Custom Fields plugin for wordpress.
Now I have been able to allow javascript to be used inside of the field but the field has UI-sortable active which makes my anchor tag not firering but instead clicks the sortable anchor.
Is there a way to make sure that my click event gets fired inside a sortable element?
So I created this link, to be placed inside a element :
<a id="addTable" href="#">Voeg tabel toe</a>
Which gets turned into an element like this :
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<div id="acf-group_5a93d53605864" class="postbox acf-postbox seamless">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">paneel Bridge verbergen</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle ui-sortable-handle">
<span>Bridge</span>
<a href="{link}/wp-admin/post.php?post=12695&action=edit"
class="dashicons dashicons-admin-generic acf-hndle-cog acf-js-tooltip"
title="Bewerk groep">
</a>
</h2>
<div class="inside acf-fields -top">
<div class="acf-field acf-field-Bridge acf-field-5a93d538671c7"
data-name="bridge"
data-type="Bridge" data-key="field_5a93d538671c7">
<div class="acf-label">
<label for="acf-field_5a93d538671c7">Bridge</label>
</div>
<div class="acf-input">
<!-- Here is the anchor tag -->
<a id="addTable" href="#">Voeg tabel toe</a>
<div id="ContentWrapper">
<div id="North"></div>
<div id="East"></div>
<div id="Middle">
<table bgcolor="#c0c0c0">
<tbody>
<tr>
<td colspan="3" align="center"><strong>N</strong></td>
</tr>
<tr>
<td align="left"><strong>W</strong></td>
<td> </td>
<td align="right"><strong>O</strong></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Z</strong></td>
</tr>
</tbody>
</table>
</div>
<div id="South"></div>
<div id="West"></div>
</div>
</div>
</div>
<script type="text/javascript">
if ( typeof acf !== 'undefined' ) {
acf.postbox.render({
"id": "acf-group_5a93d53605864",
"key": "group_5a93d53605864",
"style": "seamless",
"label": "top",
"edit_url": "http:\/\/{link}\/wp-admin\/post.php?post=12695&action=edit",
"edit_title": "Bewerk groep",
"visibility": true
});
}
</script>
</div>
</div>
</div>
(function($) {
$("#addTable").click(function () {
alert( "Click" );
});
})(jQuery);
Related
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
This is my HTML Code. I have a Javascript code that executes when someone click on the link with class "download-button"
The code looks something like this
$(".download-button").click(function(event){
document.querySelector('.download-progress-container').style.display = 'none';
});
When I click on the download-button link of the second td element, the first td element download-progress-container hides.
Get the common parent element and then find the element within it to hide.
$(".download-button").click(function(event){
// prevent default click event action
event.preventDefault();
// get the td ancestor and get element within that td
$(this).closest('.name').find('.download-progress-container').hide();
});
$(".download-button").click(function(event) {
// prevent default click event action
event.preventDefault();
// get the td ancestor and get element within that td
$(this).closest('.name').find('.download-progress-container').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
</tr>
</table>
Use $(this) to hide clicked element
$(".download-button").click(function(event){
var _t = $(this);
_t.parents('td').find('.download-progress-container').hide();
//document.querySelector('.download-button').style.display = 'none';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
A simple approach would be to hide all .download-progress-container descendants of the .parent() of the download button being clicked. You can achieve that with the following:
$(".download-button").click(function(event) {
/* Prevent default click action behavior */
event.preventDefault();
/* Hide the progress container that is a descendant of the same
anscestor of the download button being clicked */
$('.download-progress-container', $(this).parent()).hide();
});
Here's a working snippet (yellow blocks show progress element):
$(".download-button").click(function(event) {
/* Prevent default click action behavior */
event.preventDefault();
/* Hide the progress container that is a descendant of the same
anscestor of the download button being clicked */
$('.download-progress-container', $(this).parent()).hide();
});
.download-progress {
background:yellow;
height:1rem;
width:2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
</tr>
</table>
Change your javascript code with following.
Replace
$(".download-button").click(function(event){
document.querySelector('.download-button').style.display = 'none';
});
With
$(".download-button").click(function(event){
$(this).hide();
});
I have this code below and I want to check for every input (class="Comment-modal-input") if it's not empty - get its closest element (class="svg-icon") which is upper in the hierarchy and add it class "active".
<td class="td-comment" style="text-align: center;">
<a href="#0" title="Add Comment" class="comment-modalbttn">
<svg width="30px" height="30px" class="svg-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS0105, 'assets/icons/utility-sprite/svg/symbols.svg#page')}"></use>
</svg>
</a>
<!-- MBO MODAL -->
<div>
<div class="commentmodalcontainer">
<div class="flex-comment-modal">
<div class="comment-modal">
<div class="comment-modal-close"><span>+</span></div>
<div class="comment-modal-content">
<h2 class="comment-modal-title">Enter Comment</h2>
<apex:inputTextarea rows="5" styleClass="comment-modal-input" value="{!line.comment}" />
</div>
<div class="comment-modal-buttons">
Cancel
Apply
</div>
</div>
</div>
</div>
</div>
<!-- END OF MBO MODAL -->
</td>
This is the jQuery I'm trying to do:
$('.comment-modal-input').each(function() {
if ($(this).val()){
var icon = $(this).parents('td').closest('.svg-icon');
icon.addClass('active');
}
});
Any help ?
To add a class to an SVG you need to use .attr('class','class you want')
.closest('td') will find the first td that contains your $(this).
.find('.svg-icon') will search the td and for any element with that class
var icon = $(this).closest('td').find('.svg-icon');
icon.attr('class', 'svg-icon active');
demo
$('.comment-modal-input').each(function() {
if ($(this).val()) {
var icon = $(this).closest('td').find('.svg-icon');
icon.attr('class', 'svg-icon active');
console.log(icon.attr("class"))
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="td-comment" style="text-align: center;">
<a href="#0" title="Add Comment" class="comment-modalbttn">
<svg width="30px" height="30px" class="svg-icon">
</svg>
</a>
<!-- MBO MODAL -->
<div>
<div class="commentmodalcontainer">
<div class="flex-comment-modal">
<div class="comment-modal">
<div class="comment-modal-close"><span>+</span></div>
<div class="comment-modal-content">
<h2 class="comment-modal-title">Enter Comment</h2>
<input rows="5" class="comment-modal-input" value="{!line.comment}" />
</div>
<div class="comment-modal-buttons">
Cancel
Apply
</div>
</div>
</div>
</div>
</div>
<!-- END OF MBO MODAL -->
</td>
</tr>
</tbody>
</table>
You better get td-comment element as a parent and loop those elements and check if Comment-modal-input under each solves your condition and then add the active class under the current td-comment element.
Also, Comment-modal-input is not the same as in the code: comment-modal-input.
Edited:
I got this minus but I was correct :)
Sorry didn't posted the code.
$('.td-comment').each(function() {
var $this = $(this),
commentModalInput = $this.find('.comment-modal-input'),
icon = $this.find('.svg-icon');
if (commentModalInput.val()) {
icon.addClass('active');
}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<table>
<tbody>
<tr>
<td class="td-comment" style="text-align: center;">
<a href="#0" title="Add Comment" class="comment-modalbttn">
<svg width="30px" height="30px" class="svg-icon">
</svg>
</a>
<!-- MBO MODAL -->
<div>
<div class="commentmodalcontainer">
<div class="flex-comment-modal">
<div class="comment-modal">
<div class="comment-modal-close"><span>+</span></div>
<div class="comment-modal-content">
<h2 class="comment-modal-title">Enter Comment</h2>
<input rows="5" class="comment-modal-input" value="{!line.comment}" />
</div>
<div class="comment-modal-buttons">
Cancel
Apply
</div>
</div>
</div>
</div>
</div>
<!-- END OF MBO MODAL -->
</td>
</tr>
</tbody>
</table>
I am trying to create loader for my website but it is not working .I am using turbolinks classic for this operation.The loader loads after the page load which i don't want .I need when page is loading that time i need my loader to load and when the page gets load the loader should get disappear both things are not working.Here is my code
<div id="content-wrapper">
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
<div class="row">
<div class="col-lg-12">
<div class="main-box clearfix">
<div class="clearfix">
<div class="common_page gsb1">
<div class="hdr">
<div class="row">
<div class="col-md-3">
<h4>Dashboard</h4>
</div>
<div class="col-md-5">
</div>
<div class="col-md-4 pull-right">
<%=render 'common/date'%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<div class="table-responsive custom-bg">
<table class="custom-table" cellspacing="0">
<tr>
<td><table width="100%" border="0" class="tbl-second-lvl" cellspacing="0" cellpadding="0">
<tr>
<td> Name</td>
<td>Email </td>
</tr>
<tr></tr>
<%#dashboard.each do |dashboard|%>
<tr>
<td><b><%=dashboard[:NAME]%></b></td>
<td><%=dashboard[:email]%></td>
</tr>
<%end%>
</table></td>
</tr>
</table>
<%= will_paginate #dashboard %>
</div>
</center>
<%=render 'common/footer'%>
</div>
<script>
$("#retailer").attr("class","active")
$(document).on('page:load', function(event) {
$('.loader img').css("display","none");
});
</script>
But the loader is not loading the image Can anyone tell me how to do that.And I don't want to use ajax for this thing
set display to block initially :-
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
or just
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;'/></div>
and remove
$(document).on('page:before-unload', function(event) {
//remove $('.loader img').css("display","block");
});
As a result,the loader image will be not visible after document is loaded fully but is visible till then
My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here
in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];
you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});
I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}
I use Foundation 6 and the close button http://foundation.zurb.com/sites/docs/close-button.html
inside jQuery Reveal Modal Plugin http://foundation.zurb.com/sites/docs/reveal.html .
When i click on the close button of the table row, the whole modal will close, too.
How can i make the close button remove only the table row without closing the modal?
My HTML:
[![<div class="reveal" id="wishlist" data-reveal>
<p class="lead">Ihre Wunschliste</p>
<div class="wishlist">
<div data-hook="cart_container">
<table class="stack articles">
<thead></thead>
<tbody>
<tr class="callout" data-closable>
<td>CHF 199.00
<div class="nile-close-button">
<span class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×
<div class="close-button-text">entfernen</div>
</span>
</span>
</div>
</td>
</tr>
<tr class="callout" data-closable>
<td>CHF 179.00
<div class="nile-close-button">
<span class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×
<div class="close-button-text">entfernen</div>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>][1]][1]
It doesn't seem possible to override data-close handling in Foundation. So I ended up with removing Foundation's Close Button and make one myself.