jQuery use load() with param

Question

Exactly I want to do some trick in html. I hope I can use jQuery to load a html in a block( like <span></span>). And in the target html, I need the params in the url to do something. For a.html is the main page, b.html is another page that be embed in block of a.html, In a.html, there is a block like this:

<span id="rp"></span>

and in its' javascript, it do this thing( which I asked as the question of the title):

 var param="x="+1+"&y="+2;
 $("#rp").load("b.html?"+param);

It's all the main page do, and in b.html,

it pass the params in the url to do fill form of b.html.

In b.html, there is a form as:

<form id="myForm" action="192.168.1.xxx/goal.html" method="post">
    <input type="hidden" id="xs" name="x" />
    <input type="hidden" id="ys" name="y" />
    <input type="submit" value="test" />
</form>

(The goal.html is in another domain name, so I cannot use ajax in main page. That's the reason why I come up with this way to use method 'POST' to send data to goal.html)

and the javascript of b.html is:

window.onload=function(){
    function QueryStr(str) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        var val="";
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if (pair[0]==str) {
                val=pair[1];
            }
        } 
        return val;
    }
    //var test=setInterval(fillForm,100);
    fillForm();
    function fillForm(){
        if(isFilled()){
            document.getElementById("xs").value=QueryStr("x");
            document.getElementById("ys").value=QueryStr("y");
            //clearInterval(test);
            //document.getElementById("myForm").submit();
        }
    }
    function isFilled(){
        if(QueryStr("x")!=""&&QueryStr("y")!="") return true;
        return false;
    }
}

I have tried use timer( setInterval) to be sure the data can be filled in the form after loaded, but the result isn't different.

The result of b.html should be fill the input type=hidden with params respectively,

when I use b.html with params in url, it goes all well, if I use a.html as the javascript(jQuery load()), the result of b.html will no params in url.

That is, if it operated correctly, the input field should be:

<input type="hidden" id="xs" name="x" value="1">
<input type="hidden" id="ys" name="y" value="2">

but in the block of a.html, the field is

<input type="hidden" id="xs" name="x" >
<input type="hidden" id="ys" name="y" >

So, do I use wrong way of jQuery?

Any direction or advice appreciate!

guest271314 · Accepted Answer · 2014-04-15 03:40:23Z

1

Try this (pattern)

  $(function() { 
        $("#rp")
        .load("b.html", function(data, textStatus) {
            if (textStatus === "success") {
            $(this).find("#xs")
            .prop("value", "1")
            .siblings("#ys")
            .prop("value", "2")
            };
        });
    });

jsfiddle http://jsfiddle.net/guest271314/aEQgD/

edited Apr 15, 2014 at 3:40

answered Apr 15, 2014 at 3:32

guest271314

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery use load() with param

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related