Modulo di caricamento del carico jQuery in chrome

Ho una pagina utenti con un pulsante Aggiungi utente. Quando l’utente fa clic su Aggiungi pulsante utente, viene chiamata una funzione Ajax load() , che carica un adduserform Quando in firefox, IE funziona.

Tuttavia, quando è in Chrome, la finestra di dialogo jQuery viene caricata senza errori ma il tag non viene caricato.

jsFiddle con la parte anteriore

 
London NYC First Name: Last Name: Job Title: E-mail: Can Login? Is Deleted? Change Password?

Il tuo problema è in questa linea

 jQuery('#popup').load("form.html", showDialog); 

Chrome applica lo stesso criterio di origine che significa che la tua richiesta non verrà caricata perché ha un’origine diversa rispetto agli altri elementi nella pagina.

La documentazione sul metodo di caricamento di jQuery menziona anche questo.

Puoi trovare una descrizione migliore di ciò che un dominio è qui e qui . Questo paragrafo, citato dal precedente link, lo descrive abbastanza bene secondo me.

Le richieste HTTP cross-site sono richieste HTTP per risorse da un dominio diverso rispetto al dominio della risorsa che effettua la richiesta. Ad esempio, una risorsa caricata dal Dominio A ( http: //domaina.example ) come una pagina Web HTML, effettua una richiesta per una risorsa sul Dominio B ( http://domainb.foo ), come un’immagine, usando l’elemento img ( http://sofit.miximages.com/jquery/image.jpg ). Questo si verifica molto comunemente sul Web oggi: le pagine caricano un numero di risorse in modo cross-site, inclusi fogli di stile CSS, immagini e script e altre risorse.

Ad oggi (agosto 2013) questo è un problema aperto in Chrome .

E questo, finalmente, è il motivo per cui il tuo codice non funziona in chrome.

MODIFICARE:

Ecco un workarround per Chrome. Funzionerà finché non proverai a caricare file locali usando il file: // schema.

MODIFICA, parte II:

Non so esattamente cosa stai cercando di fare, ma dal momento che form.html contiene solo un modulo, puoi inserire la tua prima pagina. In questo modo non devi caricare un html esterno. Cambia il modo in cui hai fatto le cose (non carica una pagina esterna) ma funziona in chrome. L’ho testato anche in IE, Safari e Opera. Quindi dovrebbe funzionare indipendentemente dal browser che decidi di usare.

Ecco un violino con codice funzionante.

Modifica, parte III:

Ti raccomando seriamente di attenersi al metodo sopra ma …

… nel caso in cui tu abbia davvero bisogno di posizionare i tuoi contenuti in una pagina esterna, e stai usando qualcosa come php o .NET, non puoi recuperare le tue pagine dal server usando ajax e postarle nel tuo div. È un po ‘più complicato. Fondamentalmente è necessario avere un metodo nel codice lato server che serve la pagina Web come vista parziale. In .NET si scriverebbe qualcosa come questo.

 public PartialViewResult getForm() { return PartialView("form.html"); } 

Non ho familiarità con PHP ma il codice dovrebbe essere qualcosa di simile. Hai anche bisogno di una funzione javascript per recuperare il contenuto e metterlo all’interno del div contenente:

 function loadFrame() { $.ajax({ url: "@Url.Action("getForm","Form")", async: false }).done(function( data) { $("#popup").append(data); // we don't want to show the frame until the user has clicked on the button. // so we make it invisible. $("#popup").css("display","none"); }); } 

Di seguito sono le cose che mancano nel tuo JSFiddle.

1) Ti sei perso per aggiungere jQuery lib.

2) Anche mancato di aggiungere l’ interfaccia utente di jQuery .

3) Poiché hai avvolto il tuo codice in caricamento ,

 function addeditUser() { jQuery('#popup').load("form.html", showDialog); alert(jQuery('#popup').text()); } 

questo non funzionerà

Invece usa così

 addeditUser = function () { jQuery('#popup').load("form.html", showDialog); alert(jQuery('#popup').text()); } 

o

Avvolgilo in testa

Controlla JSFiddle

questo può aiutarti a provare questo

Prova a $(document).ready() il codice in $(document).ready()

 $(document).ready(function(){ $("#getit").load("form.html #getdiv"); });