Autorius Tema: AJAX .load failą, su javascript viduj (Skaityta 761 kartus)

Tautvydas · « **Įrašytas:** 2014-08-01 10:53:10 am »

Sveiki,

bandau loadinti failą taip:
$( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {});

Viskas ok, veikia gerai. O dabar noriu, kad tame faile dar ir tooltips'us sugeneruotų ant tų foto. Tai tame faile viduj įdėjau kodą:

Kodas: [Pasirinkti]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/tipr.css">
<script type="text/javascript" src="js/tipr.js"></script>

<script>
$(document).ready(function() {
     $('.tip').tipr({
          'speed': 300
     });
});
</script>

Na ir pirmą kartą AJAX .load įvygdžius viskas ok, rodo tuos tooltipsus. Tačiau antrą kartą nebeina padaryti ajax užklausos ( nuotraukų įkėlimo skriptas ten. Pirmą nuotrauką įkelia, o jau antrą kartą spaudžiant nebeatlieka ajax funkcijų ir tinklapis persikrauna į tą failą, į kurį tik turi kreiptis )

Kaip tai pataisyti? jeigu nuimu javascriptus iš to vidinio failo, viskas vėl veikia gražiai. Gal eina kažkaip padaryti, kad po ajax užklausos išnaujo užsikrautų tooltipai ant naujai sugeneruoto turinio?

ganjabest · « **Atsakymas #1 Įrašytas:** 2014-08-01 18:20:06 pm »

$(document).ready(); reiskia, kad kodas "inicijuojamas" tada kaip html'as(kitaip sakant - puslapis perkrovimo metu) uzsikrauna. Norint priversti veikti naujus html elementus iterptus per ajax ir t.t. su tooltip'u, tai ten kur yra load ir function() {} idek sita $('.tip').tipr({'speed': 300});, gal pades, bet siaip tai nelabai cia aiskiai paaiskinai zinok. Nes kur, kas, kaip cia vyksta nelabai ir parisau.

Kodas: [Pasirinkti]

<script>
$( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {
    $('.tip').tipr({
          'speed': 300
     });
});
</script>

Tautvydas · « **Atsakymas #2 Įrašytas:** 2014-08-01 22:06:50 pm »

Kodas: [Pasirinkti]

$(document).ready(function() { 
	var options = { 
			target:   '#output',   // target element(s) to be updated with server response 
			beforeSubmit:  beforeSubmit,  // pre-submit callback 
			success:       afterSuccess,  // post-submit callback 
			type: "POST",
			data: { id: <?php echo $id; ?> },
			resetForm: true        // reset the form after successful submit 
		}; 
		
	 $('#MyUploadForm').submit(function() { 
			$(this).ajaxSubmit(options);  			
			// always return false to prevent standard browser submit and page navigation 
			  $('.tip').tipr({
				  'speed': 300
			 });
			return false; 
			
		}); 
	
		$('#imageInput').change(function() { 
			$('#MyUploadForm').trigger('submit');
		}); 	
	
}); 

function afterSuccess()
{
	$("#output").html("Nuotrauka įkelta. Galite įkelti kitą. ");
	$('#loading-img').hide(); //hide submit button
	$( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {});
	
	// vel tipus uzdedam
	 $('.tip').tipr({
          'speed': 300
     });
}

Nei vienam nei antram įdėjus nesuveikia man šitas :/

ganjabest · « **Atsakymas #3 Įrašytas:** 2014-08-02 10:10:17 am »

Kad tavo sintakse baisi zinok ir vistiek neaisku ka tu nori padaryti. Kas isvis tam php faile yra? Koks html kodas ir t.t.?? Neaiskeregiai cia susirinke zinok

Manualai.lt Forumas · « **Atsakymas #3 Įrašytas:** 2014-08-02 10:10:17 am »

Tautvydas · « **Atsakymas #4 Įrašytas:** 2014-08-02 16:41:24 pm »

Čia iš interneto trauktas photo upload skriptas, dabar neberandu kur jis yra.

Žodžiu MyUploadForm paspaudus, pasirinkus nuotrauką įjungia funkciją "$(this).ajaxSubmit(options); "

