Η javascript δεν παίζει όταν καλείται σε αρχείο με ajax

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
freds
Δημοσιεύσεις: 320
Εγγραφή: 24 Φεβ 2005 16:11

Η javascript δεν παίζει όταν καλείται σε αρχείο με ajax

Δημοσίευση από freds » 13 Αύγ 2011 01:47

Έχω δύο αρχεία το index.php και το index_ajax1.php. Από το index.php καλώ το index_ajax1.php το οποίο περιέχει λίγη από javascript.

Ενώ το index_ajax1.php μόνο του λειτουργεί κανονικά, όταν το καλώ μέσω ajax τότε η javascript δεν τρέχει.

Θα δώσω τα πολύ απλά παραδείγματα παρακάτω.

index.php

Κώδικας: Επιλογή όλων

<script type="text/javascript">
function showCat&#40;str,getvar&#41;
&#123;
  document.getElementById&#40;"txtHintCat"&#41;.innerHTML='<img src="images/loading.gif" width="50"/>';
if &#40;str==""&#41;
  &#123;
  document.getElementById&#40;"txtHintCat"&#41;.innerHTML="";
  return;
  &#125;
if &#40;window.XMLHttpRequest&#41;
  &#123;// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest&#40;&#41;;
  &#125;
else
  &#123;// code for IE6, IE5
  xmlhttp=new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
  &#125;
xmlhttp.onreadystatechange=function&#40;&#41;
  &#123;
  if &#40;xmlhttp.readyState==4 && xmlhttp.status==200&#41;
    &#123;
    document.getElementById&#40;"txtHintCat"&#41;.innerHTML=xmlhttp.responseText;
    &#125;
  &#125;
xmlhttp.open&#40;"GET","index_ajax1.php?"+getvar+"="+str,true&#41;;
xmlhttp.send&#40;&#41;;
&#125;
</script>

<body onload="showCat&#40;'all','catid'&#41;;">

      <div align="center"><a href="#" onClick="showCat&#40;'3','id'&#41;">Show Counter</a><br> 

		<div id="txtHintCat"></div>
		
    </div>
</body>
index_ajax1.php

Κώδικας: Επιλογή όλων

<script type="text/javascript">
dateFuture1 = new Date&#40;2011,8,19,10,00,00&#41;;
dateFuture2 = new Date&#40;2011,10,3,9,00,00&#41;;

function GetCount&#40;ddate,iid&#41;&#123;

dateNow = new Date&#40;&#41;; //grab current date
amount = ddate.getTime&#40;&#41; - dateNow.getTime&#40;&#41;; //calc milliseconds between dates
delete dateNow;

// if time is already past
if&#40;amount < 0&#41;&#123;
document.getElementById&#40;iid&#41;.innerHTML="Now!";
&#125;
// else date is still good
else&#123;
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor&#40;amount/1000&#41;;//kill the "milliseconds" so just secs

days=Math.floor&#40;amount/86400&#41;;//days
amount=amount%86400;

hours=Math.floor&#40;amount/3600&#41;;//hours
amount=amount%3600;

mins=Math.floor&#40;amount/60&#41;;//minutes
amount=amount%60;

secs=Math.floor&#40;amount&#41;;//seconds

if&#40;days != 0&#41;&#123;out += days +" "+&#40;&#40;days==1&#41;?"day"&#58;"days"&#41;+", ";&#125;
if&#40;hours != 0&#41;&#123;out += hours +" "+&#40;&#40;hours==1&#41;?"hour"&#58;"hours"&#41;+", ";&#125;
out += mins +" "+&#40;&#40;mins==1&#41;?"min"&#58;"mins"&#41;+", ";
out += secs +" "+&#40;&#40;secs==1&#41;?"sec"&#58;"secs"&#41;+", ";
out = out.substr&#40;0,out.length-2&#41;;
document.getElementById&#40;iid&#41;.innerHTML=out;

setTimeout&#40;function&#40;&#41;&#123;GetCount&#40;ddate,iid&#41;&#125;, 1000&#41;;
&#125;
&#125;

window.onload=function&#40;&#41;&#123;
GetCount&#40;dateFuture1, 'countbox1'&#41;;
GetCount&#40;dateFuture2, 'countbox2'&#41;;
&#125;;

</script>

gg 
<div id="countbox1"></div>
<div id="countbox2"></div> hh
Μπορεί να μου πει κάποιος τι γίνεται και πως μπορούμε να το κάνουμε να τρέξει;

Τα gg και hh τα έχω βάλει για να σιγουρευτώ ότι το αρχείο πραγματικά φορτώνει.


Ευχαριστώ.

Άβαταρ μέλους
manos2010grr
Δημοσιεύσεις: 159
Εγγραφή: 17 Ιαν 2007 18:13
Επικοινωνία:

Η javascript δεν παίζει όταν καλείται σε αρχείο με ajax

Δημοσίευση από manos2010grr » 13 Αύγ 2011 04:32

Θα σου δείξω ένα απλό παράδειγμα με jquery αν σε ενδιαφέρει!!

