interazione tra javascript e php

[Werwolfe]

Questo è il demo, ma forse sono riuscito a farlo funzionare , forse...

http://www.artedicreare.com/adminware_1.0/prova.php


Forse sono sulla buona strada, se uso ajax così

<script type="text/javascript">
function showAjaxModal()
{
	$('#modal-7').modal('show', {backdrop: 'static'});
	
	$.ajax({
		url: "prova_2.php?id=3",
                data:[id=2],
		success: function(response)
		{
			$('#modal-7 .modal-body').html(response);
		}
	});
}
</script>

:

l'id lo lancia perfettamente, ma il mio problema è che id è dinamico, quindi dovrei farlo lanciare da :

<a href="javascript: showAjaxModal();"  class="btn btn-default">Modifica</a>

In modo che :

url: "prova_2.php?id=3",
si aggiorni dinamicamente come posso fare?

[Werwolfe]

Sto provando in questo modo ora ma neanche va :


[CODE]



<a href="javascript:$('#modal-4').modal('show', {backdrop: 'static'});" rel='1' class="btn btn-default">Show Me</a>



<!-- Modal 4 (Confirm)-->
<div class="modal fade" id="modal-4" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">Confirm Modal</h4>
</div>

<div class="modal-body">
<input type="text" value="<?php $_REQUEST['idLocaleFoto']?>" name="idLocaleFoto">


</div>

<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>

<script type="text/javascript">


    $(document).ready(function(e) {
    $("#modal-4 a:first-child").click(function(e) {
        
        var idLocaleFoto = $(this).attr("rel");
        $("#modal-body input#idLocaleFoto").val(idLocaleFoto);
//        $.ajax({
//            type: "POST",
//            url:"localiFoto-modifica.php",
//            data:{ idLocale: $(this).attr("rel"), idLocaleFoto: $(this).attr("title")},
//            success: function(response,state){
//            // successful request;
//                $('#email-verifica').val(response);
//                //alert(state);
//            },
//            error: function(){
//            // error request;
//                alert("impossibile contattare il server");
//            }
//        })
    e.preventDefault();
    })
    
})
</script>

la pagina dove ho caricato demo è :

http://www.artedicreare.com/adminware_1.0/prova4.php

[Shores]

In più in prova.php c'è un errore di javascript non appena si carica la pagina.

Il mio consiglio è di semplificare decisamente il tutto, perlomeno ai fini del debug ti conviene togliere tutto ciò che non è indispensabile, e prima di tutto risolvere tutti gli errori immediati di sintassi e altro; fino ad allora non capirai mai cosa non funziona!

[Werwolfe]

Ah scusami non avevo capito:

Ti mostro l'area e come ora funziona e come vorrei farla funzionare io :

Attualmente per inserire gli amministratore uso la finestra modale, per update invece uso un altro file, mentre io volevo che anche il modifica funzionasse dalla finestra modale, perchè è più bello e così uso solo un form.

dammi 5 minuti carico l'esempio a volo online

[Shores]

Perdonami, ma:

prova.php non effettua MAI nessuna chiamata ajax quando si clicca sul pulsante, quindi evidentemente c'è qualcosa che non va nella chiamata ajax.

prova4 invece ha proprio un errore di sintassi javascript, perchè invece di chiamare la funzione carica un'altra pagina...

[Werwolfe]

Ciao, ho fatto varie prove e ho cercato di semplificare il tutto, ma ancora non funziona e non capisco perchè, ti posto la pagina e il codice, sperando di risolvere sto impazzendo.


La pagina è questa :

http://www.artedicreare.com/adminware_1.0/prova_5.php#

il codice javascript è questo:

<script type="text/javascript">     
	jQuery(document).ready(function($)
{
	
	$(".gallery-env").on("click", ".image-thumb .image-options a.edit", function(ev)
	{
            ev.preventDefault();
		
		// This will open sample modal
		$("#album-image-options").modal('show');
		
		var srcFoto= $("#album-image-options img").attr("src",srcFoto);
		
        
        var id = $(this).attr("data-tag");
		$("#album-image-options input#id").val(id);
//	e.preventDefault();
	})
});	


</script>

dove è posizionata la foto

	<div class="gallery-env">

	


	<div class="row">
	
		<div class="col-sm-2 col-xs-4" data-tag="1d">
			
			<article class="image-thumb">
				
				<a href="#" class="image">
					<img src="assets/images/album-image-1.jpg" />
				</a>
				
				<div class="image-options">
					<a href="#" class="edit"><i class="entypo-pencil"></i></a>
					<a href="#" class="delete"><i class="entypo-cancel"></i></a>
				</div>
				
			</article>
		
		</div>
        </div>
</div>

