Laden...

Hilfe bei dynamic JQUERY

Erstellt von FranzBeckenbauer vor 10 Jahren Letzter Beitrag vor 10 Jahren 1.947 Views
F
FranzBeckenbauer Themenstarter:in
63 Beiträge seit 2011
vor 10 Jahren
Hilfe bei dynamic JQUERY

Hallo zusammen, sorry aber ich finde keine richtige Formulierung für das Thema.

Ich habe mir da was schönes fertiges besorgt, siehe unter: Link

Da ich so begeister davon bin, möchte ich dies jetzt in eine ASP.NET Anwendung einbauen mit dem Ziel die Orte dynamisch aus einer Datenbank zu befüllen.

Und genau da ist mein Problem...

Das ganze basiert auf JQUERY und ich hab da erlich gesagt nicht viel Ahnung.

Und trotzdem möchte ich das Vorgenommene schaffen und verwirklichen.

Hier mal ein der JQUERY-Auschnitt um des es geht:

 
<script type="text/javascript">
	//<![CDATA[
	jQuery.noConflict(); jQuery(document).ready(function(){  
    	//MAP ZOOM (0 to 20)
    	var zoomLevel = 5,
		gMap = jQuery("#gMap"),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);
		
	//iPad Stuff
	if (iPadiPhone) {
		//ADD MAP CONTROLS AND POST ARROWS
		jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">&lsaquo;</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">&rsaquo;</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div>');
	} else {//IF NOT iPad
		jQuery('#zoomIn').live('click',function(){
			zoomLevel += 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
		jQuery('#zoomOut').live('click',function(){
			zoomLevel -= 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
		//ADD MAP CONTROLS AND POST ARROWS
      	jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">&lsaquo;</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">&rsaquo;</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div><div class="zoomControl" title="Zoom Out" id="zoomOut"><img src="images/zoomOut.png" alt="-" /></div><div class="zoomControl" title="Zoom In" id="zoomIn"><img src="images/zoomIn.png" alt="+" /></div>');
    }    
        jQuery('body').prepend("<div id='target'></div>");
        
        gMap.gmap3({ 
        	action: 'init',
            onces: {
              bounds_changed: function(){
              	var number = 0;
                jQuery(this).gmap3({
                  action:'getBounds', 
                  callback: function (){
//ADD MARKERS HERE - FORMAT IS AS FOLLOWS...
//add(jQuery(this), number += 1, "NAME", "URL","ADDRESS1<br />ADDRESS2","LATITUDE","LONGITUDE", 'THUMBNAIL');
add(jQuery(this), number += 1, "Colosseum", "map_post.html","Via Sforza, 10<br />00184 Roma, Italy","41.890202","12.492228", '<img width="95" height="95" src="images/thumbs/colosseum.jpg" alt="" />');
add(jQuery(this), number += 1, "Iguazu Falls", "map_post.html","Iguazu Falls<br />Misiones, Argentina","-25.69506","-54.440432", '<img width="95" height="95" src="images/thumbs/iguazu.jpg" alt="" />');
add(jQuery(this), number += 1, "Great Barrier Reef", "map_post.html","Great Barrier Reef<br />Australia","-10.21053","142.159653", '<img width="95" height="95" src="images/thumbs/reef.jpg" alt="" />');                  
add(jQuery(this), number += 1, "Statue of Liberty", "map_post.html","Liberty Island<br />New York, NY 10004","40.69005","-74.045067", '<img width="95" height="95" src="images/thumbs/liberty.jpg" alt="" />');
add(jQuery(this), number += 1, "Chichen Itza", "map_post.html","Chichen Itza<br />Mexico","20.683341","-88.569009", '<img width="95" height="95" src="images/thumbs/itza.jpg" alt="" />');                  	
add(jQuery(this), number += 1, "Taj Mahal", "map_post.html","Taj Mahal<br />Agra, India","27.174799","78.042111", '<img width="95" height="95" src="images/thumbs/taj.jpg" alt=""" />');
add(jQuery(this), number += 1, "Great Wall of China", "map_post.html","Great Wall of China<br />Beijing, China","40.429076","116.568219", '<img width="95" height="95" src="images/thumbs/wall.jpg" alt="" />');
add(jQuery(this), number += 1, "Stonehenge", "map_post.html","4 A344 Road<br />Wiltshire, Salisbury SP4 7DE, UK","51.178859","-1.82622", '<img width="95" height="95" src="images/thumbs/stone.jpg" alt=""" />'); 
add(jQuery(this), number += 1, "Great Pyramid of Giza", "map_post.html","Great Pyramid of Giza<br />Egypt","29.977316","31.132314", '<img width="95" height="95" src="images/thumbs/giza.jpg" alt="" />');
add(jQuery(this), number += 1, "Grand Canyon", "map_post.html","Grand Canyon<br />Williams, AZ","36.34313","-112.51339", '<img width="95" height="95" src="images/thumbs/canyon.jpg" alt="" />');
add(jQuery(this), number += 1, "Eiffel Tower", "map_post.html","Parc du Champ de Mars, 5 Ave Anatole France <br />75007 Paris, France","48.858588","2.293847", '<img width="95" height="95" src="images/thumbs/tower.jpg" alt="" />');                  
                  }
                });
              }
            }
          },{ 
			action: 'setOptions', args:[{
				zoom:zoomLevel,
				scrollwheel:false,
				disableDefaultUI:true,
				disableDoubleClickZoom:true,
				draggable:true,
				mapTypeControl:false,
				panControl:false,
				scaleControl:false,
				streetViewControl:false,
				zoomControl:false,
				//MAP TYPE: 'roadmap', 'satellite', 'hybrid'
				mapTypeId:'roadmap'
			}]
		});
        function add(jQuerythis, i, title, link, excerpt, lati, longi, img){
          jQuerythis.gmap3({
            action : 'addMarker',
            lat:lati,
            lng:longi,
            //PIN MARKER IMAGE
            options: {icon: new google.maps.MarkerImage('images/pin.png')},
            events:{
       			mouseover: function(marker){
          			jQuerythis.css({cursor:'pointer'});
          			jQuery('#markerTitle'+i+'').fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
          			jQuery('.markerInfo').removeClass('activeInfo').hide();
          			jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
          			jQuery('.marker').removeClass('activeMarker');
          			jQuery('#marker'+i+'').addClass('activeMarker');
      			},
       			mouseout: function(){
          			jQuerythis.css({cursor:'default'});
          			jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
      			},
      			click: function(marker){window.location = link}
   			},
            callback: function(marker){
              var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><a href="'+link+'">'+img+'</a><h2><a href="'+link+'">'+title+'</a></h2><p>'+excerpt+'</p><a class="markerLink" href="'+link+'">Details anzeigen &rarr;</a><div class="markerTotal">'+i+' / <span></span></div></div></div>');
              jQuerybutton.mouseover(function(){
                  jQuerythis.gmap3({
                    action:'panTo', 
                    args:[marker.position]
                  });
                  jQuery("#target").stop(true,true).fadeIn(1200).delay(500).fadeOut(1200);
               });
              jQuery('#markers').append(jQuerybutton);
              var numbers = jQuery(".markerInfo").length;
              jQuery(".markerTotal span").html(numbers);
              if(i == 1){
              	jQuery('.marker:first-child').addClass('activeMarker').mouseover();
              }
              jQuerythis.gmap3({
              	action:'addOverlay',
              	content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',
              	latLng: marker.getPosition()
               });
            }    		
          });
        }
});
//]]>
</script>

Genau gesagt möchte ich da irgendwie im Code behind dran kommen an den Code in der Mitte wo es heißt: //ADD MARKERS HERE - FORMAT IS AS FOLLOWS...

Sorry, aber wie gesagt kenn mich da echt nicht gut aus und wäre für jeden Tipp dankbar den ihr mir geben könntet damit ich irgendwie die Orde dynamisch aus einer Datenbank laden kann.

16.806 Beiträge seit 2008
vor 10 Jahren

WebForms mag keine fest definierten Element-IDs; genau deswegen (und wegen vielen anderen Dingen) ist WebForms auch NICHT geeignet für RIA-Anwendungen. Es ist einfach nicht kompatibel zu anderen Frameworks wie jQuery oder RIA-Designs. Aber das predige ich hier sinnlos vor mir her - hab ich Dir glaube ich auch schon mehrfach gesagt; aber interessiert ja keinen.

Was Du hier tun musst: alle festen Elemente so umschreiben, dass Du eben nicht mit festen IDs arbeitest, sondern zB mit Klassen. Oder HTML5 Attributen (nur kann das WebForms eben nicht so toll).
Doof nur ist, dass WebForms irgendwelche Element-Injektionen, wie das hier eben umgesetzt wird, überhaupt nicht mag und oft auch nur - wenn überhaupt - mit irgendwelchen Tricks funktioniert. Man kann nicht so einfach den ViewState via Javascript oder eben jQuery manipulieren ohne, dass es ASP.NET WebForms stört.

Ob das alles so toll klappt bezweifel ich, da WebForms - wie so oft gesagt - nicht wirklich die passende Technologie für solch ein Vorhaben ist.
Auf alle Fälle ist das hier mal wieder ein perfektes Beispiel, dass WebForms eine ganz andere Zielgruppe hat als dieses Template.

F
FranzBeckenbauer Themenstarter:in
63 Beiträge seit 2011
vor 10 Jahren

ok, gibts nicht irgenwie z.b. ne Möglichkeit den code im codebehind z.b. an ein literal oder so zu übergeben???

evtl. ne andere idee?

16.806 Beiträge seit 2008
vor 10 Jahren

Klar kannst Du irgendwelches Script Zeugs nachträglich hinzuladen (jQuery Grundlagen, bitte selbst durch entsprechende Tutorials aneignen).
Und wie das dann nachher mit WebForms funktioniert; an die Informationen wirst Du bei der entsprechenden Grundlagenrecherche auch kommen.

Aber irgendwas an den ViewState injezieren um das nachher auszuwerten ist eben ein anderes Kapitel.

D
615 Beiträge seit 2009
vor 10 Jahren

Hallo FranzBeckenbauer

Du kannst auch den ganzen Javascript Text serverseitig generieren.
Schau Dir dazu mal "RegisterStartupScript" und "RegisterClientScriptBlock" an.

Beste Grüsse

Diräkt

F
FranzBeckenbauer Themenstarter:in
63 Beiträge seit 2011
vor 10 Jahren

Hallo Diräkt,

danke das mache ich gleich mal...

F
FranzBeckenbauer Themenstarter:in
63 Beiträge seit 2011
vor 10 Jahren

Hallo zusammen,
hab jetzt mal getestet...

Im Codebehind im Pageload verwende ich den sleben Code und übergebe den an einen StringBuilder. Anschließend übergebe ich den StringBuilder an ein Literal. Das ergebnis funktioniert.

Danke euch noch mal.