How can I call a function that is declared on my parent window?
I have a new window that opened through calling window.open, and the content of the new window is a grid, each item in grid has link/anchor. I want in my onclick event of each item is to call a function that declared on my parent html. How can I acheive this?
Below is my sample code.
function showCustomWindow(filter){
var title = '';
source = behindDueDates;
title = 'Client Actions Behind Due Dates';
var htmlContent = '<div id="content"><h2> '+ title +'</h2><table class="table" id="behindActions">';
htmlContent +='<thead class="thead-inverse">';
htmlContent += '<tr class="tableHeader">';
htmlContent += '<td> Subject </td>';
htmlContent += '<td> Regarding </td>';
htmlContent += '</tr>';
htmlContent += '</thead>';
htmlContent += '<tbody>';
$.each(source, function(key, value){
var regarding = value.attributes.regardingobjectid;
htmlContent += '<tr>';
htmlContent += '<td data-id="'+value.Id+'">' + value.getValue("subject") + '</td>';
htmlContent += '<td>' + regarding + '</td>';
htmlContent += '</tr>';
})
htmlContent += '</tbody>';
htmlContent += '</table></div>';
var win = window.open("", title, "location=1,status=1,scrollbars=1,width=1000,height=800");
win.moveTo(10, 10);
win.document.write('<html><head><title> ' + title + ' </title></head><body>');
win.document.write(htmlContent);
win.document.write('</body></html>');
}
function redirectToRecord(value){
alert("Event to call from second window")
}
Any help is much appreciated.
Call parent window function with windiw.opener helper:
if (window.opener != null && !window.opener.closed) {
window.opener.function_in_parent(); //Parent window function
}
parent should refer to the opening window.
parent.method() will call a method. It has to be on the same domain though, no cross domain calls will work.
You can access to the child window in this way:
var w = window.open("/uri", "title");
w.childFunction();
and parent:
<a onclick="parent.anyname();" href="#" > Click me </a>
Or try this approach: Possible to call a Javascript method in the context of another window?
Related
I'm trying to get the window.location.href with a username added to the end of it using .concat() to appear in the console. The EventListner only works for the first fullname(fln) and it displays both users window.location.href with their username. How do I get it to display window.location.href with a username for that specific user in the console and for it to work on multiple users full names (fln)?
usersRef.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
var downloadURL = doc.data().downloadURL;
var fln = doc.data().fln;
let i = 0;
display(i, downloadURL);
var username = doc.data().username;
const queryString = window.location.href;
function display(row) {
let new_html = '';
new_html += '<tr>';
new_html += '<td>';
new_html += '<td>';
new_html += '<div class="grid-item">';
new_html += '<img src= "' + downloadURL + '">';
new_html += '<h2 class="fln"> ' + fln + '';
new_html += '</h2>';
new_html += '</div>';
new_html += '</td>';
new_html += '</td>';
new_html += '</tr>';
new_html += row;
$('#grid-container').append(new_html);
let eachName = document.querySelector(".fln");
eachName.addEventListener("click", userClicked);
function userClicked() {
var i = 0;
const queryString = window.location.href;
console.log(queryString.concat('/', username));
}
}
})
})
let eachName = document.querySelector(".fln");
will select the first element on the page with that class, not the one you just added to the table. So every time through the loop you're adding another click listener to the element in the first row of the table, while the rest will not have any listener.
Use
let eachName = document.querySelector("#grid-container tr:last-child .fln");
to select the the one in the last row, which will be the one that was just added.
function userClicked() {
var i = 0;
const queryString = window.location.href;
console.log(queryString.concat('/', username));
window.location = queryString.concat('/', username);
}
var modulesDemo = ['module1', 'module2'];
var moduleHtml='', pdfContent='';
$.each(modulesDemo, function( index, module ) {
if(typeof window[module] === 'function'){
window[module](function(content){
moduleHtml +=content;
if(modulesDemo.length==index+1){
pdfContent += '<table>';
pdfContent += moduleHtml;
pdfContent += '</table>';
console.log(pdfContent);
}
});
}
});
function module1(callback){
var content='';
var canvas = $("#demoCanvas")[0];
var img = canvas.toDataURL("image/png");
content += '<tr>';
content += '<td>';
content += '<img style="width:100%;height:100%;margin-top:20px !important" src="'+img+'" />';
content += '</td>';
content += '</tr>';
callback(content);
}
function module2(callback){
function module2(callback){
var img;
var content;
html2canvas($("#demoCanvas1"), {
onrendered: function(canvas) {
img = canvas.toDataURL("image/png");
content += '<tr>';
content += '<td>';
content += '<img style="width:100%;height:100%;margin-top:20px !important" src="'+img+'" />';
content += '<td>';
content += '</tr>';
//alert(2);
callback(content);
}
});
}
}
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='demoCanvas'></canvas>
<!-- end snippet -->
when i am using callback in $.each then loop is not working synchronous.Iterate doesn't wait for function complete.Can anyone help me.
Every effort will be appreciated
Thanks!
You have defined the functions as module1 and module2 but in modulesDemo array you are putting names as:
var modulesDemo = ["module_1","module_2"];
These names are different than the actual function names (notice the underscores?). So your functions are not getting called.
Edit:
Based on your comment, your issue can not be reproduced. See the code snippet below.
var modulesDemo = ['module1', 'module2'];
var moduleHtml='', pdfContent='';
$.each(modulesDemo, function( index, module ) {
if(typeof window[module] === 'function'){
window[module](function(content){
moduleHtml +=content;
if(modulesDemo.length==index+1){
pdfContent += '<table>';
pdfContent += moduleHtml;
pdfContent += '</table>';
//$scope.exportDashboardProcess(pdfContent,layout,size);
console.log(pdfContent);
}
});
}
});
function module1(callback){
var content='';
var canvas = $("#demoCanvas")[0];
var img = canvas.toDataURL("image/png");
content += '<tr>';
content += '<td>';
content += '<img style="width:100%;height:100%;margin-top:20px !important" src="'+img+'" />';
content += '</td>';
content += '</tr>';
callback(content);
}
function module2(callback){
var content='';
var canvas = $("#demoCanvas")[0];
var img = canvas.toDataURL("image/png");
content += '<tr>';
content += '<td>';
content += '<img style="width:100%;height:100%;margin-top:20px !important" src="'+img+'" />';
content += '</td>';
content += '</tr>';
callback(content);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='demoCanvas'></canvas>
Using AJAX, I fetch data, and I have to dynamically append that data as rows in html table.
There are some special characters which are not being displayed in table. Though, they are currently shown if printed using 'alert' or with html tag.
Here is my code:
var mytext = '';
var color = "black";
for (t in events) {
mytext += '<tr style="color:'+color+';">';
mytext += '<td style="color:blue;"> <a onclick=\'load_iframe(' + events[t].event_id + ',"' + events[t].signature +'");\'>';
mytext += $('<div/>').html(events[t].signature).html();
mytext += '</a> </td>';
mytext += '<td>' + events[t].start_time + '</td>';
mytext += '<td>' + events[t].end_time + '</td>';
mytext += '</tr>';
}
$('#events_table > tbody:last').append(mytext);
The value of events[t].signature being shown in table is "venci\u00f3_humano".
If I print it using html/alert it shows correctly. : venció_humano
Can anybody please tell me how to fix this?
Thanks alot!
I think you should put character encoding in head tag of the page.
<meta charset="UTF-8">
Thanks
The following code working fine.
var mytext = '';
var color = "black";
mytext += '<tr style="color:grey;">';
mytext += '<td style="color:blue;"> <a onclick=\'load_iframe(7 ,"venci\u00f3_humano");\'>';
mytext += $('<div/>').html('venci\u00f3_humano').text();
mytext += '</a> </td>';
mytext += '</tr>';
$('#events_table').append(mytext);
jsfiddle
Trying to print my htmlString in the .listing div but I'm only getting the last item in the array, yet the console.log loops correctly. what gives?
$.each(json.products, function(index, product) {
// build product block
var htmlString = '<div class="product large-3 columns">';
//open imgwrap
htmlString += '<div class="imgwrap">';
//get img src
htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '#2x.jpg" />';
// close imgwrap
htmlString += '</div>';
// open textwrap
htmlString += '<div class="textwrap">';
// get productName
htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
// get itemCode
htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
// get description
// get price
// close divs
htmlString += '</div>';
console.log(htmlString);
$('.listing').html(htmlString);
}); //end each
You are overriding the contents of listing in each iteration, instead you need to append the contents.
When you use .html() it will remove the current contents of the element, then replace it with the passed content. To add the new content after the existing one you can use .append()
If you want to clear the listing element, you can do it before the beginning of the loop as shown below
$('.listing').html(''); //clear the listing element if needed
$.each(json.products, function(index, product) {
// build product block
var htmlString = '<div class="product large-3 columns">';
//open imgwrap
htmlString += '<div class="imgwrap">';
//get img src
htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '#2x.jpg" />';
// close imgwrap
htmlString += '</div>';
// open textwrap
htmlString += '<div class="textwrap">';
// get productName
htmlString += '<h1 class="product_headline">' + product.productName + '</h1>';
// get itemCode
htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
// get description
// get price
// close divs
htmlString += '</div>';
console.log(htmlString);
$('.listing').append(htmlString); //add the current content to existing one
}); //end each
With .html() you're replacing the contents after each loop. Instead, append:
$('.listing').html(htmlString);
becomes:
$('.listing').append( $(htmlString) );
I am trying to use the javascript object model to retrieve a list of users/groups for a list and their permissions at the list level. So far I have this which returns a member object but I cant get any information about the member. When I try to use rAssignment.get_member().get_id(), or rAssignment.get_member().get_title() I get an error.
//Get List Permissions
function getListPerms() {
var clientContext = new SP.ClientContext();
var siteColl = clientContext.get_site();
var site = clientContext.get_web();
listSecurableObject = site.get_lists().getByTitle($("[name='ListSlct']").val());
listRoleAssignments = listSecurableObject.get_roleAssignments();
clientContext.load(listRoleAssignments);
clientContext.executeQueryAsync(Function.createDelegate(this, this.getListPerms_onQuerySucceeded),Function.createDelegate(this, this.getListPerms_onQueryFailed));
}
function getListPerms_onQuerySucceeded() {
var listPerms="";
listPerms += '<table border="1">';
listPerms += '<tr>';
listPerms += '<td align="center">ID</td>';
listPerms += '</tr>';
var listPermsEnumerator = this.listRoleAssignments.getEnumerator();
while (listPermsEnumerator.moveNext()) {
var rAssignment = listPermsEnumerator.get_current();
listPerms += '<tr>';
listPerms += '<td align="center">' + rAssignment.get_member() + '</td>';
listPerms += '</tr>';
}
listPerms += '</table>';
document.getElementById('listPermsTable').innerHTML = listPerms;
}
function getListPerms_onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
Try changing your clientContext.load() function call as follows:
clientContext.load(listSecurableObject, 'Include(RoleAssignments, RoleAssignments.Include(Member))');
Now in the getListPerms_onSucceeded() method you ought to be able to enumerate through listSecurableObject.get_roleAssignments() and get the members similar to how you're already doing it (although you'll probably want to use rAssignment.get_member().get_loginName() ).