page1

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
$&#40;'#show'&#41;.click&#40;function&#40;&#41;&#123; 									  
	$&#40;'#txtHintCat'&#41;.append&#40;'<div id="showmeclock"></div>'&#41;;
	$&#40;'#showmeclock'&#41;.load&#40;'2.html'&#41;;
 &#125;&#41;;
&#125;&#41;;
</script>
<body>

      <div align="center"><a href="#" id="show">Show Counter</a><br>

      <div id="txtHintCat"></div>
      
    </div>
</body>
page2

Κώδικας: Επιλογή όλων

<script type="text/javascript">
dateFuture1 = new Date&#40;2011,8,19,10,00,00&#41;;
dateFuture2 = new Date&#40;2011,10,3,9,00,00&#41;;

function GetCount&#40;ddate,iid&#41;&#123;

dateNow = new Date&#40;&#41;; //grab current date
amount = ddate.getTime&#40;&#41; - dateNow.getTime&#40;&#41;; //calc milliseconds between dates
delete dateNow;

// if time is already past
if&#40;amount < 0&#41;&#123;
document.getElementById&#40;iid&#41;.innerHTML="Now!";
&#125;
// else date is still good
else&#123;
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor&#40;amount/1000&#41;;//kill the "milliseconds" so just secs

days=Math.floor&#40;amount/86400&#41;;//days
amount=amount%86400;

hours=Math.floor&#40;amount/3600&#41;;//hours
amount=amount%3600;

mins=Math.floor&#40;amount/60&#41;;//minutes
amount=amount%60;

secs=Math.floor&#40;amount&#41;;//seconds

if&#40;days != 0&#41;&#123;out += days +" "+&#40;&#40;days==1&#41;?"day"&#58;"days"&#41;+", ";&#125;
if&#40;hours != 0&#41;&#123;out += hours +" "+&#40;&#40;hours==1&#41;?"hour"&#58;"hours"&#41;+", ";&#125;
out += mins +" "+&#40;&#40;mins==1&#41;?"min"&#58;"mins"&#41;+", ";
out += secs +" "+&#40;&#40;secs==1&#41;?"sec"&#58;"secs"&#41;+", ";
out = out.substr&#40;0,out.length-2&#41;;
document.getElementById&#40;iid&#41;.innerHTML=out;

setTimeout&#40;function&#40;&#41;&#123;GetCount&#40;ddate,iid&#41;&#125;, 1000&#41;;
&#125;
&#125;


GetCount&#40;dateFuture1, 'countbox1'&#41;;
GetCount&#40;dateFuture2, 'countbox2'&#41;;


</script>

gg
<div id="countbox1"></div>
<div id="countbox2"></div> hh

Σε εμένα τρέχει μια χαρά..Ελπίζω κάπως να σε βοήθησα!!

freds
Δημοσιεύσεις: 320
Εγγραφή: 24 Φεβ 2005 16:11

Η javascript δεν παίζει όταν καλείται σε αρχείο με ajax

Δημοσίευση από freds » 13 Αύγ 2011 15:42

Καλημέρα,

Πραγματικά αυτό μου δούλεψε και εμένα. Ευχαριστώ.

Μου δημιουργήθηκαν όμως κανα δυο τρεις :hammer: απορίες.

1. Πως μπορώ να τρέχω το αρχείο onload αλλά και onclick;
2. Πως μπορώ να του δίνω μεταβλητές ώστε να εμφανίζει κάτι από βάση σύμφωνα με τις μεταβλητές μου. Το θέμα εδώ δεν είναι η βάση αλλά στον κώδικα που μου έδωσες πως μπορώ να περάσω τις μεταβλητές μου;
3. Στο αρχείο που φορτώνει έχω κάποιες φωτογραφίες στις οποίες θέλω να έχω preview αλλά δεν τρέχει. Τι μπορεί να φταίει;
4. πως μπορώ να εμφανίζω μία loading φωτο καθώς φορτώνει το καλούμενο αρχείο;

Για παράδειγμα στο λινκ

Κώδικας: Επιλογή όλων

<a href="#" onclick="show&#40;'3','id'&#41;">Link me metavlites1</a>
θα ήθελα το id να πάρει την τιμή 3.
Ή στο

Κώδικας: Επιλογή όλων

<a href="#" onclick="show&#40;'John','name'&#41;">Link me metavlites2</a>
θα ήθελα το name να πάρει την τιμή John. κλπ

Σου δίνω έτοιμο το παράδειγμα μήπως μπορέσεις να δώσεις καμιά λύση γιατί από την πλευρά μου δεν τον βλέπω. :lol:

index.php

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery/imgpreview/main.js" type="text/javascript"></script>

<style>
.list_preview&#123;
	list-style&#58;none;
	margin-left&#58;-40;
	margin-bottom&#58;-12;
&#125;

#preview&#123;
	position&#58;absolute;
	border&#58;1px solid #ccc;
	background&#58;#333;
	padding&#58;5px;
	display&#58;none;
	color&#58;#fff;
	&#125;
</style>

</head>

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
$&#40;'#show'&#41;.click&#40;function&#40;&#41;&#123;                             
   $&#40;'#txtHintCat'&#41;.append&#40;'<div id="showmeclock"></div>'&#41;;
   $&#40;'#showmeclock'&#41;.load&#40;'index_ajax1.php'&#41;;
 &#125;&#41;;
&#125;&#41;;
</script>

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0" onload="showDeals&#40;'all','catid'&#41;;">

<div align="center">
		
      <a href="#" id="show">Show Counter</a><br> 		
		
	  <a href="#" onclick="show&#40;'3','id'&#41;">Link me metavlites</a><br>

      <img src="http&#58;//www.google.gr/images/srpr/logo3w.png" id="http&#58;//www.google.gr/images/srpr/logo3w.png" class="preview" width="185" height="130">
	  
	  </div>
	  
    <div align="center">

      		<div id="txtHintCat"></div>
     
    </div>
 
</body>
index_ajax1.php

Κώδικας: Επιλογή όλων

<img src="http&#58;//www.google.gr/images/srpr/logo3w.png" id="http&#58;//www.google.gr/images/srpr/logo3w.png" class="preview" width="185" height="130">
main.js

Κώδικας: Επιλογή όλων

this.imagePreview = function&#40;&#41;&#123;	
	/* CONFIG */
		
		xOffset = -10;
		yOffset = -175;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$&#40;"img.preview"&#41;.hover&#40;function&#40;e&#41;&#123;
		this.t = this.title;
		this.title = "";	
		var c = &#40;this.t != ""&#41; ? "<br/>" + this.t &#58; "";
		$&#40;"body"&#41;.append&#40;"<p id='preview'><img src='"+ this.id +"' alt='Image preview' width=350/>"+ c +"</p>"&#41;;								 
		$&#40;"#preview"&#41;
			.css&#40;"top",&#40;e.pageY - xOffset&#41; + "px"&#41;
			.css&#40;"left",&#40;e.pageX + yOffset&#41; + "px"&#41;
			.fadeIn&#40;"fast"&#41;;						
    &#125;,
	function&#40;&#41;&#123;
		this.title = this.t;	
		$&#40;"#preview"&#41;.remove&#40;&#41;;
    &#125;&#41;;	
	$&#40;"img.preview"&#41;.mousemove&#40;function&#40;e&#41;&#123;
		$&#40;"#preview"&#41;
			.css&#40;"top",&#40;e.pageY - xOffset&#41; + "px"&#41;
			.css&#40;"left",&#40;e.pageX + yOffset&#41; + "px"&#41;;
	&#125;&#41;;			
&#125;;


// starting the script on page load
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
	imagePreview&#40;&#41;;
&#125;&#41;;

freds
Δημοσιεύσεις: 320
Εγγραφή: 24 Φεβ 2005 16:11

Η javascript δεν παίζει όταν καλείται σε αρχείο με ajax

Δημοσίευση από freds » 13 Αύγ 2011 16:09

Σχετικά με το preview το θέμα λύθηκε. έβαλα το main.js kαι το style στο καλούμενο αρχείο. Τα άλλα παραμένουν.

Επίσης και με την loading φωτο εντάξει, νομίζω. Άλλαξα τον κώδικα στο παρακάτω.

Κώδικας: Επιλογή όλων

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
$&#40;'#show'&#41;.click&#40;function&#40;&#41;&#123;    
   $&#40;'#txtHintCat'&#41;.empty&#40;&#41;;
   $&#40;'#txtHintCat'&#41;.append&#40;'<img src="images/loading.gif" width="50"/>'&#41;;
   $&#40;'#txtHintCat'&#41;.load&#40;'index_ajax1.php'&#41;;
 &#125;&#41;;
&#125;&#41;;
</script>

freds
Δημοσιεύσεις: 320
Εγγραφή: 24 Φεβ 2005 16:11

Η javascript δεν παίζει όταν καλείται σε αρχείο με ajax

Δημοσίευση από freds » 13 Αύγ 2011 17:51

Τελικά λύθηκαν όλα. :kaloe:

Έκανα την εξής αλλαγή στον κώδικα

Κώδικας: Επιλογή όλων

function show&#40;getvar,str&#41;&#123; 
  $&#40;"#txtHintCat"&#41;.show&#40;&#41;; 
  $&#40;'#txtHintCat'&#41;.empty&#40;&#41;;
  $&#40;'#txtHintCat'&#41;.append&#40;'<img src="images/loading.gif" width="50"/>'&#41;;
  $&#40;'#txtHintCat'&#41;.load&#40;"index_ajax1.php?"+getvar+"="+str&#41;;
&#125; 
και τρέχω τα λίνκς ως εξής:

Κώδικας: Επιλογή όλων

 <a href="#" onclick="show&#40;'name','John'&#41;">Link me metavlites</a>
Έβαλα και ένα onload="show('name','John') στο body και είμαστε εντάξει.

Ευχαριστώ για την βοήθεια. Πάνω σε αυτό που πρότεινες πάτησα και τελικά το έφερα εκεί που ήθελα. Έδωσα και τις λύσεις όπως τις ήθελα εγώ μήπως βοηθήσει κάποιον.

Thanks.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης