I have a page with columns and I need to close the tab if the first column has this src="imgs/newmail.gif"
I will send you a screenshot of part of the code.
<tr> <td align="center" bgcolor="#FFFFFF">1</td> <td bgcolor="#FFFFFF" align="center"> <img src="imgs/newmail.gif" border="0"> </td>
#Vlad you haven't given us much to work with, and the below script is untested, but try this as a starting point:
// ==UserScript==
// #name Close Tab if Img Found
// #namespace http://tampermonkey.net/
// #match https://example.com/*
// #grant window.close
// ==/UserScript==
(function() {
'use strict';
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
setTimeout(() => {
//allow a few ms for page to fully load
if ( $('img[src=imgs/newmail.gif"]') !== undefined && $('img[src=imgs/newmail.gif"]') !== null){
window.close();
}
});
})();
You will need to change the //match line, and you might have to tweak the line that watches for the correct image tag.
Give us more information and we can try to tweak it a little more for you.
PS - The above code is not jQuery - look carefully.
Reference:
https://www.tampermonkey.net/documentation.php#_grant
Related
I'm trying to make a slight improvement to an existing widget that our team created, but can't seem to get it to work correctly. We have a widget that does a RowCount of tasks and groups them by state. I want the RowCount to auto update once a task is complete without having the user press the refresh button. I've read some documentation on $rootscope, $broadcast, and $on, but can't seem to get it to work.
Below is snippet of our HTML:
<table class="table table-sm table-responsive">
<tbody>
<tr class="h3">
<td colspan=2>Complete</td>
</tr>
<tr class="h2 bg-success" ng-repeat="x in data.values track by $index">
<td><span class="glyphicon glyphicon-check"></span></td>
<td>{{x.completedCount}}</td>
</tr>
</tbody>
</table>
A snippet of our Server Script:
var values = [];
var _completedCount;
var gsCompleted = new GlideRecordSecure('sn_hr_core_task');
//CLOSED COMPLETE, CLOSED INCOMPLETE,
gsCompleted.addQuery('state', 'IN', '3,4,7');
gsCompleted.addQuery('assigned_to', gs.getUserID());
gsCompleted.addQuery("parent.state", 'NOT IN', '1,800,900');
gsCompleted.query();
if(gsCompleted){
_completedCount = gsCompleted.getRowCount();
}
else{
_completedCount = 0;
}
values.push(
{
completedCount: _completedCount
});
data.values = values;
How do I get this widget to auto update the Completed row count without refreshing the page? I've been playing around with spUtil recordWatch, but cannot get it to work correctly:
function($scope, $sce, spUtil) {
var c = this;
c.data.loading = true;
//After page initially loads re-call server script to load data
c.server.get({
action: 'retrieve_data'
}).then(function(response) {
c.data.loading = false;
console.log('Response');
console.log(response);
c.data.values = response.data.values;
spUtil.recordWatch($scope, 'sn_hr_core_task', "", function(name,data) {
spUtil.update($scope);
})
});
}
Take a look at the widget Simple List, it has an example of one that may help a bit.
You should be able to change your recordWatch to this
var filter = "stateIN3,4,7^parent.stateNOT IN1,800,900^assigned_to=" + window.NOW.user_id;
spUtil.recordWatch($scope, 'sn_hr_core_task', filter);
You generally won't need a callback function unless there is some specific action you're triggering.
In an Index-gsp, I want to be able to select an arbitrary number of lines and then by clicking a link send all those lines to a controller for processing e.g. creating new objects of a different kind.
I've no idea how selection can be done or how to collect these selected lines in a GSP. Maybe I should use a checkbox on each line if that's possible?
It's a list of products which is displayed using a modified index.gsp.
Each product-line has a checkbox in front.
What I want is to make a list of the products that are checked an then transmit this list to a controller.
a part of this index.gsp:
<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
<li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
<li><g:link class="create" action="createOffer"><g:message code="default.new.label" args="[entityName]" params="toOffer" /></g:link></li>
</ul>
</div>
<div id="list-prodBuffer" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<table>
<thead>
<tr>
<td> Välj</td>
<td> ID</td>
</tr>
</thead>
<tbody>
<g:each in="${prodBufferList}" status="i" var="prodBuffer">
<tr class="${ (i % 2) == 0 ? 'even': 'odd'}">
<td><g:checkBox name="toOffer" value="${prodBuffer.id}" checked="false" /></td>
<td>${prodBuffer.id}</td>
So this not an ordinary form, just a list where I want to use a link to transmit it to the controller.
I'm a beginner and have no idea how to do it.
You can collect all necessary data from page using javascript, and then send all data to your controller for processing.
There are a lot of ways to do it.
For example send via JQuery:
<script>
//some code
var items = [1,2,3];
//some code
$('#add-location').click(function () {
$.ajax({
type: "POST",
url: "${g.createLink(controller:'myController', action: 'myControllerMethod')}",
data: {items: items},
success: function (data) {
console.log(data)
}
});
});
</script>
I will answer this but have to slow down since it feels like i am beginning to write your project:
In gsp you will need to have a hidden field followed by a check box amongst data you are trying to capture, checkbox should contain all the data elements required to build your output.
<g:hiddenField name="userSelection" value=""/>
<g:checkBox name="myCheckBox" id='myCheckBox' value="${instance.id}"
data-field1="${instance.field1}" data-field1="${instance.field1}"
checked="${instance.userSelected?.contains(instance.id)?true:false}" />
In the java script segment of the page you will need to add the following
This will then auto select selection and add to javascript array
// Customized collection of elements used by both selection and search form
$.fn.serializeObject = function() {
if ($("[name='myCheckBox']:checked").size()>0) {
var data=[]
$("[name='myCheckBox']:checked").each(function() {
var field1=$(this).data('field1');
var field2=$(this).data('field2');
data.push({id: this.value, field1:field1, field2:field2 });
});
return data
}
};
Most importantly will your data sit across many different gsp listing pages if so you will need to hack pagination:
//Modify pagination now to capture
$(".pagination a").click(function() {
var currentUrl=$(this).attr('href');
var parsedUrl=$(this).attr('href', currentUrl.replace(/\&userSelection=.*&/, '&').replace(/\&userSelection=\&/, '&'));
var newUrl=parsedUrl.attr('href') + '&userSelection=' + encodeURIComponent($('#userSelection').val());
window.location.href=newUrl
return false;
});
Then in the controller parse the JSON form field and make it into what you want when posted
def u=[]
def m=[:]
if (params.userSelection) {
def item=JSON.parse(params.userSelection)
item?.each {JSONObject i->
// When field1 is null in JSON set it as null properly
if (JSONObject.NULL.equals(i.field1)) {
i.field1=null
}
if (resultsGroup) {
if (!resultsGroup.contains(i.id as Long)) {
u << i
}
} else {
u << i
}
}
m.userSelected=item?.collect{it.id as Long}
m.results=u
}
return m
I am storing a DataSnapshot into a $scope array, so the ng-repeat into HTML div updates my "result list"
The problem is, when I run the code, input a value and click to run the DataSnapshot function, the first result doesn't appear on the app screen, only on the app's log on browser's console. If I run the function again, the result appears. If I change the input and click the button (run the function) again, this input appears in the first try.
So, here's what you will probably need:
Print from first attempt(data appears on console but not on app):
Print from second attempt(data appears twice on console and once on app):
Print from third attempt with another input(data appears once on console and once on app):
Codes:
index.html
<div class="list card">
<div class="item item-body" ng-repeat="locker in lockers">
<a href="#" class="item item-icon-right text-center">
<img ng-src="{{imageSrc}}" style="width: 35px; height: auto;">
<p style="text-align: center">
Locker - {{locker.number}}
<br>
{{key}}
</p>
<i class="icon ion-chevron-right"></i>
</a>
</div>
app.js
angular.module('starter', ['ionic', 'firebase'])
.controller('LockerCtrl', ["$scope", "$firebaseArray", function($scope,$firebaseArray, snapshot){
var lockersRef = new Firebase('https://ifrjarmariosdb.firebaseio.com/armarios');
$scope.getButtonClicked = function() {
var lockernumber = document.getElementById('lockerNumberInput').value;
if(lockernumber.length > 0){
lockerInputedNumber = parseInt(lockernumber);
lockersRef.on('value', function(snapshot){
snapshot.forEach(function(data){
var number = data.val().number;
if(number == lockerInputedNumber){
$scope.key = data.key();
$scope.lockers = [data.val()];
console.log(data.val());
if(number == 101){ -
$scope.imageSrc = "img/locker_test2.png";
}
else{
$scope.imageSrc = "img/locker_test.jpg";
}
}
});
});
}
As you could see by the prints, I'm also facing some trouble to change the image source according to the number value from Firebase. If you could help me to solve that, it would be a great help.
Please, I'm not asking for the solution for this method, if you know a different method to do this, I ask you to post it too.
Thanks!
This code starts loading data from Firebase:
lockersRef.on('value', function(snapshot){
snapshot.forEach(function(data){
var number = data.val().number;
if(number == lockerInputedNumber){
$scope.key = data.key();
$scope.lockers = [data.val()];
console.log(data.val());
if(number == 101){ -
$scope.imageSrc = "img/locker_test2.png";
}
else{
$scope.imageSrc = "img/locker_test.jpg";
}
}
});
The loading happens asynchronously. Since it takes time before the data is available, the browser continues executing the JavaScript after this code.
When the data comes back from the server, it executes your callback function. But at that point, AngularJS is no longer expecting any changes to the $scope.
The solution is to make AngularJS aware of the fact that you've changed the scope. The easiest way to do that, is to wrap the callback into a $timeout() call:
lockersRef.on('value', function(snapshot){
$timeout(function() {
snapshot.forEach(function(data){
var number = data.val().number;
if(number == lockerInputedNumber){
$scope.key = data.key();
$scope.lockers = [data.val()];
console.log(data.val());
if(number == 101){ -
$scope.imageSrc = "img/locker_test2.png";
}
else{
$scope.imageSrc = "img/locker_test.jpg";
}
}
});
});
Some people that ran into the same problem:
Angular JS firebase.(child_added) not rendering on page
ng-show and ng-change unwanted delay
A few other things I note about your code:
you're downloading all lockers and then filtering for the one the user entered client-side. This is wasting bandwidth that your user might be paying for. A better way would be to leave the filtering to Firebase with a Query:
var query = lockersRef.orderByChild('number').equalTo(lockerInputedNumber);
query.on('value', function(snapshot){
there is a binding library for AngularJS+Firebase called AngularFire, which handles the $timeout() thing automatically. It's built on top of Firebase's JavaScript SDK that you're now using, so they interoperate perfectly.
I am displaying the properties of a room as part of a room management application I am working on, this is the output:
As you can see, the value of Beamer (Projector in english) is "Sony (lamp 01/12/2013)". This output is correct but when I open my console I see some errors concerning interpolation:
Larger resolution:
"Can't interpolate: {{getBeamerString()}} TypeError: Cannot read property 'aanwezig' of undefined"
This is my html partial:
<section class="eigenschappen">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Eigenschap</th>
<th>Waarde</th>
<th>Bewerk</th>
</tr>
</thead>
<tbody>
...
<tr>
<td><img class="ruimteNaam" src="../Images/Beamer.png" alt=""/>Beamer</td>
<td>{{getBeamerString()}}</td>
<td><img class="edit" src="../Images/Edit.png" alt=""/></td>
</tr>
...
</tbody>
</table>
</section>
currentRuimte (CurrentRoom in English) is a scope defined variable that gets its value using a resource service that gets that data from my mongoDB:
function RuimteController($scope, $routeParams, Ruimte) {
$scope.currentRuimte = Ruimte.get({
ruimteNaam: $routeParams.ruimteNaam
});
$scope.getBeamerString = function () {
var beamer = $scope.currentRuimte.beamer;
if(beamer.aanwezig == 'Ja'){
return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
}else{
return '-';
}
}
}
When I inspect the scope using batarang I get this:
Why do I get the error and why do I still get the correct output?
Is there a way to prevent the error from happening? Please correct me as much as you can,
I am fairly new to AngularJS and Javascript in general and trying to expand my skillset.
The problem is that
$scope.currentRuimte = Ruimte.get({
ruimteNaam: $routeParams.ruimteNaam
});
Is an asynchronous operation. $scope.currentRuimte is going to be a blank object when this call returns, and some time later, when the data is available, it will be filled in with the HTTP response.
This means that the first time your view is rendered, $scope.currentRuimte is going to be {}, and therefore $scope.currentRuimte.beamer is going to be undefined, so this line:
var beamer = $scope.currentRuimte.beamer;
if(beamer.aanwezig == 'Ja'){ /* <-- undefined.aanwezig ! */
}
is going to raise an exception. You can solve this by making sure that beamer is truthy first:
$scope.getBeamerString = function () {
var beamer = $scope.currentRuimte.beamer;
if(beamer && beamer.aanwezig == 'Ja'){
return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
}else{
return '-';
}
}
I have a table where I load an external php file[name # settings_profile.php] inside settings.ctp file.
Code snippet from settings.ctp
<table>
<tr>
<td rowspan="2" id="upload-response-message">
<?php include("settings_profile.php"); ?>
</td>
</tr>
</table>
settings_profile.php
<?php
$image_path = $user['User']['image_path'];
if (!empty($image_path)) {
echo $this -> Image -> resize($image_path, 100, 200);
}else{
echo 'EMPTY' ;
}
?>
The output from settings_profile.php is generated as follows [copied from source code]
<table>
<tr>
<td rowspan="2" id="upload-response-message"> One
<img src="/dearmemoir/uploads/resized/image.jpg" alt="thumb" />
</td>
</tr>
</table>
The contents of $user['User']['image_path'] are updated by calling Controller using AJAX and I am trying to reload setting_profile.php file inside the table using -
function showUploadResponse(data) {
alert (data.status);
if( data.status == 1 ) {
$("#upload-response-message").load("settings_profile.php #upload-response-message");
}
}
But the content was never updated in the page. Any help?
You are breaking the MVC paradigm AND CakePHP conventions by doing this. If you are including an external php file in a view that is not a CakePHP helper, then you are doing something wrong.
If that is all there is to settings_profile.php, then delete it and move the functionality to either a controller or a component. Then assign the image to a variable that gets passed to the view.
If you are using Ajax to then make a call back to the server, then your page will never be reloaded in order for the included code in your view to be called again. Instead, pass the information about the resized image back to your javascript file and update the table through javascript.
//Pseudo Code
//Page is Loaded
//Ajax call made back to the server to resize the image
//Server resizes the image and sends the new image src back to the script
{Image:{name: "newImage", src: "/dearmemoir/uploads/resized/image1.jpg"}}
var returnedData = resultsFromAjax;
//Use javascript to update the image
var imgElement = document.getElementById('ProfileImageId').setAttribute("src", returnedData.Image.src);
That should update your image!