La finestra modal che deve ricevere url, id

   <!-- Album Image Settings Modal --><div class="modal fade" id="album-image-options">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="gallery-image-edit-env">
				<img src="" id="img" class="img-responsive" />
				
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			
			<div class="modal-body">
			
					
						<div class="row">
							<div class="col-md-12">
								
								<div class="form-group">
									<label for="field-1" class="control-label">Title</label>
									
									<input type="text" class="form-control" name="id" id="id" value="">
								</div>	
								
							</div>
						</div>
						
						<div class="row">
							<div class="col-md-12">
								
								<div class="form-group">
									<label for="field-1" class="control-label">Description</label>
									
									<textarea class="form-control autogrow" id="field-2" placeholder="Enter image description" style="min-height: 80px;"></textarea>
								</div>	
								
							</div>
						</div>
						
				
				
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-success btn-icon">
					<i class="entypo-check"></i>
					Apply Changes
				</button>
			</div>
		</div>
	</div>
</div>
Ti ringrazio per l'aiuto

[Werwolfe]

Sono riuscito a mandare id, mentre l'immagine non me la visualizza. Ho modificato lo script in questo modo :

 <script type="text/javascript">     
	jQuery(document).ready(function($)
{
	$(".gallery-env").on("click", ".image-thumb .image-options a.edit", function(ev) {
        var titolo = $(this).attr("rel");
		$("#album-image-options input#titolo").val(titolo);
    });
     
 
	$(".gallery-env").on("click", ".image-thumb .image-options a.edit", function(ev)
	{
            ev.preventDefault();
		
		// This will open sample modal
		$("#album-image-options").modal('show');
		
		var srcFoto= $("#album-image-options img").attr("src");
		
		$("#album-image-options #localeFotoImg").attr("src",srcFoto);
        
        var titolo = $(this).attr("rel");
		$("#album-image-options input#titolo").val(titolo);
//	e.preventDefault();
	})
});	


</script

[Shores]

Mah, ti giuro che non capisco la logica che stai seguendo, butti lì a caso degli spezzoni di codice o cosa?

Fare due volte
$(".gallery-env").on("click", ".image-thumb .image-options a.edit", function(ev) {

di seguito, significa distruggere quello che ha fatto la prima esecuzione nel momento in cui esegui la seconda...

Questo succede perchè quella chiamata serve a decidere quale codice dev'essere eseguito al click ("onclick") sul tag definito dal selettore css ".image-thumb .image-options a.edit".

Se lo fai due volte, ciò che avevi impostato dovesse accadere al click nella prima chiamata viene completamente eliminato, e al suo posto dici invece che venga eseguito, quando si fa click su quell'elemento, il codice che inserisci nella seconda chiamata.

Ti garantisco che non riesco più a seguire il modo in cui procedi, stai tentando a caso o cerchi di capire come funziona una cosa prima di usarla?

[Werwolfe]

Cerco di capirla, facendo varie prove e ragionamenti, non conosco bene il javascript, ho nozioni elementari, parto da ragionamenti , cercando di capire un pò leggendo qua e là

Elimino la ripetizione, mentre come posso mostrare l'immagine?

Eliminata id lo invia correttamente, solo l'immagine non mi mostra , ma non riesco a capire perchè.


Praticamente sono delle prove per poi inserire il tutto con dati estratti dal database. Devo fare in modo che la finestra modale che appare, ha dentro gli input, id , mostri l'immagine, ma non mi interessa se la mette negli input e basta.

Almeno c'è dimmi se possibile, lo script mette id in input, ok se io lo volessi invece in una variabile? tipo mi spiego meglio

$id=$idmandatodaljq;

Così da poterlo mettere in una query di sql e estrarre tutti i dati dal db ed eseguire la modifica, secondo te è possibile?

Prima di tutto Grazie infinite per l'aiuto

[Shores]

Ancora al load della pagina dà un errore alla riga 3 dello script neon-skins.js...

Poi, perchè metti i tag script tutti alla fine del codice html all'interno di body? In generale è sbagliato, i tag script devono stare dentro il tag head, e devono essere in ordine tale che gli script che usano funzioni definite altrove siano caricati dopo gli script che le definiscono (per capirci, prima carichi jquery, poi ne usi le funzioni...).

In più non capisco che cosa tu stia cercando di fare:

var id = $(this).attr("data-tag");

legge l'attributo data-tag del tag .gallery-env, attributo che ha come valore la stringa "1d" che poi passi come valore ad una input presente nella finestra modale. Non capisco cosa tu stia cercando di fare con questo, perché assegnare un valore (tralaltro non numerico) ad un campo di una form tramite javascript, di certo non ha l'effetto di caricare qualcos'altro dal server, almeno finchè quella form non viene inviata.

Insomma, quello che davvero non sto capendo è la logica che stai seguendo!

Almeno nella prima versione tentavi di fare una chiamata ajax che ti restituisse dal server qualcosa in funzione dell'id che gli passavi, qui non ci sono più chiamate ajax nè caricamenti di pagina, come potrebbe mai php che viene eseguito sul server accorgersi di qualcosa?