I have an old greasemonkey script that used to start refreshing pages on new tab:
// ==UserScript==
// #name script
// #namespace http://localhost
// #description Monitor the location page and catch the egg you want.
// #include http://192.168.10.1/index/*
// #version 1
// #grant none
// ==/UserScript==
var container = document.getElementsByClassName("A");
for (var l = 0; l < container.length; l++) {
container[l].setAttribute('id', 'A');
var A = document.getElementById("A");
var divs = A.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if ((divs[i].innerHTML.indexOf("failure") != -1) || (divs[i].innerHTML.indexOf("error") != -1)) {
var div = divs[i];
var link = divs[i].innerHTML.href;
for (var b = 0; b < div.childNodes.length; b++) {
var test = div.childNodes[0].href;
//window.location.href = test;
open_in_new_tab(test);
}
}
}
}
setTimeout(function () { window.location.href = window.location.href }, 800);
function open_in_new_tab(url )
{
var win=window.open(url, '_blank');
win.focus();
}
I cant get it to work anymore, I assume that since firefox 57+ some features have changed,
Is it possible to fix/debug this, so that it'll work again?
the relevant html im trying to run this on:
<!DOCTYPE html>
<html>
<head><title></title>
<link rel="mask-icon" href="//s.192.168.10.1/mask-icon.svg" color="#990e0e">
<link type="text/css" rel="stylesheet" href="//s.192.168.10.1/cache/css/e/etsmpm.css" data-modules="1k">
<link type="text/css" rel="stylesheet" href="//s.192.168.10.1/cache/css/c/cze0ax.css" data-modules="3q">
<link type="text/css" rel="stylesheet" href="//s.192.168.10.1/cache/css/1/1vbpas.css" data-modules="1c,1e,1,3h,3g,3n,3o,3p">
</head><body class="_3q_7">
<div class="_3p_0">
<div class="_3o_6">
<h1 class="_3o_1">
<a href="/?r=1">
<img src="//s.192.168.10.1/cache/images/b/bvi5yh.png" alt="Apache" width="388" height="120">
</a></h1><div class="_3o_3"> Logged in as Test
<span title="No unread notifications" class="_3g_3" id="95f64d6ba8"><i class="_3h_0 _3h_4"></i></span>
787<i class="_3h_0 _3h_b"></i>
<span title="Night:" class="_3g_3 _3h_0 _3h_2" id="c1f1299e22"></span> 3:07 am EST
Log out
</div><div class="_3o_9">
Route
Account
Items
Trading
Help
Forum
</div></div>
<div class="_3p_6"></div>
<div class="_3p_7">
<div id="middle">
<h1>Index2</h1>
<ul class="_1k_0"><li>
index5</li>
<li>index1</li>
<li style="font-weight:bold">
index2</li><li>index3</li><li>index4</li><li>index6</li></ul><section>
<div class="A" id="44c39a0cc4"><div><a aria-labeledby="ef21da66ab" href="/get/22eKE"><img src="//s.192.168.10.1/cache/images/8/8itcaf.gif" alt="A" width="26" height="28"></a><br>
<span id="ef21da66ab">valid deascription</span></div><div><a aria-labeledby="1d460c3daf" href="/get/tg9ZF">
<img src="//s.192.168.10.1/cache/images/8/8itcaf.gif" alt="A" width="26" height="28"></a><br>
<span id="1d460c3daf">valid description</span></div><div><a aria-labeledby="1758a88110" href="/get/1qRTn">
<img src="//s.192.168.10.1/cache/images/8/8itcaf.gif" alt="A" width="26" height="28"></a><br>
<span id="1758a88110">error</span></div></div><div class="online">Users viewing this page: 1</div>
</section>
<noscript><a href="https://secure.fastclick.net/w/click.here?sid=68085&m=1&c=1" target="_blank">
<img src="https://secure.fastclick.net/w/get.media?sid=68085&m=1&tp=5&d=s&c=1&vcm_acv=1.4" style="width:728px;height:90px"></a></noscript>
</ins></div><div class="_3p_5">
</div></div></div><div class="_3p_8"></div>
</div><script>window.onerror=function(b,c,d,e,a){navigator.sendBeacon("/el",JSON.stringify([b,c,d,e,a&&a.stack]))};window.onbeforeunload=function(){delete window.onerror};(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create","UA-2864033-4","auto");ga("set","dimension1","new");ga("set","userId",89632);ga("send","pageview");!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version="2.0";n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,"script","https://connect.facebook.net/en_US/fbevents.js");fbq("init","1405173446393356");fbq("track","PageView");</script><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1405173446393356&ev=PageView&noscript=1"></noscript><script src="//s.192.168.10.1/cache/js/c/c7yxzl.js" crossorigin="anonymous" defer></script><script>window.addEventListener('DOMContentLoaded',function(){global=window;require.config({"enforceDefine":true,"waitSeconds":60,"paths":{"1mh":"\/\/s.192.168.10.1\/cache\/js\/9\/9xrboc","2":"\/\/s.192.168.10.1\/cache\/js\/2\/2mcg3g","1cc":"\/\/s.192.168.10.1\/cache\/js\/7\/7y8rpz","1gi":"\/\/s.192.168.10.1\/cache\/js\/a\/a1ys2f","1gn":"\/\/s.192.168.10.1\/cache\/js\/8\/8zhrpq","b":"\/\/s.192.168.10.1\/cache\/js\/a\/asqoew"},"bundles":[]});require(["1mh"],function(_){_.i(document.getElementById('44c39a0cc4'))});require(["1cc"],function(_){_.init()});require(["1gi"],function(_){_.bindToElement(document.getElementById('95f64d6ba8'),"auto")});require(["1gi"],function(_){_.bindToElement(document.getElementById('c1f1299e22'),"auto")});require(["b"],function(_){_.init(document.getElementById('75079eec42'))});})</script></body></html>
when i tried running it vie firefox console it did find the text and open the link in new tab
i just cant get it to refresh and repeat the process with greasemonkey
There are issues with the script post in your post.
What is stuff as it would break the code?
What is the use of open_in_new_tab() as it is not used?
800 means 800 milliseconds. It is impractical to reload a page every 0.8 of a second as it would often take longer to load a page.
Here is a simple example...
// ==UserScript==
// #name script
// #namespace http://localhost
// #description Monitor the location page and catch the egg you want.
// #match http://192.168.10.1/index/*
// #version 1
// #grant none
// ==/UserScript==
setTimeout(function() { location.reload(); }, 5000);
Please note that some pages can interfere with reload() for example with unload event.
Update on Comment
Here is an example userscript ...
// ==UserScript==
// #name script
// #namespace http://localhost
// #description Monitor the location page and catch the egg you want.
// #include http://192.168.10.1/index/*
// #version 1
// #grant none
// ==/UserScript==
setTimeout(function() { location.reload(); }, 2000); // relaod after 2 seconds
document.querySelectorAll('.A div').forEach(item => { // get all div in class A
if(/failure|error/.test(item.textContent)) { // test div content
const a = item.querySelector('a'); // get link in div
a && openInTab(a.href); // if found, open in new tab
}
}):
function openInTab(url) {
const win = window.open(url, '_blank');
win.focus();
}
Related
I am working on a project with Django, for a restaurant management system. I wanted to use an autocomplete feature to take orders at the table.
As far as I understand JQueryUI function autocomplete() is what I need.
However I cannot seem to get it to work.
Following is my my HTML code for the page. It works in such a way that once the number of people in the party is inserted the same number of form input fiels is inserted in the table by a Javascrip script.
addOrder.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src={% static "js/jquery-3.3.1.min.js" %}></script>
<script src={% static "js/jquery-ui.min.js" %}></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src={% static "js/createOrderIn.js" %}> </script>
<script type="text/javascript" src={% static "js/autocompleteDrink.js" %}></script>
<script type="text/javascript" src={% static "js/autocompleteMenu.js" %}></script>
<style>
.move {
margin: 30px;
}
</style>
<title>Add Order</title>
</head>
<body>
<div class="move">
<form action="/orders/addOrder" method="post" id="the-form" class="ui-widget">
<label> Party of </label>
<input type="text" id="people">
<input type="submit" class="btn btn-primary" value="Submit order">
</form>
</div>
</body>
</html>
This is the script I use to spawn new form input fields
createOrderIn.js
$(document).ready(function () {
var previous = 0;
var considered = 0;
$("#people").keyup(function ( ) {
var actual = this.value;
if(actual==null){
actual=1;
}
var toAdd = actual-previous;
previous = actual;
if(toAdd > 0){
for(var i=0; i<toAdd; i++){
considered+=1;
var htmlToAdd = $("<div class="+considered+"><input type=\"text\" name=\"menu_"+considered+"\" id=\"menu\"><input type=\"text\" name=\"drink_"+considered+"\" value=\"No drink\" id=\"drink\"><br></div>");
$("#the-form").append(htmlToAdd);
}
}
else{
for(var j=0; j<(-1*toAdd); j++) {
if (considered > 0) {
$("."+considered).remove();
considered -= 1;
}
}
}
});
});
The following are the relative Python/Django files
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.ordersIndex, name = "index"),
path('changeStatus/<int:pk>', views.changeStatus, name="changeStatus"),
path('addOrder', views.addOrder, name="addOrder"),
path('addOrderRender', views.addOrderRender, name="addOrderRender"),
path('getDrinks', views.getDrinks, name="getDrinks"),
path('getMenus', views.getMenus, name="getMenu"),
]
views.py (only function getMenus())
def getMenus(request):
print("I am called")
if request.is_ajax():
q = request.GET.get('term', '')
menus = Menu.objects.filter(name__contains=q)
results=[]
for menu in menus:
menu_json = {}
menu_json['name'] = menu.name
menu_json['n_courses'] = menu.number_of_courses
menu_json['price'] = menu.price
results.append(menu_json)
data = json.dump(results)
else:
data = 'fail'
mimetype = 'application/json'
return HttpResponse(data, mimetype)
And lastly this is the function that is supposed to use JQueryUI to make the ajax call and retrieve the possible menu's
autocompleteMenu.js
$(function() {
$("#menu").autocomplete({
source: "/orders/getMenus/",
});
});
As you can probably see from the getMenus() function in views.py I also print a check line ("I am called"), which sure enough does not get printed on console. Also even by switching the autocomplete() source parameter to a local array there is no result.
I do feel like I am doing some very naive mistake but I really cannot seem to figure it out (I am also pretty new with JQuery).
I think the error should be in the provided files, but I'll be happy to post edits in just in case
Thank you in advance!
I realized that the problem was due to the fact that I had to bind autocomplete to the id of the newly created id's (which I changed to classes). Also the JSON data must have a lable field, (and I had to use json.dumps(), not json.dump() :p).
The followings did the trick:
createOrderIn.js
$(document).ready(function () {
var previous = 0;
var considered = 0;
$("#people").keyup(function ( ) {
var actual = this.value;
if(actual==null){
actual=1;
}
var toAdd = actual-previous;
previous = actual;
if(toAdd > 0){
for(var i=0; i<toAdd; i++){
considered+=1;
var htmlToAdd = $("<div class="+considered+"><input type=\"text\" name=\"menu_"+considered+"\" class=\"menu\"><input type=\"text\" name=\"drink_"+considered+"\" value=\"No drink\" class=\"drink\"><br></div>");
$("#the-form").append(htmlToAdd);
$('#the-form').find('input[class=menu]:last').autocomplete({
source: "/orders/getMenus"
});
$('#the-form').find('input[class=drink]:last').autocomplete({
source: "/orders/getDrinks"
});
}
}
else{
for(var j=0; j<(-1*toAdd); j++) {
if (considered > 0) {
$("."+considered).remove();
considered -= 1;
}
}
}
});
});
views.py
def getDrinks(request):
if request.is_ajax():
q = request.GET.get('term', '')
drinks = Drink.objects.filter(name__contains=q)
results=[]
for drink in drinks:
drink_json = {}
drink_json['label'] = drink.name
results.append(drink_json)
data = json.dumps(results)
else:
data = 'fail'
mimetype = 'application/json'
return HttpResponse(data, mimetype)
def getMenus(request):
if request.is_ajax():
q = request.GET.get('term', '')
menus = Menu.objects.filter(name__contains=q)
results=[]
for menu in menus:
menu_json = {}
menu_json['label'] = menu.name
menu_json['id'] = menu.number_of_courses
results.append(menu_json)
data = json.dumps(results)
else:
data = 'fail'
mimetype = 'application/json'
return HttpResponse(data, mimetype)
I am about to integrate svg-edit to an ASP.NET MVC project.
Is there anyone who has a recommendation or tutorial on how to begin with?
Thank you.
I am answering my own question.
After a research, I recommend deploying the whole SVG-EDIT lib into mvc architecture, then modify the embed api as following:
This is my Partial View and JS file that call the embed api and put it into the iframe within the partial view:
document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
// Make sure to add the embedapi into the html file, becuase the intialization function runs actually in that file, all this call does is basically to take the iframe from html and inialize the api within that tag.
$(document).ready(function () {
// jquery selectro
$("#LoadSVG").click(function () {
$("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
});
});
#Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</header>
<input id="LoadSVG" type="button" value="LoadSVG" />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
<p id="svg"></p>
<p id="DivData"></p>
<p id="TestId"></p>
<p id="SavedData"></p>
</body>
</html>
Here I have a save and load functions ready for the module: There is so much work to do in order to perfect the algorithm, but since this was just a test project to figure out the possibility of integrating the module into the environment I put enough effort to understand that share the knowledge with the community:
Here is my cshtml file:
#Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
</header>
<input id="LoadSVG" type="button" value="LoadSVG" />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
<p id="svg"></p>
<p id="DivData"></p>
<p id="TestId"></p>
<p id="SavedData"></p>
</body>
</html>
Here is the js file:
document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
document.write("<script src='~/Scripts/jquery-1.10.2.js'></script>");
$(document).ready(function () {
// jquery selectro
$("#LoadSVG").click(function () {
$("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
});
});
$(document).ready(function () {
// jquery selectro
$("#save1").click(function () {
$("#DivData").append("<b>Appended text</b>");
});
});
$(document).ready(function(){
$("#CloseSVG").click(function () {
$("#svg").hide();
});
});
function HandleSvgData(data,error) {
if (error) {
alert('Error:' + error);
} else {
$('#DivData').append(data);
alert(data);
}
}
function handleSvgData(data, error) {
alert("handling Data");
if (error) {
alert('error ' + error);
} else {
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
}
}
function save1() {
alert("saving");
// svgCanvas.getSvgString()(handleSvgData);
$("#svgedit").append($('This is the test classed appended after DivDat'));
}
function AddNewElemnt()
{
var newElement = document.createElement("Test");
var newNode = document.createTextNode("This is my new node!");
newElement.appendChild(newNode);
var referenceElement = document.getElementById("mainBody");
var tagInsert = document.getElementById("TestId");
referenceElement.insertBefore(newElement, tagInsert);
// alert("added");
}
function Postt(data) {
}
function Post(data) {
var mainBody = document.getElementById("mainBody");
var SvgDataId = prompt("give me primary id");
var SvgUser = prompt("give me UserName");
var form = document.createElement("form");
form.setAttribute("id", "PostData");
form.setAttribute("action", "/SvgDatas/Create");
form.setAttribute("method", "post");
mainBody.appendChild(form);
var PostData = document.getElementById("PostData");
var InputSvgDataId = document.createElement("input");
InputSvgDataId.setAttribute("name", "SvgDataId");
InputSvgDataId.setAttribute("value", SvgDataId);
PostData.appendChild(InputSvgDataId);
var InputSvgUser = document.createElement("input");
InputSvgUser.setAttribute("name", "SvgUser");
InputSvgUser.setAttribute("value", SvgUser);
PostData.appendChild(InputSvgUser);
var InputData = document.createElement("input");
InputData.setAttribute("name", "Data");
InputData.setAttribute("value", data);
PostData.appendChild(InputData);
form.submit();
}
function save() {
var doc, mainButton,
frame = document.getElementById('svgedit');
svgCanvas = new EmbeddedSVGEdit(frame);
// Hide main button, as we will be controlling new, load, save, etc. from the host document
doc = frame.contentDocument || frame.contentWindow.document;
mainButton = doc.getElementById('main_button');
mainButton.style.display = 'none';
// get data
svgCanvas.getSvgString()(function handleSvgData(data, error) {
if (error) {
alert('error ' + error);
} else {
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
Post(data);
}
});
}
/*
function BuidUrl(SVGUser) {
var uri = prompt("Give me url where the serach function lives, if empty then I will use Razor syntax to call within MVC architescture");
if (uri)
return uri;
else {
var urlHelper = ('http://localhost:53546/SvgDatas/Search?id='+SVGUser);
return urlHelper;
}
}
*/
function returnedData_IntializeEditor(data, status) {
if ((data != null) && (status == "success")) {
var frame = document.getElementById('svgedit');
svgCanvas = new EmbeddedSVGEdit(frame);
doc = frame.contentDocument || frame.contentWindow.document;
mainButton = doc.getElementById('main_button');
tool_Bottum = doc.getElementById("#tool_button");
mainButton.style.display = 'none';
// Open Data into the frame
// var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1<\/title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/><\/g><\/svg>';
svgCanvas.setSvgString(data.Data);
} else {
$("#svg").append("<li>There is not such a data available in the database!</li>");
}
}
function LoadExample() {
var SVGUser = prompt("Enter the SVG ID");
$.getJSON("http://localhost:53546/SvgDatas/Search?id=" + SVGUser, returnedData_IntializeEditor );
}
This is the model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace IntegrationOfSVG.Models
{
public class SvgData
{
public string SvgDataId { get; set; }
public string SvgUser { get; set; }
public string Data { get; set; }
}
}
Thank you SVG-EDIT community for the great tool.
Next I am planning to add a view mode to this module that opens the data from a sequal server and if the mode is admin, lets the user to edit the existing data. I will keep this posted updated.
1- One way is to remove the tools from the client side, but it has a certain limitation that is the fact that css does not adjust a
function RemoveTools() {
var frame = document.getElementsByClassName("iFrameHtmlTag")[0];
doc = frame.contentWindow.document;
if (doc != null) {
var Tools = [
'tools_top', 'tools_left', 'tools_bottom', 'sidepanels', 'main_icon', 'rulers', 'sidepanels', 'canvashadow'];
for (i=0; i<Tools.length;i++)
{
doc.getElementById(Tools[i]).style.display = "none";
}
} else
alert("Doc was null");
};
$(document).ready(function () {
$("#hide").click(function () {
RemoveTools();
});
});
It is an effective way, but there should be a better method to view the object with few parameters also to readjust the size of the window. I will continue with that topic too.
Please I am working on a project that needs to get photo from phone camera and fill two text boxes and upload them to remote server using cordova/phonegap. I have tried this for weeks now without luck. I'm building on android platform. thanks in advance.
Create two functions you can call separately. One function for just getting the image, and another function to upload the image.
You can do something like below.
<!DOCTYPE html>
<html>
<head>
<title>Submit form</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Show the selected image
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = imageURI;
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function uploadPhoto() {
//selected photo URI is in the src attribute (we set this on getPhoto)
var imageURI = document.getElementById('smallImage').getAttribute("src");
if (!imageURI) {
alert('Please select an image first.');
return;
}
//set upload options
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType = "image/jpeg";
// this will get value of text field
options.params = {
firstname: document.getElementById("firstname").value,
lastname: document.getElementById("lastname").value,
workplace: document.getElementById("workplace").value
}
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
}
// Called if something bad happens.
//
function onFail(message) {
console.log('Failed because: ' + message);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
//alert("Response =" + r.response);
console.log("Sent = " + r.bytesSent);
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
</script>
</head>
<body>
<form id="regform">
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Select Photo:</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
First Name: <input type="text" id="firstname" name="firstname"><br>
Last Name: <input type="text" id="lastname" name="lastname"><br>
Work Place: <input type="text" id="workplace" name="workPlace"><br>
<input type="button" id="btnSubmit" value="Submit" onclick="uploadPhoto();">
</form>
</body>
</html>
This code is working for me. Hope this helps.!
There is a file transfer plugin (which you may or may not be trying to use; you gave NO details) for such things. Or you can use straight javascript, ignoring cordova/phonegap completely. The details will depend a fair bit on how the service expects to be interacted with.
I am using below code to share link on google plus.
<html>
<head>
<script type="text/javascript">
window.onPlusStart = function(x) {
console.log('ops', x)
}
window.onPlusDone = function(x) {
console.log('opd', x)
}
</script>
</head>
<body>
<div class="g-plus" data-action="share" data-href="http://test.com"
data-onstartinteraction="onPlusStart"
data-onendinteraction="onPlusDone">
</div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
ISSUE : Right now i am getting response four times in console log for onPlusDone at the time of successfully share(response 1 : before login window, response 2 : after close login window, response 3 : after close login window, response 4 : after share successfully).
But i need response only one after successfully share.
Does someone know if Strobe Media Playback (OSMF) has events like:
Streaming is ended
Streaming is started
Streaming error
in order to access it via JavaScript?
I have tried this but no joy.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Strobe Media Playback</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
// Create a StrobeMediaPlayback configuration
// http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv
// http://osmf.org/dev/1.6-sprint-2/hello-world-jquery-plugin.html#
var parameters =
{
src: "http://stream.flowplayer.org/bauhaus/624x260.mp4"
, autoPlay: true
, controlBarAutoHide: false
, javascriptCallbackFunction: "onJavaScriptBridgeCreated"
};
// Embed the player SWF:
swfobject.embedSWF
( "StrobeMediaPlayback.swf"
, "strobeMediaPlayback"
, 640
, 480
, "10.1.0"
, {}
, parameters
, { allowFullScreen: "true"}
, { name: "strobeMediaPlayback" }
);
function completeFunc(time, playerId) {
//var player = document.getElementById(playerId);
alert("!!!");
}
function onCurrentTimeChange(time, playerId)
{
document.getElementById("currentTime").innerHTML = time;
}
function onDurationChange(time, playerId)
{
document.getElementById("duration").innerHTML = time;
}
var player = null;
function onJavaScriptBridgeCreated(playerId)
{
if (player == null) {
player = document.getElementById(playerId);
// Add event listeners that will update the
player.addEventListener("currentTimeChange", "onCurrentTimeChange");
player.addEventListener("durationChange", "onDurationChange");
player.addEventListener("complete", "completeFunc");
// Pause/Resume the playback when we click the Play/Pause link
document.getElementById("play-pause").onclick = function(){
var state = player.getState();
if (state == "ready" || state == "paused") {
player.play2();
}
else
if (state == "playing") {
player.pause();
}
return false;
};
}
}
</script>
</head>
<body>
<div>
<div>
<span id="currentTime" /> ... </span> : <span id="duration" /> ... </span>
</div>
<a href="#" id="play-pause">Play/Pause</div>
</div>
<div id="strobeMediaPlayback">
<p>Alternative content</p>
</div>
</body>
</html>
Thanks!
P.S. As I can see here we can use STATE variable to detect the end of the video.
So in the end of the video it goes to "PAUSED". Can we use it in this manner?
UPDATE:
I found that onJavaScriptBridgeCreated method doesn't triggering.
The same happens with all examples of SMP.
Any clue?
there it is.
function changeVidSrc(url, posterUrl, id, width, height, autoplay) {
var flashvars =
{
src: url,
autoPlay: autoplay,
controlBarAutoHide: true,
poster: posterUrl,
skin: 'skinPath', //i just needed skin, remove if not needed
javascriptCallbackFunction: "onJavaScriptBridgeCreated"
};
var parameters = { allowFullScreen: "true"};
var attributes = { name: id };
// Embed the player SWF:
swfobject.embedSWF
('/swfs/StrobeMediaPlayback.swf',
id, width, height,
"10.1.0",
'',
flashvars,
parameters,
attributes
);
}
Some important details:
1. i couldn't let it debug with firebug correctly. i can't understand behaviour.
2. passing name in attributes object is important for FF. otherwise callback triggers, but no events handled
i would also advise to put global var player and handler functions on top.
Streaming is ended:
var onJavaScriptBridgeCreated = function (event) {
if (event === ''onJavaScriptBridgeCreated'') {
var player = document.getElementById('the id of the object tag');
var callback = function(event){console.log(event);};
//stopped
player.addEventListener("complete", "callback");
//started
player.addEventListener("playStateChange", "callback");
//error
player.addEventListener("mediaError", "callback");
}
}