my code
html += '<select onchange="status_update(this.options[this.selectedIndex].value,' + data[count].petition_list_id + ')"">สถานะอนุมัติไม่อนุมัติ';
not working
Related
So I created a Pokedex (for my portfolio), anyhow I was wondering if it is possible to include a carousel within a modal that activates once it is clicked and the item data will be retrieved from an external API. Anyhow every time you call a new item it erased the modal body to fetch the new data.
//Function modal
let modalContainer = document.querySelector("#pokemon-modal");
function showModal(pokemon) {
let modalBody = $(".modal-body");
let modalTitle = $(".modal-title");
modalTitle.empty();
modalBody.empty();
// data-target ='#myCarousel'
//creating element for name
let nameElement = $("<h1>" + capitalizeFirstLetter(pokemon.name) + "</h1>");
//creating new img
let imageElementFront = $(
`<img alt="pokemon-image" src="${pokemon.imageUrl}" class="modal-img"
style="width:40%">`
);
//creating elemnt for height
let heightElement = $("<p>" + "Height: " + pokemon.height + "</p>");
//creating element for weight
let weightElement = $("<p>" + "Weight: " + pokemon.weight + "</p>");
//creating element for types
let pokemonTypes = [];
Object.keys(pokemon.types).forEach((key) => {
pokemonTypes.push(" " + pokemon.types[key].type.name);
});
let typesElement = $("<p>" + "Type(s): " + pokemonTypes + "</p>");
modalTitle.append(nameElement);
modalBody.append(imageElementFront);
modalBody.append(heightElement);
modalBody.append(weightElement);
modalBody.append(typesElement);
modalContainer.classList.add("is-visible");
$("#pokemonModal").modal("show");
}
This is just a portion of the code, but where I believe the problem exists to create such slideshow...
Any thoughts?
I need to create a screen which automates Google search.
I know JavaScript and I'm trying to get GSE works.
I have a search engine and an API key.
The problem is Google's documentation is cyclic i.e. pages point to each other.
There is no working sample from where I can start my research.
Please help if you know of a working sample.
The documents I have read are:
cselement-devguide
introduction
I know this is an old question, but here is what I did to make the API results formatted like the Google Site Search used to give since they are ending the paid accounts and will have ads now. The API way has an option to pay still for over 100 searches per day, so going with that but had to format the results still, and used the existing one to build the css to do similar styling also.
Search form going to this page is just a simple:
<form action="search-results.htm" id="cse-search-box">
<div>
<input class="" name="q" type="text">
<input class="" type="submit">
</div>
</form>
and then the search results page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>JSON/Atom Custom Search API Example</title>
<!--<link href="default.css" rel="stylesheet" type="text/css">-->
<link href="google.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="gsc-result-info" id="resInfo-0"></div>
<hr/>
<div id="googleContent"></div>
<script>
//Handler for response from google.
function hndlr(response) {
if (response.items == null) {
//Sometimes there is a strange thing with the results where it says there are 34 results/4 pages, but when you click through to 3 then there is only 30, so page 4 is invalid now.
//So if we get to the invalid one, send them back a page.
window.location.replace("searchresults.htm?start=" + (start - 10) + "&q=" + query);
return;
}
//Search results load time
document.getElementById("resInfo-0").innerHTML = "About " + response.searchInformation.formattedTotalResults + " results (" + response.searchInformation.formattedSearchTime + " seconds)";
//Clear the div first, CMS is inserting a space for some reason.
document.getElementById("googleContent").innerHTML = "";
//Loop through each item in search results
for (var i = 0; i < response.items.length; i++) {
var item = response.items[i];
var content = "";
content += "<div class='gs-webResult gs-result'>" +
"<table class='gsc-table-result'><tbody><tr>";
//Thumbnail image
if (item.pagemap.cse_thumbnail != null)
content += "<td class='gsc-table-cell-thumbnail gsc-thumbnail'><div class='gs-image-box gs-web-image-box gs-web-image-box-portrait'><a class='gs-image' href='" + item.link + "'>" +
"<img class='gs-image' class = 'gs-image-box gs-web-image-box gs-web-image-box-portrait' src='" + item.pagemap.cse_thumbnail[0].src + "'></a></td>";
//Link
content += "<td><a class='gs-title' href='" + item.link + "'>" + item.htmlTitle + "</a><br/>";
//File format for PDF, etc.
if (item.fileFormat != null)
content += "<div class='gs-fileFormat'><span class='gs-fileFormat'>File Format: </span><span class='gs-fileFormatType'>" + item.fileFormat + "</span></div>";
//description text and URL text.
content += item.htmlSnippet.replace('<br>','') + "<br/><div class='gs-bidi-start-align gs-visibleUrl gs-visibleUrl-long' dir='ltr' style='word-break:break-all;'>" + item.htmlFormattedUrl +"</div>" +
"<br/></td></tr></tbody></table></div>";
document.getElementById("googleContent").innerHTML += content;
}
//Page Controls
var totalPages = Math.ceil(response.searchInformation.totalResults / 10);
console.log(totalPages);
var currentPage = Math.floor(start / 10 + 1);
console.log(currentPage);
var pageControls = "<div class='gsc-results'><div class='gsc-cursor-box gs-bidi-start-align' dir='ltr'><div class='gsc-cursor'>";
//Page change controls, 10 max.
for (var x = 1; x <= totalPages && x<=10; x++) {
pageControls += "<div class='gsc-cursor-page";
if (x === currentPage)
pageControls += " gsc-cursor-current-page";
var pageLinkStart = x * 10 - 9;
pageControls+="'><a href='search-results.htm?start="+pageLinkStart+"&q="+query+"'>"+x+"</a></div>";
}
pageControls += "</div></div></div>";
document.getElementById("googleContent").innerHTML += pageControls;
}
//Get search text from query string.
var query = document.URL.substr(document.URL.indexOf("q=") + 2);
var start = document.URL.substr(document.URL.indexOf("start=") + 6, 2);
if (start === "1&" || document.URL.indexOf("start=") === -1)
start = 1;
//Load the script src dynamically to load script with query to call.
// DOM: Create the script element
var jsElm = document.createElement("script");
// set the type attribute
jsElm.type = "application/javascript";
// make the script element load file
jsElm.src = "https://www.googleapis.com/customsearch/v1?key=yourApikeyhere&cx=yoursearchengineidhere&start="+start+"&q=" +query +"&callback=hndlr";
// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);
</script>
</body>
</html>
I'm using Dojo 1.9.1.
I'm using dojox.charting to draw some charts.
I am using a labelFunc to produce a date/time label for my X-axis. This is working fine in all browsers.
But I want to add a line break to my label so that the date sits above the time, e.g.:
10/01/2014
06:00
I can add a html break tag to the string returned and this works in Chrome and Firefox but not IE9 (to be expected).
Has anybody solved how to do this one that works across all browsers including IE9 (or specifically ones that don't "do" html labels).
Cheers
Ian
My label func:
_labelFull: function (index) {
// Returns a label in the form "dd/mm/yyyy hh:mm" for tooltip labelling
var dt,
d;
dt = new Date(Date.parse(myglobalStartDateTime));
dt.setHours(dt.getHours() + Number(index));
// Full date/time
d = ("0" + dt.getDate()).slice(-2) + '/' +
("0" + (dt.getMonth() + 1)).slice(-2) + '/' +
dt.getFullYear() + ' ' +
("0" + dt.getHours()).slice(-2) + ':' +
("0" + dt.getMinutes()).slice(-2) + 'UTC';
return d;
}
The example given for using ClientRowTemplate in the Kendo UI Grid uses a nasty HTML string
.ClientRowTemplate(
"<tr><td colspan=\"6\">" +
"<div class=\"customer-details\">" +
"<img src=\"" + #Url.Content("~/Content/web/Customers/") + "#=CustomerID#.jpg\"" +
"alt=\"#=ContactName#\" />" +
"<h3 class=\"k-widget\">#=ContactName#</h3>" +
"<dl>" +
"<dt>Name:</dt><dd>#=ContactName#</dd>" +
"<dt>Company:</dt><dd>#=CompanyName#</dd>" +
"<dt>Country:</dt><dd>#=Country#</dd>" +
"</dl>" +
"<dl >" +
"<dt>Address:</dt><dd>#=Address#</dd>" +
"<dt>Phone:</dt><dd>#=Phone#</dd>" +
"</dl>" +
"</div>" +
"</td></tr>"
)
I am currently using a partial view .ClientRowTemplate(Html.Partial("_ClientRowTemplate").ToHtmlString()), but it would be nice to have it in the same view file.
Is there a built-in way to use something a bit nicer like a <script id="rowTemplate" type="text/x-kendo-tmpl"> block? I would still like to use the Kendo MVC helpers and not JavaScript.
Check out Haacks blog on templated razor delegates. http://haacked.com/archive/2011/02/27/templated-razor-delegates.aspx/
Basically you can define a chunk of razor that will be rendered as HTML
Define you razor delegate
#{
Func<dynamic, object> tableRow = #<tr></tr>;
}
Then do this
.ClientRowTemplate( #tableRow(null).ToString() )
I'm trying to use MediaElement.js on a site and everything works great in every browser but IE, most specifically IE9 (I'm not too concerned with supporting below IE9 at the moment). I'm populating the ME dynamically which I've read can cause problems in IE specifically, but I'm just not sure if there is a workaround. The reason I'm doing it this way is because this is a portfolio site where all project data gets loaded through a getJSON call and once loaded all projects get populated with their appropriate data and created on the fly. There are several video projects. I've dumbed the code down to an example outside of my project which essentially goes through this same behavior. If I just write the HTML out and control in JS it works but when I create the HTML through JS and then try to play I get the error log (in the creation of ME player in the code). Here is the code:
$(function() {
var details = {
width: 640,
height: 480,
src: 'work/television/1'
},
$body = $('body'),
$vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer1"></video>'),
$mp4 = $('<source src="' + details.src + '.mp4" type="video/mp4" title="mp4">'),
$webm = $('<source src="' + details.src + '.webm" type="video/webm" title="webm">'),
$ogg = $('<source src="' + details.src + '.ogv" type="video/ogg" title="ogg">'),
$flash = $('<object width="' + details.width + '" height="' + details.height + '" type="application/x-shockwave-flash" data="swf/flashmediaelement.swf"><param name="movie" value="swf/flashmediaelement.swf"><param name="flashvars" value="controls=true&file=' + details.src + '.mp4"></object>'),
$error = $('<p>The available video formats are not supported by your browser. :(</p>'),
$controls = $('<div class="videoControls playBtn"></div>');
$body.append($controls);
$vid.append($mp4);
$vid.append($webm);
$vid.append($ogg);
$vid.append($flash);
$vid.insertAfter($controls);
var vidPlayer = new MediaElementPlayer('#vidPlayer1', {
features: [],
// mode: 'shim',
pluginPath: 'swf/',
success: function(mediaElement) {
console.log('success', mediaElement);
},
error: function() {
console.log('Error loading player. Please try again.');
}
});
$body.on('click', function(evt) {
vidPlayer.play();
});
});
Any help would be tremendously appreciated.
problem solved. for anyone interested, had to combine my appends into one call so $vid became:
$vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer-' + row + '-' + slide + '"><source src="' + details.src + '.mp4" type="video/mp4" title="mp4"><source src="' + details.src + '.webm" type="video/webm" title="webm"><source src="' + details.src + '.ogv" type="video/ogg" title="ogg"><p>The available video formats are not supported by your browser. :(</p></video>')
just had to put it all in one statement and IE9 recognized it properly. The issue was by appending as I was doing the source variables never got appended and thus IE didn't know what the source of my video was.
Hope this helps someone in the future.