$(function(){
$(".resourec-column").slice(0, {{ module.no_of_coulmn_to_show_before_click_to_the_button }}).show();
$("#seeMore").click(function(e){
e.preventDefault();
$(".resourec-column:hidden").slice(0, {{ module.no_of_coulmn_to_show_after_click_to_the_button }}).show();
if($(".resourec-column:hidden").length == 0){
$("#seeMore").hide();
$(".error-text").show();
}
});
});
Related
My form has a Master page, i.e., cannot use a popup Form.
I used the code below to create a popup menu associated with one of the lists, but the popup appears BELOW my list items (I can only see the last two items!) and it appears no matter which list I right click on.
Any help will be appreciated.
Here is my code (modified from a web site example):
<div id="contextMenu" class="context-menu"
style="display: none">
<ul>
<li>New</li>
<li>Edit</li>
<li>View</li>
<li><a href="#">Copy
<li>Refresh</li>
</ul>
</div>
<script type="text/javascript">
document.getElementById('# <% = lstContactsClerk.ClientID %>').oncontextmenu = rightClick;
function rightClick(clickEvent) {
clickEvent.preventDefault();
// return false;
}
</script>
<script>
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu")
.style.display = "none"
}
function rightClick(e) {
e.preventDefault();
if (document.getElementById("contextMenu")
.style.display == "block")
hideMenu();
else {
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}
}
</script>
I need to use require js to use jquery in my block(Magento2).
Do I have to declare for each function require JS at each beginning or there is a way to declare it only once?
here is my code, thanks
my html
<div class="mainMenu">
<div style="background-color: black;color: white;">
<div onClick="openCategory(1)">MENU 1</div>
<div onClick="openCategory(2)">MENU 2</div>
<div onClick="openCategory(3)">MENU 3</div>
</div>
</div>
<div onClick="openMainMenu()">
OUVRIR MENU
</div>
SCRIPT inside phtml
<script>
let menu
require(['jquery', 'jquery/ui'], function($){
$.ajax({
url: "https://catfact.ninja/fact",
context: document.body
}).done(function(value) {
menu = []
menu.forEach(element => {
$('.mainMenu').append("<div class='menuContainer menuNumber" + element.id + "'>" + element.name + "</div>")
});
});
});
function openMainMenu(){
require(['jquery', 'jquery/ui'], function($){
$('.mainMenu').show()
});
}
function openCategory(categoryNumber){
require(['jquery', 'jquery/ui'], function($){
console.log($('.menuNumber' + categoryNumber).css("visibility", "visible"));
});
}
</script>
No it don't require to use it multiple times
See Updated Code:
<script>
let menu
require(['jquery', 'jquery/ui'], function($){
$.ajax({
url: "https://catfact.ninja/fact",
context: document.body
}).done(function(value) {
menu = []
menu.forEach(element => {
$('.mainMenu').append("<div class='menuContainer menuNumber" + element.id + "'>" + element.name + "</div>")
});
});
function openMainMenu(){
$('.mainMenu').show();
}
function openCategory(categoryNumber){
console.log($('.menuNumber' + categoryNumber).css("visibility", "visible"));
}
});
</script>
Hope it helps !!
Here is my setup and i am trying to figure out if its possible.
I have an Chrome Extension which goes and parses some data from a active page and then copys the result to the clipboard. My popup.html is minimal and looks like this
<!DOCTYPE html>
<html style=''>
<head>
<script src='popup.js'></script>
</head>
<body style="width:600px;">
<textarea id="emailphone" cols="50" rows="10"></textarea>
<br>
<button id="copy-to-clipboard">Copy to Clipboard</button>
</body>
</html>
What i would like to do is actually not even show the popup at all as my script goes and creates an Alert and displays the data. But for one my script sets the Inner Html of the emailphone textarea with the parsed data and then i go and copy the textarea to my clipboard. Here is my popup script
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
emailphone.innerText = request.source;
myFunction();
}
});
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("copy-to-clipboard").addEventListener("click", copytoclipboard);
});
function onWindowLoad() {
var message = document.querySelector('#emailphone');
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.runtime.lastError) {
emailphone.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
}
});
}
function copytoclipboard() {
var copyText = document.getElementById("emailphone");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert(copyText.value);
}
window.onload = onWindowLoad;
when i use window.close() it only closes after i close the alert. So what i am looking for is to only show the Alert and not the popup.html
I have a bootstrap calendar on my page that lets the user pick a date. I have a start time and endtime. I would like to test to do the following.
If the user leaves the date selector empty, the test will fail with a message like cannot leave fields empty.
If the user enters an endtime that is less than the startime the test will fail and throw a message like Cannot have endtime less than starttime.
I will paste the code that works with the datepicker. I am using Qunit for testing purposes and Bootstrap 4.
button.js
// Runs date picker plugin
$('input.date').datepicker();
// Gets data
var data;
fetch('/reportSaver', {
// data: dates,
method: 'POST'
}).then(function (response) {
return response.json();
}).then(function (json) {
data = json;
});
// Form submit
$('form').on('submit', function (event) {
event.preventDefault();
var dates = {
startdate: new Date($('.startdate').val()),
enddate: new Date($('.enddate').val())
};
// Minimum validation for dates
if ((dates.startdate && dates.startdate > dates.enddate) ||
(dates.enddate && dates.enddate < dates.startdate)) {
return alert('Use valid dates!');
}
// Filter rows
var rows = data.filter(function (register) {
var date = new Date(register.receivedDateTime);
return (
(!dates.startdate || date > dates.startdate) &&
(!dates.enddate || date < dates.enddate)
);
// Convert to HTML
}).map(function (row) {
return `
<tr>
<td> </td>
<td>${row.subject || '-'}</td>
<td>${row.receivedDateTime || '-'}</td>
<td>${row.isRead || '-'}</td>
<td>${row.sendDateTime || '-'}</td>
</tr>
`;
});
// Show content
$('table tbody').html(rows.join(''));
});
// Clear click
$('.clear-table').on('click', function () {
// Clears table
$('table tbody').html('<tr><td colspan="5">Make a search</td></tr>');
// Clears inputs
$('input').val('');
});
form.html
{{!-- Post form for Date Picker --}}
<form id="post_form" method="GET" action="/routes/reportSaver.js">
<div class="date-picker">
<h3>Date</h3>
<input placeholder="Initial date" type="text" class="date startdate"> -
<input placeholder="End date" type="text" class="date enddate">
</div>
<hr>
{{!-- Button to save the Report --}}
<button id="bt1" type="submit" class="btn btn-danger">Click to Get Reports</button>
<button id="bt2" type="submit" class="btn btn-danger clear-table">Clear</button>
</form>
Qunit Test Example
QUnit.test("Datepicker Test", function (assert) {
var datepicker = $("#startDate");
var event = $.Event("onSelect");
datepicker.on("onSelect"),
function () {
alert("Test");
};
// Trigger the key event
datepicker.trigger(event);
});
I'm trying to do a form with symfony 4. It works fine. But I have a problem.
I have a field to write a comment. By default, it's not required.
However, I would like to change this using jquery.
This is what I tried to do.
Here, it's my twig:
<div class="information" id="informationForm">
{{ form_row(recordForm.category) }}
{{ form_row(recordForm.information) }}
{{ form_label(recordForm.comment) }}
{{ form_widget(recordForm.comment, {'attr': {'class': 'comment'}}) }}
{{ form_errors(recordForm.comment) }}
<button id="add_information_button" class="btn btn-primary">Ajouter un renseignement</button>
<button id="count_div" class="btn btn-primary">Compter</button>
<button class="remove_information_button btn btn-primary">Supprimer un renseignement</button>
</div>
Here it's the javascript:
$('.information')
.on("change", ".record_to_information_form_information", function (event) {
event.preventDefault();
var $commentState = $(this).find('option:selected').data('comment')
//Test: to know if i received the attribute
console.log($commentState)
if($commentState===false){
//the field isn't required
// {{ form_widget(recordForm.comment, {'attr': {'required': 'false'}}) }}
}else{
//the field is required
// {{ form_widget(recordForm.comment, {'attr': {'required': 'true'}}) }}
}
})
;
Do you have any suggestions?
You can toggle required property value from your jQuery code.
I assume that data-comment attribute has type boolean and it's always set, so your toggle statement can look as follows:
$('.information')
.on("change", ".record_to_information_form_information", function (event) {
event.preventDefault();
var $commentState = $(this).find('option:selected').data('comment');
//Test: to know if i received the attribute
console.log($commentState);
$('.comment').prop('required', $commentState);
});
If you need to do something else in your if-else statement, you can just leave your condition as you provided in sample:
if ($commentState === false) {
//the field isn't required
$('.comment').prop('required', false);
} else {
//the field is required
$('.comment').prop('required', true);
}