I am trying to build a simple page that allows someone to enter the tags they want and then select either to search for photos that contain all or any of the tags. I have referenced the flickr api page and know this should be accomplished through the "tag_mode" in the url. However this seems to return the same result regardless of what value i put in.
$(document).dblclick(function(e) {
e.preventDefault();
var str = $('input:text').val();
var topic = str.split(" ");
var selected = $('input[name=andOr]:checked', '#form').val();
var ajaxURL = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + topic + "&tag_mode=" + selected + "&format=json&jsoncallback=?";
$.getJSON(ajaxURL, function(data) {
$('h2').text(data.title);
$.each(data.items, function(i, photo) {
var photoHTML = '<span class="image">';
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m.replace('_m', '_m') + '"></a>';
$('#photos').append(photoHTML);
}); // end each
}); // end get JSON
$("form").hide();
});
<html>
<head>
<meta charset="UTF-8" />
<title>Flickr Popular Public Group Feed</title>
<link rel="stylesheet" type="text/css" href="css/c12.css" />
</head>
<body>
<div id="form">
<form>
<h1>query flickr for recent uploads of your choice!</h1>
<p>please enter the flickr tags you'd like to use in the search</p>
<input type="text" name="tags" />
<p>Please indicate the use of all tags or any tags; for and or or query</p>
<input type="radio" name="andOr" value="'all'" />all tags
<br />
<input type="radio" name="andOr" value="'any'" />any tags
<h1>click anywhere on the page to bring the pictures!</h1>
</form>
</div>
<div id="demo"></div>
<div id="pictures">
<div class="content">
<div id="photos"></div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>
The Flickr API lists the query string parameter name as "tag_mode", but in other references it is "tagmode". One works and the other does nothing, as demonstrated by the links below. In addition, OP's code incorrectly adds quotes around the tagmode value which causes it not to work.
ALL TAGS:
http://api.flickr.com/services/feeds/photos_public.gne?tags=elephant,jet,flower&tagmode=all&format=json
ANY TAG:
http://api.flickr.com/services/feeds/photos_public.gne?tags=elephant,jet,flower&tagmode=any&format=json
A very simple example to demostrate that it works.
<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<h3>Demo: Search Flickr images</h3>
Keywords: <input type="text" id="tags" value="flower elephant jet">
All: <input type="checkbox" id="tagmode" >
<button onClick="search();">Search</button>
<xmp id="stdout"></xmp>
<script type="text/javascript">
var script, url;
function search() {
url = '//api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=callback';
url += '&tags=' + (document.getElementById('tags').value || '').replace(/\s/g,',');
url += '&tagmode=' + ( document.getElementById('tagmode').checked ? 'all' : 'any' );
script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
}
function callback(data) {
document.getElementById('stdout').innerHTML = 'URL: ' + url + '\n' + JSON.stringify( data, null, '\t' );
}
</script>
</body>
</html>
Related
I want to recognize English text from the cat image. This is my source code. The output text is as follows. How to improve the recognition rate, making the string Vou will be converted to the string You, the string advrce will be converted to string advice.
<html>
<head>
<script src="https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js">
</script>
</head>
<body>
<input type="text" id="url" placeholder="Image URL" />
<input type="button" id="go_button" value="Run" />
<div id="ocr_results"> </div>
<div id="ocr_status"> </div>
<script>
function runOCR(url) {
Tesseract.recognize(url,{lang:'eng'})
.then(function(result) {
document.getElementById("ocr_results")
.innerText = result.text;
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
document.getElementById("go_button")
.addEventListener("click", function(e) {
var url = document.getElementById("url").value;
runOCR(url);
});
</script>
</body>
</html>
I am trying to submit a search request to the Wikipedia API using a form that is fulled out by the user. When the form is submitted, however, the page refreshes and nothing is done. I have tried to "preventDefault", and that did not get the job done. I will post my html and javascript code below (if my css is somehow helpful, I can of course supply that as well).
HTML:
<body>
<div class="random text-center">
<a target="_blank" href ="http://en.wikipedia.org/wiki/Special:Random">Get a Random Entry</a>
</div>
<br/>
<div class="text-center">
<form>
<input type="text" placeholder="search" id="search">
<input type="submit">
</form>
</div>
<div class="results">
</div>
</body>
Javascript:
$(document).ready(function(){
$('#search').submit(search());
function search(){
var value = ("#search").val();
//var value = "eggs";
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + value + "&utf8=&format=json&callback=?", function(json) {
json.query.search.forEach( function(val) {
var title = val.title;
var snippet = val.snippet;
titleURL = title.replace(/ /g, "_");
$(".results").append("<a target='_blank' href='https://en.wikipedia.org/wiki/" + titleURL +"'><div class='result'><div class='title'>" + title + "</div><br/><div class='snippet'>" + snippet + "</div></div></a><br/>")
});
var title = json.query.search[0].title;
var snippet = json.query.search[0].snippet;
});
};
});
codepen:
http://codepen.io/blarmon/pen/rrZzyB
I need a modal dialog to pop up when I select an option ("configure" option in my case) from a context menu(which originates from inside a jsplumb flowchart component). I have "userlogged.jsp" which is where the flowchart components appear. "demo.js" is where the context menu function resides. "index.jsp" has just the modal that I need to be displayed on top of the contents of userLogged.jsp.
This is part of demo.js
$(function() {
$.contextMenu({
selector : '.context-menu-one',
callback : function(key, options) {
$(document)
.ready(
function() {
fromMenu();
});
if (key == "configure") {
fromMenu();
}
},
items : {
"configure" : {
name : "configure",
icon : "edit"
},
"delete" : {
name : "Delete",
icon : "delete"
}
}
});
});
This is index.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en"
data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more." />
<meta name="author"
content="ZURB, inc. ZURB network also includes zurb.com" />
<meta name="copyright" content="ZURB, inc. Copyright (c) 2015" />
<link rel="stylesheet" href="src/css/foundation.css" />
<script src="src/js/modernizr.js"></script>
<script src="src/js/jquery.js"></script>
<script type="text/javascript">
$(document)
.ready(
function() {
$('#firstModal').foundation('reveal', 'open');
//checks for the button click event
$("#sec")
.click(
function(e) {
var username = $("input#username")
.val();
var root = $("input#root").val();
var password = $("input#password")
.val();
var db = $("input#db").val();
var port = $("input#port").val();
dataString = "username=" + username
+ "&root=" + root
+ "&password=" + password
+ "&db=" + db + "&port="
+ port;
$.ajax({
type : "GET",
url : "DbInformation",
data : dataString,
success : function(data) {
var data = JSON.parse(data);
alert(data);
console.log(data.length);
$("#countrytable").find("tr:gt(0)").remove();
var table1 = $("#countrytable");
for ( var i = 0; i < data.length; i++) {
var rowNew = $("<tr><td></td></tr>");
rowNew.children().eq(0).html(("<select id='tabl' name=mytextarea size=3 height = '20px' ><option name=one value="+data[i]+">"+ data[i] + "</option></select>"));
rowNew.appendTo(table1);
}
}
});
});
$("#third").click(
function(e) {
var tabl = $("#tabl").val();
var username = $("input#username").val();
var root = $("input#root").val();
var password = $("input#password").val();
var db = $("input#db").val();
var port = $("input#port").val();
dataString = "username=" + username
+ "&root=" + root + "&password="
+ password + "&db=" + db + "&port="
+ port + "&tabl=" + tabl;
$.ajax({
type : "GET",
url : "DbInformation",
data : dataString,
success : function(data) {
var data = JSON.parse(data);
alert(data);
var dd = "";
console.log(data.length);
$("#columns").find("tr:gt(0)").remove();
var table1 = $("#columns");
for ( var i = 0; i < data.length; i++) {
var rowNew = $("<tr><td></td></tr>");
rowNew.children().eq(0).html(("<select id='tabl' name=mytextarea size=3 height = '20px' ><option name=one value="+data[i]+">"+ data[i] + "</option></select>"));
rowNew.appendTo(table1);
}
}
});
});
});
</script>
</head>
<body>
<div id="firstModal" class="reveal-modal tiny" data-reveal>
<h2>Properties.</h2>
<p>
Username : <input type="text" id="username" name="username"
value="">
</p>
<p>
root : <input type="text" id="root" name="root" value="">
</p>
<p>
password : <input type="text" id="password" name="password"
value="">
</p>
<p>
db : <input type="text" id="db" name="db" value="">
</p>
<p>
port : <input type="text" id="port" name="port" value="3306">
</p>
<p>
<a href="#" id="sec" data-reveal-id="secondModal"
class="secondary button">Next</a>
</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="secondModal" class="reveal-modal tiny" data-reveal>
<h2>This is a second modal.</h2>
<table id="countrytable">
<tr>
<th scope="col">Table name</th>
</tr>
</table>
<p>
<a href="#" id="third" data-reveal-id="thirdModal"
class="third button">Next</a>
</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="thirdModal" class="reveal-modal tiny" data-reveal>
<h2>This is a second modal.</h2>
<table id="columns">
<tr>
<th scope="col">Column name</th>
</tr>
</table>
<p>
<a href="#" id="fourth" data-reveal-id="thirdModal"
class="fourth button">Finish</a>
</p>
<a class="close-reveal-modal">×</a>
</div>
<script src="src/js/foundation.js"></script>
<script src="src/js/foundation.tab.js"></script>
<script src="src/js/foundation.reveal.js"></script>
<script>
$(document).foundation();
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
</body>
</html>
How do I get this modal that is generated in index.jsp to appear on top of userlogged.jsp on click of the configure option in the context menu defined in demo.js
If you want the modal dialog over the contents of "userlogged.jsp", then I think you should put the code (for the modal dialog) in that page itself, because if it navigates to a separate page (like index.jsp) then it won't be much of a modal dialog (because it has already navigated to the other page).
one way of doing this having the modal dialogs HTML code in the parent page itself (which is "userlogged.jsp" in your case if I am not wrong), setting its visibility to hidden (so that it doesnt show by default) and on triggering of a perticular event (like clicking on a perticular context menu), setting the visibility as normal (so that it comes up as a modal dialog over the existing page).
Also make sure you take care of removing that modal as well (by setting the visibility to hidden) on a certain event (like clicking an "OK" button on the modal dialog).
Hope it helps!
I was wondering why my jquery mobile styling only sometimes loads only if when I press the refresh button before I hit the next link named Sign up.
If I were to hit the back button and then hit the sign up button again without refreshing, the list that would appear would look totally different without the jquery styles.
I am just baffled as to what is going on.
Here is the Link:
http://71.162.197.6/iGotChu/www/
And if you want to see what it is on jsfiddle here it is: enter code herehttp://jsfiddle.net/ayz8sd6u/
****Sadly, the problem doesn't show up on jsfiddle. The list I am trying to print doesn't even show up after you press sign up.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function(){$('form').on('submit', function() {
var pageRequest = "" + $(this).attr('action');
$.post($(this).attr('action'), $(this).serialize(), function(data,status){
//alert("Returned data: " + data);
pageRequest = parsePhp(pageRequest);
pageHandler(pageRequest, data);
});
return false;
});
});
function parsePhp(pageRequest){
var index1 = pageRequest.lastIndexOf("/");
index1++;
//alert(index1);
var index2 = pageRequest.lastIndexOf(".");
//alert(index2);
var page = pageRequest.substring(index1,index2);
//alert(page);
return(page + "");
}
//Owl Carousel
$(document).ready(function() {
$("#menu").owlCarousel({
singleItem: true,
});
return(false);
});
</script>
<script>
$(document).ready(function() {
var at = $("a").attr("href");
$("a").click(function(){
//alert("the Attribute is: " + at);
var print = "";
for (i=0;i<10;i++){
print = print + "<ul data-role='listview'><li><a href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3> <p>Broken Bells</p></a></li></ul>";
}
document.getElementById("test").innerHTML = print;
$.mobile.changePage($(attribute),"slide");
}
);
});
function pageHandler(pageRequest, result){
result = result + "";
if(pageRequest == "register"){
alert("Your account as been created!");
$.mobile.changePage($("#loginPage"),"slide");
}
else if(pageRequest == "login"){
alert("result data: " + result);
if(result == "success"){
$( ".loginPopUp" ).popup( "open");
$.mobile.changePage($("#home"),"slide");
}
else{
alert("Incorrect Credentials");
}
}
}
</script>
</head>
<body>
<div data-role="page" id="loginPage">
<div data-role="header">
<h1> iGotYou! </h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="http://71.162.197.6/iGotChu/php/login.php">
<div class="ui-field-contain">
<input type="text" name="userName" id="userName" placeholder="Username">
<input type="password" name="password" id="passWord" placeholder="Password">
<input type="submit" value="Login">
</div>
</form>
Sign Up
</div>
</div>
<div data-role="page" id="createAccountPage">
<a data-rel="back" data-icon="arrow-l" data-role="button">Create Account</a>
<form method ="post" action ="http://71.162.197.6/iGotChu/php/register.php">
<div class="ui-field-contain">
<input type="text" name="userName" id="userName" placeholder="User Name">
<input type="text" name="firstName" id="firstName" placeholder="First Name">
<input type="text" name="lastName" id="lastName" placeholder="Last Name">
<input type="text" name="email" id="email" placeholder="Email Address">
<input type="password" name="password" id="password" placeholder="Password">
<input type="submit" value="Confirm">
</div>
</form>
<div data-role = 'content'>
<div class='content-primary' id = 'test'>
</div>
</div>
</div>
</body>
</html>
Not sure where to start here, but I think what you're having issues with is in your loop. Try something like this:
$("a").click(function () {
var printHtml = "<ul data-role='listview'>";
for (i = 0; i < 10; i++) {
printHtml += "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3><p>Broken Bells</p></a></li>";
}
printHtml += "</ul>";
$("#test").html(printHtml);
$.mobile.changePage($(attribute), "slide");
});
You're printing a new <ul> each time and I don't think you need to do that.
The first time any page is loaded in Jquery, the page is "CREATED" and is only created once and then saved into memory.
Using the "pagebeforecreate" event listener, I can change the html before the page is created. In the API, the "pagebeforecreate" interrupts the page loading before the jquery enhancements are performed, thus, the html is injected, and then the enhancement scripts can then do their work in orderly fashion.
$(document).on("pagebeforecreate",function(event){
//alert("page before created activated");
var nextPage = event.target.id;
var print = "";
if (nextPage=="createAccountPage"){
$.ajax({
url: '<your server>',
dataType: 'json',
async: true,
success: function(data) {
var print = "";
for (i=0;i<data.firstName.length;i++){
print = print + "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>"+data.firstName[i]+ " " + data.lastName[i] + "</h3><p>Broken Bells</p></a></li>";
}
$("#usersList").html(print);
print = "";
}
});
}
});
However, the problem is not totally fixed as one would need to refresh the html if it were ever to be changed due to a caching problem where the old page would be saved and the html would not be reloaded even though an ajax call is made. This goes hand in hand with my earlier statement that pages are created only once. To force a reload/notify that the page has been changed, I made a complementary scheme that upons an ajax call, the html is updated with the function
$('#usersList').listview('refresh');
I know this has come up a lot of times and I have searched all over stack overflow. I have created a working Javascript function to get the <input> tag values within each row of a table.
However, when I include a <tbody> tag (which is required for row sorting), the Javascript code will not work and I have no idea why?
Please see the code below:
function writeXML() {
var table = document.getElementById('table_assoc');
alert(table);
var rCount = document.getElementById('tbody_id').rows.length;
alert(rCount);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = "c:/XML.xml";
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<Seating_Plan>\n');
for (var i = 1; i < rCount; i++) {
var id = table.rows[i].cells[0].children[0].value; <-- Cant Find Table reference when <tbody> tag included.
var deptcode = table.rows[i].cells[1].children[0].value;
var name = table.rows[i].cells[2].children[0].value;
var role = table.rows[i].cells[3].children[0].value;
var desc = table.rows[i].cells[4].children[0].value;
var image = table.rows[i].cells[5].children[0].value;
var asdir = table.rows[i].cells[6].children[0].value;
file.WriteLine('<Person id="' + id + '"><Dept>' + deptcode + '</Dept><Name>' + name + '</Name><Description>' + desc + '</Description><Role>' + role + '</Role><Image><image href="' + image + '"/></Image><AssociateDir><AssociateDir href="' + asdir + '"/></AssociateDir></Person>');
}
file.WriteLine('</Seating_Plan>');
file.Close();
}
How do I get this to work when including a tbody tag?
==================================================================
UPDATE:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="Admin_Javascript.js"></script>
</head>
<body>
<div id="Header_Logo" ></div>
<div id="Header_Logo2">BMW UK</div>
<div id="Admin_Header">BMW LAYOUT EDITOR</div>
<div id="Admin_Nav">
<a id="btn_xml" class="Admin_Nav_Buttons">XML</a>
<a class="Admin_Nav_Buttons">Layout</a>
</div>
<div id="Admin_XML">
<div id="XML_Buttons2">LOAD</div>
<div id="XML_Buttons" onClick="writeXML()">SAVE</div>
<span> </span>
<p class="Admin_headers">Departments</p>
<div id="Admin_Dept_Container"></div>
<p class="Admin_headers">Associates</p>
<div id="Admin_Associate_Container">
<table id="table_assoc">
<tbody id="tbody_id" >
<tr><td><input value="ID"></td></tr>
<tr><td><input value="deptcode"></td></tr>
<tr><td><input value="name"></td></tr>
<tr><td><input value="role"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
There is also a collection of tBodies, you can get the one by its index:
var id = table.tBodies[0].rows[i].cells[0].children[0].value;