We Keep Coding

How to simulate a mouse click on an anchor tag

I'm writing a chrome extension and from that extension i want to click on a particular anchor tag in a webpage on a particular website.
let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
Using this query selector i'm able to get the anchor tag from the web page which looks like.
<a data-ga-label="resolve_now_live" data-ga-action="clicked" ng-if="helpRequestObj.item_type === 'Topic'" ng-click="claimLiveRequest($event, true, helpRequestObj.id)" target="_blank" class="content-heading ng-scope" data-ga-category="HelpRequestDashboardLive"> </a>
I just want to click on this tag using java script.
But helpRequestButton.click() dosent work.
I have tried the same solution with jQuery(did'nt work).
Also i tried to search a lot on web on how to simulate a mouse click and none of the solutions worked uptill now.
Just for refrence i'm giving the code snippet of my extension what chrome would call one the webpage is loaded. The button which i have to click is present on the web page.
let timeOut;
function stopTimeout() {
clearTimeout(timeOut);
}
function checkIncomingHelpRequests() {
let helpRequestButton = document.querySelectorAll(".live-doubt-item-resolve.ng-scope a");
console.log(helpRequestButton[0]);
if (helpRequestButton.length > 0) {
> ***// This is the place i want to click the button.***
// helpRequestButton.
//helpRequestButton.click();
}
}
function selectTag() {
// var object = document.querySelector(".main-class");
// console.log(object);
let liButton = document.querySelectorAll(".pointer.tab.ga-event-tracker")[0];
//let liButton = $("li.pointer.tab.ga-event-tracker")[0];
//console.log(liButton);
if (liButton !== undefined) {
liButton.click();
checkIncomingHelpRequests();
}
timeOut = setTimeout("selectTag()", timeOutInterval);
}
$(document).ready(function () {
selectTag();
});
Please help me. Thanks in advance.

I am not able to get any of my JSLink working. What am I doing wrong

We have SharePoint 2013 on Prem and I am trying to do some customizations using JS Link. Even the most simple exercises are not working. I don't understand what I'm doing wrong.
New page - List added and jS Link = ~site/SiteAssets/js-test/OverRideCustomHeader.js
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Header = overrideCustomHeader;
overrideContext.Templates.Footer = overrideCustomFooter;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function overrideCustomHeader() {
return “<h3>Our Custom Header</h3>”;
}
function overrideCustomFooter() {
return “<h3>Our Custom Footer</h3>”;
}
I expect to see a header and a footer display and they are not.

Insert script editor webpart into the page and insert the script into script editor webpart(use correct 【"】).
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Header = overrideCustomHeader;
overrideContext.Templates.Footer = overrideCustomFooter;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function overrideCustomHeader() {
return "<h3>Our Custom Header</h3>";
}
function overrideCustomFooter() {
return "<h3>Our Custom Footer</h3>";
}
Update:
Have you enabled Minimal Download Strategy?
JSLink won't work if url like /_layouts/15/start.aspx# , you could disable the feature.

How to find when reportviewer is loaded using reportviewer api

I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.
Firstly, what i'm trying to do:
I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report
AsyncRendering="false"
Along with this bit of jquery (targeting the div that contains the reportviewer):
$(document).ready(function () {
$('#reportDiv img').removeAttr('class');
});
Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.
Sys.Application.add_load(function () {
var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
reportViewer.add_propertyChanged(viewerPropertyChanged);
});
function viewerPropertyChanged(sender, e) {
var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
if (e.get_propertyName() === "isLoading") {
var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
button.disabled = viewer.get_isLoading();
}
else {
if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
alert("here");
}
}
}
The first portion (isLoading) works as expected disabling the button. However immediately upon load I get
Object doesn't support property or method 'get_reportAreaContent'
Am I missing something obvious? These are the links from msdn that I used for reference:
reportviewer isLoading
reportviewer ReportAreaContentType

Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.
var app = Sys.Application;
app.add_init(ApplicationInit);
function ApplicationInit(sender) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
prm.add_endRequest(EndRequest)
}
}
function EndRequest(sender, args) {
var reportViewerControlId = "ReportViewer1";
if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
var renderedReportImage = $("#" + reportViewerControlContainer + " img");
renderedReportImage.removeAttr("style").removeAttr("class");
var styleAttr = renderedReportImage.attr("style");
var classAttr = renderedReportImage.attr("class");
if (typeof styleAttr === 'undefined') {
console.log("Successfully removed the style attribute from the rendered report image!");
}
if (typeof classAttr === 'undefined') {
console.log("Successfully removed the class attribute from the rendered report image!");
}
}
}
Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.

Safari print with Javascript produces blank when printing an Iframe

I have read up on all issues regarding Safari and blank printing. It seems that a white flash happens, re-rendering the page, and content of the iframe is lost before a print dialog can grab it.
Here is my javascript - It works in all browsers except safari. It brings up the dialog, but prints a blank page.
function PrintPopupCode(id) {
framedoc = document;
var popupFrame = $(framedoc).find("#" + id + '\\!PopupFrame');
var icontentWindow = popupFrame[0].contentWindow || popupFrame[0].contentDocument;
icontentWindow.focus();
icontentWindow.print();
}
function PrintPopup(id) {
setTimeout(function () { PrintPopupCode(id) }, 3000);
}
I have set a timeout, i previously read it would help if the transfer of content took sometime, but it has not helped.
I have also tried with printElement() function on the icontentWindow variable, but it does not support this method.
Print Element Method
This is all in a .js file, and not on the page. I have tried on the page, but the same thing happens.
Help?

Maybe you should try this:
function PrintPopupCode(id) {
framedoc = document;
var popupFrame = $(framedoc).find("#" + id + '\\!PopupFrame');
var icontentWindow = popupFrame[0].contentWindow || popupFrame[0].contentDocument;
icontentWindow.focus();
setTimeout(icontentWindow.print, 3000);
}
function PrintPopup(id) {
PrintPopupCode(id);
}

Javascript - How to disable the print dialog after first show?

On one of our pages the user has the option to print a selected list of html pages. This is how it is at the moment
var rowcount = FrmMain.RowCount;
var frame = FrmMain.Frame;
for(i=1;i<=rowcount;i++)
{
var obj = FrmMain.elements("chk_" + i);
if(obj.checked)
{
frame.src = FrmMain.elements("hpath" + i).value;
window.frames[frame.id].focus();
window.frames[frame.id].print();
}
}
Now this works fine. The problem is that on each loop the print dialog box is displayed and the user has to click print.
Basically, what I'm asking is whether that is a way to supress this dialog. It must appear at the first time but hide thereafter. Some thing like below
var show = true;
...
{
...
{
...
if(show)
{
window.frames[frame.id].focus();
window.frames[frame.id].print();
show = false;
}
else
{
window.frames[frame.id].focus();
window.frames[frame.id].printwithoutdialog();
}
}
}
I hope I've been clear. Thanks in advance.

For security / privacy reasons, this is impossible.
Otherwise, ads would automatically print their brochures.
Instead, you can combine all of the pages into a single frame.

Some browsers have an option bypass the dialog, but it can't be done in javascript.