Ji kreipiasi į processupload.php failą, kuris tiesiog apdoroja nuotrauką, sumažina, įkelia kur reikia ir t.t.
Tada įsijungia afterSuccess funkcija, o ji atspausdina į <div id='output'> tekstą "Nuotrauka įkelta. Galite įkelti kitą" bei iš failo nuotraukų_krovimas.php atnaujina visų nuotraukų sąrašiuką ( iškarto atnaujina visą <div id='nuotraukos'>

Dabar aiškiau? Sorry, tiesiog kai pats šitą makalynę suprantu, kai per notepad++ žiūri, atrodo viskas aiškiai

Tai va, kaip padaryti, kad kai jau po visų tų success ir $( "#nuotraukos" ).load užkrovimo, naujai priskirtų visiems tip'sams tą funkciją:
$('.tip').tipr({
'speed': 300
});

ganjabest · « **Atsakymas #5 Įrašytas:** 2014-08-07 11:12:54 am »

Visi tavo atnaujinami elementai turi turet klase "tip" (cia pagal tavo pvz kalbu). Ir visa sita funkcija kaip ir jau sakiau turi ideti, po saraso atnaujinimo. Tiksliau i ta savo afterSuccess funckija, po viso saraso atnaujinimo. Pabreziu dar karta, kad funkcija veiktu ja reikia iskviesti, kaip visas html jau yra uzkrautas, todel ir reikia ja iskviesti po saraso atnaujinimo.

Tautvydas · « **Atsakymas #6 Įrašytas:** 2014-08-07 11:15:38 am »

O tai čia nėra užkrovimas PO to, kai ajax'as užloadina naują turinį?

Kodas: [Pasirinkti]

function afterSuccess()
{
	$("#output").html("Nuotrauka įkelta. Galite įkelti kitą. ");
	$('#loading-img').hide(); //hide submit button
	$( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {});
	
	// vel tipus uzdedam
	 $('.tip').tipr({
          'speed': 300
     });
}

? Nes šis variantas neveikia, jį iškarto bandžiau padaryti.
Ar gal problema, kad tuos tipr() priskirimus ne vieną syki tame pačiame puslapyje darau?

ganjabest · « **Atsakymas #7 Įrašytas:** 2014-08-07 11:25:29 am »

Citata iš: Tautvydas 2014-08-07 11:15:38 am

O tai čia nėra užkrovimas PO to, kai ajax'as užloadina naują turinį?

Kodas: [Pasirinkti]
function afterSuccess() { $("#output").html("Nuotrauka įkelta. Galite įkelti kitą. "); $('#loading-img').hide(); //hide submit button $( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {}); // vel tipus uzdedam $('.tip').tipr({ 'speed': 300 }); }
? Nes šis variantas neveikia, jį iškarto bandžiau padaryti.
Ar gal problema, kad tuos tipr() priskirimus ne vieną syki tame pačiame puslapyje darau?

as tau jau rodziau kur iterpti

Kodas: [Pasirinkti]

function afterSuccess()
{
	$("#output").html("Nuotrauka įkelta. Galite įkelti kitą. ");
	$('#loading-img').hide(); //hide submit button
	$( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {
                // vel tipus uzdedam
	       $('.tip').tipr({
                      'speed': 300
               });
        });
}

Aisku dar klausimas, ar teisingai uzkraunami failai(bilioteku eiliskumas ir etc.). O isvis, tai juk gali pasiziureti per narsykle kur klaida. Ant firefox parsisiunti firebug, ant chromes originaliai yra . Ir kaip spaudi inspect element ir etc. ten yra console skiltis. Jeigu bus klaida tau viska parodys.

Tautvydas · « **Atsakymas #8 Įrašytas:** 2014-08-26 13:25:21 pm »

Vo, dabar veikia. Prieš tai turbūt nepastebėjau skirtumo tarp kodų. Dabar matau, kad tavasis į tą function() įterptas yra. Bet vat nesuprantu kuom čia skiriasi.

Kodėl po šito:
$( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {});

įterpus tą .tipr() nesuveikia, o vat į .load() function() { ČIA ĮTERPUS } jau veikia? Šitą jei suprasiu, tai kitą kartą tokių problemų nebeturėtų kilti.
Betkuriuo atveju dėkui

ganjabest · « **Atsakymas #9 Įrašytas:** 2014-08-26 14:07:59 pm »

Cia yra callback funckija. Ir siuo atveju ji yra ivykdoma tik tada kaip 100% yra uzkraunamas turinys is load. Tai yra vykdo sita koda paskiausia. O paskiausia reikia ivykdyti sita koda del to, kad javascripto selektoriai dirba tik su jau uzkrautu html'u. Tavo atveju paprasciausia nerasdavo tos klases, nes tas html'as dar nebudavo uzkrautas.

Tautvydas · « **Atsakymas #10 Įrašytas:** 2014-08-26 14:10:33 pm »

Supratau, ačiūū

SniuurksT · « **Atsakymas #11 Įrašytas:** 2014-08-26 18:37:16 pm »

Manyčiau naudoti php ajax`e labai apsunkina vėlesni susigaudyma kode, vietoj <?php echo $id; ?> galima būtų priskirtį kokį var su data pvz:

var foto_id = $("#nuotrauka").data("fotoid");
o #nuotrauka priskirti data-fotoid = "<?php echo $id; ?>"

Citata iš: ganjabest 2014-08-07 11:25:29 am

Citata iš: Tautvydas 2014-08-07 11:15:38 am
O tai čia nėra užkrovimas PO to, kai ajax'as užloadina naują turinį?

Kodas: [Pasirinkti]
function afterSuccess() { $("#output").html("Nuotrauka įkelta. Galite įkelti kitą. "); $('#loading-img').hide(); //hide submit button $( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() {}); // vel tipus uzdedam $('.tip').tipr({ 'speed': 300 }); }
? Nes šis variantas neveikia, jį iškarto bandžiau padaryti.
Ar gal problema, kad tuos tipr() priskirimus ne vieną syki tame pačiame puslapyje darau?

as tau jau rodziau kur iterpti

Kodas: [Pasirinkti]
function afterSuccess() { $("#output").html("Nuotrauka įkelta. Galite įkelti kitą. "); $('#loading-img').hide(); //hide submit button $( "#nuotraukos" ).load( "nuotrauku_krovimas.php", { id: <?php echo $id; ?> }, function() { // vel tipus uzdedam $('.tip').tipr({ 'speed': 300 }); }); }
Aisku dar klausimas, ar teisingai uzkraunami failai(bilioteku eiliskumas ir etc.). O isvis, tai juk gali pasiziureti per narsykle kur klaida. Ant firefox parsisiunti firebug, ant chromes originaliai yra . Ir kaip spaudi inspect element ir etc. ten yra console skiltis. Jeigu bus klaida tau viska parodys.

Manualai.lt Forumas · « **Atsakymas #11 Įrašytas:** 2014-08-26 18:37:16 pm »

Manualai.lt Forumas

Naujienos: