javascript - load nyt til DOM med jQuery - Udvikleren.dk

Tags: jquery javascript

Bruger #5097 @ 28.05.12 17:08

Hey.
Hvis man ønsker at bruges AJAX til at loade nyt indehold in på ens side via jQuery koden:
$("#dialog").load(urladresse);

Så henter den indholdet ned så det ses. Men indholdet bliver ikke tilføjet til DOM. Kan man gøre noget?

10 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #3427 @ 28.05.12 17:14

1.520

hvis det kan ses må det da også være i DOMen, ellers er jeg ikke helt med.

Bruger #5097 @ 28.05.12 17:17

818

Mener jeg ikke. I den indlæst tekst har jeg en alert(), som ikke bliver udskrevet.
Kan heller ikke hente deres dom elementer med $("#boks")...

Ved ikke hvad man kan gøre...

Har fundet følgende eksempel på præcis det samme problem. Deres løsning løser bare ikke mit problem da jeg vil kunne bruge jQuery i den kode jeg indlæser.
http://stackoverflow.com/questions/6221399/reopen-loaded-jquery-div-dialog

Indlæg senest redigeret d. 28.05.2012 17:19 af Bruger #5097

Bruger #3427 @ 28.05.12 17:44

1.520

kan du ikke poste noget kode, jeg ikke sikker på jeg stadig ikke forstår dit problem?

Kode

<?php if(isset($_GET["ajax"])){?>
<div class="a">
  indhold..
</div>
<?php die; }?>

<html>
  <head>
    <script type="text/javascript" src="/interface/js/libs/jquery-1.6.2.js"></script>
  </head>
  <body>
    <div id="con"></div>
    
    <script>
    $(function(){
      $("#con").load("test.php?ajax=1", function(){
        alert($(".a").html()); //kan godt tilgå .a fra det der kommer i .load() (som er i DOMen)
      });
    });
    </script>
      
  </body>
</html>

eller med dialog

Kode

<?php if(isset($_GET["ajax"])){?>
<h2 class="overskrift">title her <?php echo rand(0,999);?></h2>
<div class="body">indhold..</div>
<?php die; }?>

<html>
  <head>
    <script type="text/javascript" src="/interface/js/libs/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="/interface/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
  </head>
  <body>
    <button>Tryk her</button>
    
    <script>
    $(function(){
      $("button").click(function(){
        $("<div/>").load("test.php?ajax=1", function(){
          $(this).dialog({
            title: $(this).find("h2").html(),
            close: function(){
              $(this).remove();
            }
          })
        });
      });
      
    });
    </script>
      
  </body>
</html>

Indlæg senest redigeret d. 28.05.2012 17:51 af Bruger #3427

Bruger #5097 @ 28.05.12 18:14

818

Hey. Tja jo altså teksten bliver loadet ind i en dialog. Men det er ikke som sådan det der er problemet.
Problemet er at det ikke bliver loadet.

Når der klikkes på en knap sker følgende:

Kode

 function retClick(a) {
   var urladresse = "ret.php?id="+($(a).parent().children(".id").val());

    $("#dialog").load(urladresse);	
		$('#dialog').dialog('open');
  }

Filen der loades fra har følgende:

Filen der loades benytter et colorpicker plugin:

<div id='colorSelector2'><div style='background-color: #".utf8_encode($row['color'])."'></div></div>
<div id='colorpickerHolder2'>
</div>

Læs om jQuery colorpicker pluginet:
http://www.eyecon.ro/colorpicker/

Men når jeg loader så virker colorpicker ikke. Det skyldes at jQuery koden ikke bliver kørt. Besøger jeg selv filen (uden brug af AJAX) virker colorpicker fint..

Bruger #10216 @ 28.05.12 18:17

4.283

Lur lidt på denne: http://stackoverflow.com/questions/1317080/jquery-ajax-load-java-script-not-executing

fundet via: https://www.google.dk/search?hl=da&q=ajax+loaded+javascript+not+executed&oq=ajax+loaded+javascript+not+executed&aq=f&aqi=&aql=&gs_l=serp.12...4508.8303.0.16986.4.2.2.0.0.0.77.149.2.2.0...0.0.Nn4DixGVYbA

Bruger #3427 @ 28.05.12 18:21

1.520

Du skal kalde din colorpicker function efter at du har indlæset dit indhold, noget ala det her:

JScript kode

 function retClick(a) {
    var urladresse = "ret.php?id="+($(a).parent().children(".id").val());
    $("#dialog").load(urladresse, function(){
           $(this).find("#colorSelector2").ColorPicker();
           $("#dialog").dialog("open");
    });
 }

Bruger #5789 @ 28.05.12 18:44

640

kig på den gamle "live()", ellers "on()" mht til jquery

Det der rer vist ikke optimalt, eller, performance mæssigt sundt

Bruger #5097 @ 28.05.12 18:59

818

Det gør jeg også. Men gør jeg fra en includet js fil:

Kode

(function($){
	var initLayout = function() {
		var hash = window.location.hash.replace('#', '');
		var currentTab = $('ul.navigationTabs a')
							.bind('click', showTab)
							.filter('a[rel=' + hash + ']');
		if (currentTab.size() == 0) {
			currentTab = $('ul.navigationTabs a:first');
		}
		showTab.apply(currentTab.get(0));
		$('#colorpickerHolder2').ColorPicker({
			flat: true,
			color: $('#colorfield').val(),
			onSubmit: function(hsb, hex, rgb) {
				$('#colorSelector2 div').css('backgroundColor', '#' + hex);
        $('#colorfield').val(hex);
			}
		});
		$('#colorpickerHolder2>div').css('position', 'absolute');
		var widt = false;
		$('#colorSelector2').bind('click', function() {
			$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});

		$('#colorSelector').ColorPicker({
			color: '#0000ff',
			onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
			},
			onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				$('#colorSelector div').css('backgroundColor', '#' + hex);
			}
		});
	};
	
	var showTab = function(e) {
		var tabIndex = $('ul.navigationTabs a')
							.removeClass('active')
							.index(this);
		$(this)
			.addClass('active')
			.blur();
		$('div.tab')
			.hide()
				.eq(tabIndex)
				.show();
	};
	
	EYE.register(initLayout, 'init');
})(jQuery)

Jokke. Tak for infoen. Jeg prøver lige at kikke lidt på det.

Indlæg senest redigeret d. 28.05.2012 18:59 af Bruger #5097

Bruger #5789 @ 29.05.12 02:11

640

EYE.register(initLayout, 'init');

Hvad gør den ?

Bruger #5097 @ 29.05.12 22:07

818

Ingen anelse. Er en del af pluginet at det skal skrives. He he... Går ud fra det er et internal kald

Indlæg senest redigeret d. 29.05.2012 22:07 af Bruger #5097

load nyt til DOM med jQuery

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler