Coesistenza di 2 script jquery nella stessa pagina

[peppepegasus]

ciao,

ho realizzato una pagina che usa 2 script jquery: uno per poter inserire dei commenti tipo facebook e uno che cliccando su un link apre una finestra con del contenuto prelevato in maniera dinamica..ecco i due javascript nella parte dell'head:

<link rel="stylesheet" type="text/css" href="../../style.css" title="demo" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery.custom.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.custom.css" rel="stylesheet" type="text/css"/>
</script>
	
<link href="frame.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button").click(function(){

var element = $(this);
var I = element.attr("id");

$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active"); 

return false;});});
</script>

<script type="text/javascript">
$(document).ready(function()
{
$(".comment_submit").click(function(){

var element = $(this);
var Id = element.attr("id");

var test = $("#textboxcontent"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
var idmsg=Id;

if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash"+Id).show();
$("#flash"+Id).fadeIn(400).html('[img]ajax-loader.gif[/img] loading.....');


$.ajax({
type: "POST",
url: "insertajax.php",
data: dataString,
cache: false,
success: function(html){
$("#loadplace"+Id).append(html);
$("#flash"+Id).hide();
}
});

}

return false;});});
</script>
	
<script type="text/javascript">
	$(document).ready(function(){
    $("a#open").click(function(){
        $('#finestra').dialog("open");
		width: 850;
        return false;
    });
 
    $('#finestra').dialog({
        modal: true,
        autoOpen: false,
		width: 550,
		height: 300,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                }
            }
        });
    });
</script>

</head>

nel body seguono i codici html che vengono poi utilizzati dai javascript.
il problema è che il secondo, cioè quello che cliccando sul link deve aprire una finestra, non funziona! sembra che i due script insieme non possono coesistere, qualcuno mi dare una mano? mi sembra strano che in una pagina non possano coesistere più di 2 script!
grazie..

[Vindav]

jquery va incluso nella pagina una volta soltanto tu la includi 3 volte

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

prova a lasciarne una sola e vedi se è questo il problema

[peppepegasus]

ciao,

è vero, non me ne ero accorto! comunque ho tolto le due inclusioni lasciandone una sola ma il problema non è quello perchè persiste.
grazie..

[Vindav]

stesso discorso per la funzione $(document).ready(function(){ va utilizzata una volta soltanto basta che ci inserisci tutti gli script che ti serva che partano al caricamento della pagina, non aprire e chiudere piu volte questa funzione.

<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button").click(function(){

var element = $(this);
var I = element.attr("id");

$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active"); 

return false;});});
</script>

<script type="text/javascript">
$(document).ready(function()   <-- tutto cio che sta qui va messo sopra nella prima chiamata del metodo
{
$(".comment_submit").click(function(){

var element = $(this);
var Id = element.attr("id");

var test = $("#textboxcontent"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
var idmsg=Id;

if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash"+Id).show();
$("#flash"+Id).fadeIn(400).html('[img]ajax-loader.gif[/img] loading.....');


$.ajax({
type: "POST",
url: "insertajax.php",
data: dataString,
cache: false,
success: function(html){
$("#loadplace"+Id).append(html);
$("#flash"+Id).hide();
}
});

}

return false;});});
</script>
	
<script type="text/javascript">
	$(document).ready(function(){  <-- come sopra 
    $("a#open").click(function(){
        $('#finestra').dialog("open");
		width: 850;
        return false;
    });
 
    $('#finestra').dialog({
        modal: true,
        autoOpen: false,
		width: 550,
		height: 300,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                }
            }
        });
    });
</script>

inoltre trovo inutile aprire e chiudere continuamente il tag script anche qui puo essere fatto tutto all'interno dello stesso tag, come hai fatto tu non crea problemi è solo una questione di "pulizia" del codice

[gianiaz]

Originariamente inviato da peppepegasus
ciao,

è vero, non me ne ero accorto! comunque ho tolto le due inclusioni lasciandone una sola ma il problema non è quello perchè persiste.
grazie..

Quale hai tolto? perchè se usi jquery 1.3 non so se jquery ui 1.8 funziona.

[peppepegasus]

ciao,

ho sostituito il $ con un altro valore usando una semplice funzione, credo di usare jquery 1.8.
quanto a ciò che consiglia Vindav cercherò di fare pulizia in modo da avere una solo apertura e chiusura del tag script e un'unica $(document).ready(function()
grazie vi aggiorno se funziona..speriamo..
grazie.
ciao.

[gianiaz]

jquery 1.8 non esiste, l'ultima versione è la 1.6.

la 1.8 è la versione di jquery ui, non ricordo quale versione di jquery richieda.

L'ordine è una buona cosa, ma quelle regole non faranno funzionare il tuo codice a meno che mettendo ordine tu non trovi un errore :-)

ciao

[peppepegasus]

ciao,

si si 18.8 è jquery ui, mentre jquery è la 1.4.
in effetti avevi ragione: ho messo un po d'ordine ma niente la pagina non funziona come dovrebbe!

riposto il codice nel caso ci fosse qualche errore che a me sfugge:

<link rel="stylesheet" type="text/css" href="../../style.css" title="demo" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery.custom.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.custom.css" rel="stylesheet" type="text/css"/>
</script>
	
<link href="frame.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
$(".comment_button").click(function(){

var element = $(this);
var I = element.attr("id");

$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active"); 

return false;});



$(".comment_submit").click(function(){

var element = $(this);
var Id = element.attr("id");

var test = $("#textboxcontent"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
var idmsg=Id;

if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash"+Id).fadeIn(400).html('[img]ajax-loader.gif[/img] loading.....');


$.ajax({
type: "POST",
url: "insertajax.php",
data: dataString,
cache: false,
success: function(html){
$("#loadplace"+Id).append(html);
$("#flash"+Id).hide();
}
});

}

return false;});

    $("a#open").click(function(){
       $('#finestra').dialog("open");
		width: 850;
        return false;
    });
 
    $('#finestra').dialog({
        modal: true,
        autoOpen: false,
		width: 550,
		height: 300,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                }
            }
        });
    });
</script>

</head>

grazie..spero qualcuno possa aiutarmi..

[gianiaz]

Questi 2 file non esistono, puoi toglierli, ma anche in questo caso il problema non è qui:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery.custom.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.custom.css" rel="stylesheet" type="text/css"/>

non vorrei dire una cavolata, perchè leggere il codice cosi è difficile, ma questo:

 $("a#open").click(function(){
       $('#finestra').dialog("open");
		width: 850;
        return false;
    });
 
    $('#finestra').dialog({
        modal: true,
        autoOpen: false,
		width: 550,
		height: 300,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                }
            }
        });
    });

sembra fuori dal document.ready, quindi potrebbe anche essere che cerchi di eseguire del codice quando il dom non è ancora pronto...

[peppepegasus]

ok tralasciando i 2 file che non esistono...ho provato a indentare meglio ecco il risultato

<script type="text/javascript">

$(document).ready(function()
{
	$(".comment_button").click(function(){
	
		var element = $(this);
		var I = element.attr("id");
		
		$("#slidepanel"+I).slideToggle(300);
		$(this).toggleClass("active"); 
	
	return false; });

	$(".comment_submit").click(function(){	
		var element = $(this);
		var Id = element.attr("id");
		
		var test = $("#textboxcontent"+Id).val();
		var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
		var idmsg=Id;

		if(test=='')
		{
			alert("Please Enter Some Text");
		}
		else
		{
			$("#flash"+Id).fadeIn(400).html('[img]ajax-loader.gif[/img] loading.....');

		$.ajax({
		type: "POST",
		url: "insertajax.php",
		data: dataString,
		cache: false,
		success: function(html){
		$("#loadplace"+Id).append(html);
		$("#flash"+Id).hide();
		}
	});

	return false;});

    $("a#open").click(function(){
       $('#finestra').dialog("open");
		width: 850;
        return false;
    });
 
    $('#finestra').dialog({
        modal: true,
        autoOpen: false,
		width: 550,
		height: 300,
        buttons: {
            "Chiudi": function() {
                $( this ).dialog( "close" );
                }
            }
        });
	});
});
</script>

mmh..così mi sembra sia incluso..ho provato a togliere qualche parentesi graffa alla fine però niente..purtroppo non conosco javascript e non riesco a capire dove e con chi chiudono le parentesi.
grazie.
ciao.