Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Парсинг из xml (https://javascript.ru/forum/misc/36343-parsing-iz-xml.html)

Vasy 12.03.2013 19:58

Парсинг из xml
 
Добрый день,Есть такой xml файл
Код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE test SYSTEM "test.xml">
<test>
<border X="100" Y="100" weight="100" hight="100"></border>
        <questions>
                <single>
                <question>Вопрос</question>
                <answer rating="0"> 20</answer>
                <answer rating="1"> 40</answer>
                <answer rating="1"> 50</answer>
                <answer rating="0"> 20,5</answer>
                </single>
               
        </questions>
<TextButton>Ответить на вопрос</TextButton>
<TextButton>Стереть ответы</TextButton>
<ResultTextTrue>Ваш ответ верен!</ResultTextTrue>
<ResultTextFalse>Ваш ответ не верен!</ResultTextFalse>
</test>

в котором якобы задаютса там длинна ширина расположение цвет многое другое,допустим как border.

Подскажите как мне правильно создать рамку в JS коде,если нагляднее то chtckbox поместить внутрь рамки заберая все данные о рамке из xml документа так же как я забираю и все остальное из этого xml документа.
<!DOCTYPE html>
<html>

<head>



<meta charset="utf-8" />
	<title>Test</title>
	
<script type="text/javascript" src="jquery.js"></script>
	<script src="script.js" type="text/javascript"></script>

<script type="text/javascript">


var answer={}
		$(document).ready(function(){
			$.ajax({
				type: "GET",  
				url: "test.xml", 
				dataType: "xml", 
				success: vasa	
	 			
		});
		
	
		
		function vasa(xml) { 

		        question=$(xml).find('question')[0].textContent;
				$('.cont').append('<h4>'+question+'</h4>');
				TextButton=$(xml).find('TextButton')[0].textContent;
				$('.onki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				TextButton=$(xml).find('TextButton')[1].textContent;
				$('.lolki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				
				ResultTextTrue=$(xml).find('ResultTextTrue')[0].textContent;
				
				ResultTextFalse=$(xml).find('ResultTextFalse')[0].textContent;
				
				border=$(xml).find('border').Content;
				$('.border');

				var answers = $(xml).find('answer');
 
             		        answers.each(function(index){
 
                                var a = this.textContent;
 
                                var rating = +this.getAttribute('rating');
 
                                $('.cont').append('<p><label><input type="checkbox">'+a+'</label></p>');
 
                                answer[index] = rating;

				

				
 
                });


	

		}
	
				
	 			
		});
		
			
				
	 			
		
			



function checkAnswer() {
var error = false;
            var inputs = document.getElementsByTagName('input');
            for(var i = 0; i < inputs.length ; i++){
               var checked = inputs[i].checked;
              var right = answer[i] == 1;
               if (checked !== right){
               error=true;
               break;
               }
        }
      
        output.value=error ? ''+ResultTextFalse+'' : ''+ResultTextTrue+'';
		
        return false;
    }

</script>

</head>
<body>
<form onsubmit="return checkAnswer()">
	
	
	<div class='cont'></div>
	
	
	
	
    <p><button typre="submit"><div class='onki'></div></button> <button type="reset"><div class='lolki'></div></button></p>

    <p><textarea id="output" readonly></textarea></p>

</form>



</body>

</html>


И поправте меня по пониманию проблемы.Я так понимаю что эта рамка это что-то типа дива с задаными размерами цветом и тому подобным?или это что-то другое?И я могу делать примерно так
<div class='?????'></div>

Тоесть создавать див с задаными размерами в xml и что бы это выглядело как рамка и засовывать туда checkbox?

Зделать это прописывая стили в самом JS коде а потом создавать поле в котором будут чекбоксы,это у меня особых усилий не заняло.А как подгребать из xml файла я просто даже не представляю,натолкните пожалуста.

danik.js 12.03.2013 20:36

Vasy, xml файл тоже ты проектируешь походу?
Атрибуты ноды получай через $node.attr('width') или node.getAttribute('width') для width например.

Vasy 13.03.2013 11:58

так видно?:D
Я это все делаю сам и не для какойто там работи,а для себя пока.Сами понимаете с моими знаниями рано пока=)
тоесть мне получать из border каждый атрибут отдельно?но как их тогда связать в единое целое?

ну тоесть вот так оно подключает все,но по отдельности.
width=$(xml).find('border').attr('width');


Пробовал зделать функцию которая вытаскивает все attr из border и в див вызывать функцию несовсем получилась и функция да и вызывать в див/

Достаю из xml документа я его вот так
width=$(xml).find('border').attr('width');
				$('.width')
				hight=$(xml).find('border').attr('hight');
				$('.hight')

а пытаюсь создать div вот так
<div id="id" class="hight"></div>

Что нетак?

И какбы если я все это задаю в самом javascripte то проблем не возникает
<style type="text/css">
   .block1 { 
    width: 200px; 
    background: #FFFAFA;
    padding: 5px;
    padding-right: 20px; 
    border: solid 5px black; 
    float: left;
   }

а в <body> </body> я просто вызываю вот так
<div class="block1">
	<div class='cont'></div>
	</div>


Я некак немогу понять как я все эти стили которые я получу по отдельности как атрибуты могу соеденить в один в один див как я это делалл прописывая css в самом javascript?

я непойму как мне сказать диву что то что я достал из xml являетса его стилями?

danik.js 13.03.2013 13:26

block.style.border = '1px solid red';
// или по отдельности:
//border.style.borderWidth = '1px';
//border.style.borderStyle = 'dotted';
//border.style.borderColor = 'red';

Почему XML, а не JSON ? С ним же проще.

Vasy 13.03.2013 13:29

Цитата:

Сообщение от danik.js (Сообщение 240348)
block.style.border = '1px solid red';
// или по отдельности:
//border.style.borderWidth = '1px';
//border.style.borderStyle = 'dotted';
//border.style.borderColor = 'red';

Почему XML, а не JSON ? С ним же проще.

Я хочу чтобы все данные я получал из xml

И несовсем понял,что вы это написали,задание некого стиля?

И всеже как мне из xml получать эти стили?

Vasy 13.03.2013 13:44

ну что я имею ввиду
<border  width="200" background="#FFFAFA" padding="5px" padding-right ="20px" border="solid 5px black"  hight="100"></border>

как мне вот это передать в Javascript я уже понял,если передать по отдельности каждый атрибут(а подскажите ище если возможно как организовать некую функцию которая будет забирать все артибуты),и использовать как стили?Тоесть как мне это все указать как стили для div чтобы div понял что это не просто циферки а его стили?

danik.js 13.03.2013 13:53

var decoration = xml.querySelector('border');
div.style.border = decoration.getAttribute('border');

Vasy 13.03.2013 14:06

Скорее всего я туплю но несовсем понимаю где использовать то што вы написали?в каком месте кода?и как передавать это в div с id="id"?


<html>

<head>



 <meta charset="utf-8">
  
  
   
   
  
	
<script type="text/javascript" src="jquery.js"></script>
	<script  type="text/javascript"></script>

<script type="text/javascript">


var answer={}
		$(document).ready(function(){
			$.ajax({
				type: "GET",  
				url: "test.xml", 
				dataType: "xml", 
				success: vasa	
	 			
		});
		
		
		
		
		
		function vasa(xml) { 

		        question=$(xml).find('question')[0].textContent;
				$('.cont').append('<h4>'+question+'</h4>');
				TextButton=$(xml).find('TextButton')[0].textContent;
				$('.onki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				TextButton=$(xml).find('TextButton')[1].textContent;
				$('.lolki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
				
				ResultTextTrue=$(xml).find('ResultTextTrue')[0].textContent;
				
				ResultTextFalse=$(xml).find('ResultTextFalse')[0].textContent;
			
				
				
				
				
	
				
				var answers = $(xml).find('answer');
 
             		        answers.each(function(index){
 
                                var a = this.textContent;
 
                                var rating = +this.getAttribute('rating');
 
                                $('.cont').append('<p><label><input type="checkbox">'+a+'</label></p>');
 
                                answer[index] = rating;

				
							
				
 
                });
				
				
		
		}
					
	
				
	 			
		});
		
			
				
	 			
		
			



function checkAnswer() {
var error = false;
            var inputs = document.getElementsByTagName('input');
            for(var i = 0; i < inputs.length ; i++){
               var checked = inputs[i].checked;
              var right = answer[i] == 1;
               if (checked !== right){
               error=true;
               break;
               }
        }
      
        output.value=error ? ''+ResultTextFalse+'' : ''+ResultTextTrue+'';
		
        return false;
    }

</script>

</head>
<body>
<form onsubmit="return checkAnswer()">
	
	<div id="id" >
	<div class='cont'></div>
	</div>
    <p><button type="submit"><div class='onki'></div></button> <button type="reset"><div class='lolki'></div></button></p>

    <p><textarea id="output" readonly></textarea></p>
	
</form>




</body>

</html>

danik.js 13.03.2013 14:23

var div = document.getElementById('id')

Использовать там, где доступен xml конечно же)

Vasy 13.03.2013 14:44

А блин ну я и тупил долго,да заработало спасибо,но в чем фишка.мне нужен не только border="5px solid black"
а все атрибуты из <style></style>
<style  width="200" background="#FFFAFA" padding="5px" padding-right ="20px" border="solid 5px black"  hight="100"></style>


Часовой пояс GMT +3, время: 22:48.