html - jQuery load function form in chrome -

i have users page add user button. when user clicks add user button ajax load() function called, loads adduserform when in firefox, ie works.

however, when in chrome jquery dialog loads without errors form tag not load.

jsfiddle front

<form id="adduser">     <select id="ptsiid" name="ptsiid" onchange="secondarysitedisplay();">         <option value=""></option>         <option value="1666">london</option>         <option value="1544">nyc</option>     </select>first name:     <input type="text" name="firstname" value="" size="15" maxlength="60">last name:     <input type="text" name="lastname" value="" size="15" maxlength="60">job title:     <input type="text" name="jobtitle" value="" size="20" maxlength="40">e-mail:     <input type="text" name="email" value="" size="40" maxlength="128">can login?     <td class="data" align="left">         <input type="checkbox" name="canlogin">     </td>is deleted?     <td class="data" align="left">         <input type="checkbox" name="isdeleted">     </td>change password?     <td class="data" align="left">         <input type="checkbox" name="changepassword">     </td>     <input class="button" type="button" value="update" onclick="doajaxsubmit();" accesskey=""> </form> 

your problem in line

jquery('#popup').load("form.html", showdialog);   

chrome enforces same origin policy wich means request not loaded because has different origin other elements in page.

the documentation on jquery's load method mentions this.

you can find better description of domain here , here. paragraph, quoted former link, describes quite in opinion.

cross-site http requests http requests resources different domain domain of resource making request. instance, resource loaded domain (http://domaina.example) such html web page, makes request resource on domain b (http://domainb.foo), such image, using img element (http://domainb.foo/image.jpg). occurs commonly on web today — pages load number of resources in cross-site manner, including css stylesheets, images , scripts, , other resources.

as of today (august 2013) this open issue in chrome.

and that, @ last, why code doesn't work in chrome.

edit:

here workarround chrome. work long don't try load local files using file:// schema.

edit,part ii:

i don't know you're trying do, since form.html contains form, can put inside of front page. way don't have load external html. changes way you've been doing things (it doesn't load external page) works in chrome. tested in ie,and safari, , opera. should working regardless of wich browser decide use.

here's fiddle working code.

edit, part iii:

i recomend stick above method but...

...in case need place content in external page, , you're using php or .net cant fetch pages server using ajax , post them in div. bit more complicated. need have method in server-sided code serves webpage partial view. in .net write this.

public partialviewresult getform() {    return partialview("form.html"); } 

i'm not familiar php code should similar. need javascript function fetch content , place inside containing div:

function loadframe() {     $.ajax({     url: "@url.action("getform","form")",     async: false     }).done(function( data) {     $("#popup").append(data);     // don't want show frame until user has clicked on button.     // make invisible.     $("#popup").css("display","none");      }); }