Develop Reference

Dynamically adding multiple events to multiple webviews

Im new to using Electron and also kinda new to using the webview tag, so I pre-apologize for maybe not knowing something really obvious.
Im trying to dynamiclly create web views and add the following events to them.
did-start-loading
did-stop-loading
did-finish-load
page-title-updated
dom-ready
Im using a mix of Jquery and pure javascript to do this but currently im not having much luck. I have attached my code below so you can try find anything obvious there. Im not getting any javascript errors in the debug menu but at the same time none of it seems to be working.
function AddTab(URL){
tabcount++;
var NewTab = '<li href="#content-' + tabcount + '" id="tab' + tabcount + '" class="current"><img src="System_Assets/icons/Logo.png" /><span>Tab Home</span><a class="TabClose" href="#"></a></li>';
var NewContent = '<div id="content-' + tabcount + '" class="ContentHolder" style="display:block;"><webview id="webview-content-' + tabcount + '" src="http://www.ohhaibrowser.com"></webview></div>';
ChangeCurrent("");
//Hide current tabs
$(".ContentHolder").css("display", "none");
//Show new tab
$("#tabs-menu").append(NewTab);
$("#BrowserWin").append(NewContent);
$("#CurWebWin").val("webview-content-" + tabcount);
AddListeners("webview-content-" + tabcount,"tab" + tabcount);
UpdateTabCount();
}
function UpdateTabCount(){
$("#HideShow").text(tabcount);
}
function AddListeners(webview,tabid)
{
element = document.getElementById(webview);
element.addEventListener("did-start-loading", function() {
loadstart(tabid);
});
element.addEventListener("did-stop-loading", function() {
loadstop(tabid,webview);
});
element.addEventListener("did-finish-load", function() {
loadstop(tabid,webview);
});
element.addEventListener("page-title-updated", function() {
loadstop(tabid,webview);
});
element.addEventListener("dom-ready", function() {
domloaded(tabid,webview);
});
}
function loadstart(tabid)
{
$("#" + tabid + " span").val('Loading...');
//$("#" + tabid + " img")
}
function loadstop(tabid, webview)
{
$("#" + tabid + " span").val('');
}
function domloaded(tabid, webview)
{
element = document.getElementById(webview);
$("#" + tabid + " span").val(element.getURL());
}

