Announcement

Collapse
No announcement yet.

Einfaches jQuery Skript in XML einbinden

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Einfaches jQuery Skript in XML einbinden

    Hallo!


    Habe gerade angefange mit XML herumzuspielen und muss morgen schon eine Präsentation dazu vorstellen

    Ich möchte folgendes tun:
    Beim Klick auf einem Bild (das ein Link ist), soll ein Alert ausgegeben werden.
    Dabei verwende ich jQuery für den Alert Befehl.


    Mein Code sieht folgendermassen aus:
    Code:
    <head>
	<script type = "text/javascript">
	
				<![CDATA[
				 $(document).ready(function(){
   						$("a#test").click(function(event){
     							alert("Thanks for visiting!");
  						 });
 				});

				]]>
	</script>
				
</head>

...

<body>
	<xsl:template match="pic_square">
	<a>
			<xsl:attribute name="id">test
			</xsl:attribute>
			 <xsl:attribute name="href">
			     <xsl:value-of select="." />
			 </xsl:attribute>
			<img>
				<xsl:attribute name="src">
      				<xsl:value-of select="." />
      			</xsl:attribute>
      		</img>
	</a>
	</xsl:template>
</body>
    Wieso funktioniert das nun nicht???
    Zuletzt editiert von sem_thesis; 03.04.2011, 17:47.
    Tags: None
  • #2
    Ohne das XML-Dokument zu kennen, kann ich nur raten, dass a) die Referenz zum jQuery.js fehlt und b) die XSLT-Abfrage nicht passt:

    Kürzer ohne xsl:attribute-Nutzung wäre auf jeden Fall diese Form, wobei mir nicht klar ist, warum die Attribute href und src denselben Wert haben sollen:

    Code:
    <xsl:template match="pic_square">
  <a id="test" href="{.}"><img src="{.}" alt="..." /></a>
</xsl:template>

    Comment

    • #3
      Auch hallo,

      bei dem gezeigten Quellcode scheint noch mehr im Argen zu liegen. Zumindest zu JQuery könnte man diese Seite beachten: http://www.mkyong.com/tutorials/jquery-tutorials/
      MfG
      Cheat-Sheets for Developers / Programming Quotes

      Comment

      • #4
        Ja, du hattest Recht Thomas. Die Referenz zu jQuery war falsch angegeben. Danke!


        Eigentlich will ich das Skript von Fancybox benutzen.
        Beim Klick auf das Bild soll eine vergrösserte Version angezeigt werden.


        Code:
        <!-- jQuery Script Activation -->
				
<script type = "text/javascript">
				
		<!-- Zoombox -->
		 $(document).ready(function(){
   				$("a#test").fancybox();
  		             });
 		});

</script>

.....
.....
.....


	<xsl:template match="pic_square">
	<a id = "test" href="{.}"><img src = "{.}" alt = "Profilbild" /></a>
	</xsl:template>

        Der Code funktioniert nicht, deshalb habe ich als Test den Alert benutzt.

        PS: Hier ist noch der Sourcecode. Ihr benötigt einen Webserver wie Tomcat um die Facebook-Applikation laufen zu lassen (Run WebContent/index.jsp).

        Comment

        • #5
          Auch auf die Gefahr danebenzuliegen:
          -das Problem ist der JQuery Code (spez. die Abfrage 'a#test'), der in facebook.xsl fehlplatziert ist (und in index.jsp gehört)
          -es handelt sich nicht um ein XML-Problem, eher eins für das Forum "Web Development"

          Übrigens scheint der Link zu dem Star Ratings Problem nicht zu passen.
          Mit Netbeans 6.9 und gebundeltem Glassfish Server kann man die Applikation auch laufen lassen.
          MfG
          Cheat-Sheets for Developers / Programming Quotes

          Comment

          • #6
            Ok - das ist die neue Implementation:
            Ein Accordion, der beim Mausklick aktiviert wird und eine Tabelle anzeigt.
            Es stehen 3 Templates zur Verfügung. Je nachdem was man anklickt, wird das Template gewechselt.

            Code:
            <script type="text/javascript">

	window.onload = function()	{

		<!-- Canvas Functionality -->

		var oCanvas = document.getElementById("thecanvas");
		var oCtx = oCanvas.getContext("2d");
						
		<!-- Template Changer -->
						
		image1 = new Image();
		image2 = new Image();
		image3 = new Image();


		$.fn.changeTemplate = function(strType) {
						
			if (strType == "template1")
			{
				image1.onload = function() {
						oCtx.drawImage(image1, 0, 0);
				}
			         image1.src = '../images/background.jpg';							
			}
			if (strType == "template2")
			{
				image2.onload = function() {
						oCtx.drawImage(image2, 0, 0);
				}
				image2.src = '../images/background2.gif';								
			}
			if (strType == "template3")
			{
				image3.onload = function() {
				 		oCtx.drawImage(image3, 0, 0);					   
                                }
				image3.src = '../images/background3.jpg';
			}
				
		}

		<!-- jQuery Scripts Activation -->
							
 							 
     		$(document).ready(function() {	
     			 
     			 <!-- Toggle-Div -->	
     			 	
     			$('#container').hide();        			
   			$('#togglebox').click( function() {
    					$('#container').toggle(400);
    					return false;
   			});
   					
     			<!--  Draggable -->
     			 	
   			$(".draggable").easydrag();
 					
			<!-- Template Changer -->
				 	
			$('#template1').click(function () {
                                $('#templatecontainer').changeTemplate("template1");						
			});
			$('#template2').click(function () {
				$('#templatecontainer').changeTemplate("template2");						
			});
			$('#template3').click(function () {
				$('#templatecontainer').changeTemplate("template3");						
			});
					
				 	
		}); 
}
</script>

            Ich habe jetzt den ganzen Skript-Tag in index.jsp hinein kopiert.
            Da hat nichts funktioniert!

            In einer ganze normalen html-Datei funktioniert der Code perfekt.
            In der .xsl Datei wird er unvollständig ausgeführt. Ich kann also jedes Template einmal anklicken. Sobald alle Templates einmal angezeigt wurden, ändern sie nicht mehr.

            Hilfe
            Neuer Link: http://ifile.it/rad9mv4

            PS: Kann man diesen Thread ins Web Development Forum verschieben?
            Zuletzt editiert von sem_thesis; 03.04.2011, 14:29.

            Comment

            • #7
              Also - im Apache Webserver, der in Eclipse eingebettet ist, scheint es nicht zu funktionieren. Hingegen im Browser funktioniert der Code perfekt.

              ---> Problem gelöst

              Comment

              Previous template Next
              Working...
              X