jQuery load function form in chrome

Question

I have a users page with an add user button. When the user clicks add user button an Ajax load() function is called, which loads a adduserform When in firefox, IE this works.

However, When in chrome the jQuery Dialog loads without errors but the form tag does not load.

jsFiddle with the 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>

Answer 1

Your problem is in this line

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

Chrome enforces the same origin policy wich means that your request will not be loaded because it has a different origin than the other elements in the page.

The documentation on jQuery's load method also mentions this.

You can find a better description of what a domain is here and here. This paragraph, quoted from the former link, describes it quite well in my opinion.

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, using the img element (http://domainb.foo/image.jpg). This occurs very commonly on the web today — pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.

As of today (August 2013) this is an open issue in Chrome.

And that, at last, is why your code doesn't work in chrome.

EDIT:

Here is a workarround for Chrome. It will work as long as you don't try to load local files using the file:// schema.

EDIT,Part II:

I don't know exactly what you're trying to do, but since form.html only contains a form, you can put inside of your front page. That way you don't have to load an external html. It changes the way you've been doing things (it doesn't load an external page) but it works in chrome. I also tested it in IE,and Safari, and Opera. So it should be working regardless of wich browser you decide to use.

Here's a fiddle with working code.

Edit, part III:

I seriously recomend you to stick to the above method but...

...in case you really need to place your content in an external page, and you're using something like php or .NET you cant fetch your pages from the server using ajax and post them in your div. Its a bit more complicated. Basically you need to have a method in you server-sided code that serves the webpage as a partial view. In .NET you would write something like this.

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

I'm not familiar with PHP but the code should be something similar. You also need a javascript function to fetch the content and place it inside the containing div:

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"); 
    });
}

Answer 2

this may help you try this

Try wrapping your code in $(document).ready()

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

Answer 3

Following are the missing things in your JSFiddle.

1) You missed to add jQuery lib.

2) Also missed to add jQuery UI.

3) Since you've wrap your code in load,

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

this won't work.

Instead use like this

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

or

Wrap it in head

Check JSFiddle