You have to set Preload call to make change in Webview
browser.html
<script src="browser.js"></script>
<webview src="https://www.google.com/watch?v=1osdnKzj-1k" preload="./inject.js" style="width:640px; height:480px"></webview>
create sample js file name called inject.js
inject.js
__myInjection={
onloada : function() {
var script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-2.1.4.min.js";
$("#header").html('<h1>Sample work</h1>\
<p>Hello, Google</p>\
Click me');
document.body.appendChild(script);
}
}
now in browser.js
onload = function() {
var webview = document.querySelector('webview');
webview.addEventListener("dom-ready", function(){
webview.executeJavaScript('__myInjection.onloada ()')
// webview.openDevTools();
});
doLayout();

How can i dynamically pass variables to a PHP script call within setInterval function?

I have a script here that is supposed to load a php script output into a specified 'div' within set intervals, and be able to apply filters by means of sending values from two 'select' lists to that script.
I have realized the first thing with some help from another topic here on Stack, it's listed in $(document).ready() event. But then i have $("#status_filter").change() and $("#car_filter").change() events. They are supposed to first stop refreshId interval function, then change variables that i am supposed to send to PHP script, reload content with changed variables and start refreshId loop again. As a result, i have the loop working with zero values, but browser doesn't react to selecting options from the list. I've been playing with the code parts for a while now, but to no avail. Please, help me if you can.
var status_filter = 0;
var car_filter = 0;
$("#status_filter").change(function() {
clearInterval(refreshId);
status_filter = $(this).val();
$("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
var refreshId = setInterval(function() {
$("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
}, 30000);
});
$("#car_filter").change(function() (
clearInterval(refreshId);
car_filter = $(this).val();
$("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
var refreshId = setInterval(function() {
$("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
}, 30000);
});
$(document).ready(function() {
$("#filterBar").load("get_filters.php");
$("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
var refreshId = setInterval(function() {
$("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
}, 30000);
});
I have this script placed in the page's head 'head' tag. I haven't checked yet if placing all script in a separate file and linking it could help, though. I also fear that believing in js keeping it's variables alive until the page's closed or browser is shut down is wrong.

Have you tried setTimeout()? You can create an easy looping function using this. The code below will print out a number every second, then call itself again.
$(function() {
var counter = 0;
var loop = function() {
setTimeout(function() {
$('body').append(++counter);
loop();
}, 1000);
}
loop();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This can be tailored for you to a looping function like this:
function loop(status, car) {
//Check Values of status and car, set defaults otherwise.
setTimeout(function() {
$("#content").load("get_orders.php?status=" + status + "&car=" + car);
loop();
}, 1000);
}

jQuery getting .preventDefault() to work on generated elements

I'm having a bit of a problem with getting the .preventDefault to work on some elements I am generating via JQuery.
I am getting a JSON file using the following code and putting the data into individual p elements:
$.getJSON(searchURL, function(data) {
$.each(data, function(key, value) {
if (typeof value === 'object') {
for (var i = 0; i < data.count; i++) {
var fullPlayerURL = "<p class='entry'>" + "<a href=" + playerURL + data.data[i].id + ">"
+ "Nickname - " + data.data[i].nickname + "</a>" + "</p>"
$('#results').append(fullPlayerURL);
}
}
});
}); //end getJSON
Then I'm using the following code to stop the link from redirecting when clicked (links to another JSON file):
$('.entry').click(function(event) {
event.preventDefault();
var linkClicked = $(this).attr("href");
console.log(linkClicked);
});
I don't know if it matters but #results is just an empty div.
Here's all the code if this isn't enough info (sorry it's such a mess).

You'll need delegated event handlers for dynamic elements
$('#results').on('click', '.entry', function(event){
event.preventDefault();
var linkClicked = $('a', this).attr("href");
console.log(linkClicked);
});

Sorry, I'm not allowed to comment on adeneo's answer.
For me var linkClicked = $('a', this).attr("href"); gives undefined.
I had to make var linkClicked = $(this).attr("href"); out of it.
Edit: Know it, I wanted to address the anchor.
$('#results').on('click', 'a', function(event) {
event.preventDefault();
var linkClicked = $(this).attr("href");
console.log(linkClicked);
});

Jquery Json not working properly

I have the following which works fine:
$('<li><a id=' + loc.locId + ' href="/DataEntry" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
$("#btnList a").click(function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
When I have the following, I can't even get to the click to display an alert message:
$.getJSON('/Home/GetLocType', { "locId": loc.locId }, function (result) {
var str = JSON.stringify(result);
if (str == '1') {
$('<li><a id=' + loc.locId + ' href="/DataEntry" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
} else {
$('<li><a id=' + loc.locId + ' href="/DataEntry/PotableForm" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
}
$("#btnList").listview('refresh');
});
$("#btnList a").click(function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
Note sure what the difference is. I need to use Json as based on value, I need to go to a either of the 2 hyperlinks.

Use event delegation since anchor is created dynamically in your ajax call or bind the event (only for the added element) inside the ajax success callback. on syntax will work if your jquery version >= 1.7 for earlier versions take a look at live
$("#btnList").on('click', 'a', function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
Your first syntax works because it binds the click event to the anchor that exists underneath btnList, but it doesn't bind event to the ones added during the ajax calls in a later point in time.

Reload all images on page

I'm trying to get all the images in the page to reload including backgound-image: rules
I have some semi working code but I want to know if there is an easier way of doing this.
function cacheBuster(url) {
return url.replace(/\?cacheBuster=\d*/, "") + "?cacheBuster=" + new Date().getTime().toString();
}
$("img").each(function() {
this.src = cacheBuster(this.src);
});
$("*").each(function() {
var bg_img = $(this).css("background-image");
if (bg_img !== "none") {
var url = /url\((.*)\)/i.exec(bg_img);
if (url) {
$(this).css("background-image", "url(" + cacheBuster(url[1]) + ")");
}
}
});

Looks fine but you are missing inputs with type=image, that is images that act as a submit button. You can include them by adding following code
$("img, input[type=image]").each(function() {
this.src = cacheBuster(this.src);
});
Also you can change the code where you loop through all elements, just to include visible ones, if it is acceptable in your case.
$("*:visible")
Hope this helps.