CODEWITHSUNDEEP
javascriptjqueryload
wang hai peng
wang hai peng

Reputation: 287

Jquery load remote page element according to a string in current page url

I'm new in Jquery, I would like to have Jquery code to get the current page url and if the url contains certain string then load remote element.

example:

i have the page urls like this:

"http://......./Country/AU/result-search-to-buy"
"http://......./Country/CA/result-search-to-buy"
"http://......./Country/UK/result-search-to-buy"

the part "/Country/AU" is what I need to determine which page element I should load in, then if "AU" I load from "/state-loader.html .state-AU", if "CA" I load from "/state-loader.html .state-CA"

I have a builtin module "{module_pageaddress}" to get the value of the current page url, I just dont know the Jquery logic to let it work.

I expect something like this:

if {module_pageaddress} contains "/Country/AU/" 
$('#MyDiv').load('state-loader.html .state-AU');

if {module_pageaddress} contains "/Country/CA/" 
$('#MyDiv').load('state-loader.html .state-CA');

please help and many thanks.

Upvotes: 1

Views: 1457

Answers (5)

Xitalogy
Xitalogy

Reputation: 1612

Here is some code:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery test page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function loadContent(elementSelector, sourceURL) {
            $(""+elementSelector+"").load(""+sourceURL+"");
        }
        function stateURL() {
            var startOfResult = '../../state-loader.html #state-';
            var match = (/(?:\/Country\/)(AU|US|CA|UK)(?:\/)/).exec(window.location.pathname);

            if (match) {
                return startOfResult + match[1];
            } else {
                return startOfResult + 'AU';
            }
        }
    </script>
</head>
<body>
<a href="javascript:loadContent('#content', stateURL())">Link 1</a>
<div id="content">content will be loaded here</div>
</body>
</html>

And the file to load the different content for the states:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="state-US">Go USA!</div>
<div id="state-CA">Go Canada!</div>
<div id="state-AU">Go Australia!</div>
<div id="state-UK">Go United Kingdom!</div>
</body>
</html>

See it work here:

http://www.quirkscode.com/flat/forumPosts/loadElementContents/Country/US/loadElementContents.html

Replace .../US/... with .../AU/..., etc. to see how it behaves.

Original post where I got the ideas/original code:

http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html

Upvotes: 1

huazai
huazai

Reputation: 1

var result= window.location.pathname.match(/\/Country\/([A-Z]+)\//);
if(result){
    $('#MyDiv').load('state-loader.html .state-' + result[1]);
}

Upvotes: 0

Josh Koberstein
Josh Koberstein

Reputation: 176

Use my one line javascript function for getting an array of the URL segments: http://joshkoberstein.com/blog/2012/09/get-url-segments-with-javascript

Then, define the variable $countrySegment to be the segment number that the country code is in.

For example: /segment1/segment2/CA/

(country code would be segment 3)

Then, check if the 3rd array index is set and if said index is either 'CA' or 'AU'. If so, proceed with the load, substituting in the country-code segment into the .html filename

function getSegments(){
    return location.pathname.split('/').filter(function(e){return e});
}

//set what segment the country code is in
$countrySegment = 3;

//get the segments
$segments = getSegments();

//check if segment is set
//and   if segment is either 'AU' or 'CA'
if(typeof $segments[$countrySegment-1] !==undefined && ($segments[$countrySegment-1] == 'AU' || $segments[$countrySegment-1] == 'CA')){
    $countryCode = $segments[$countrySegment-1];
    $('#target').load('state-loader.html .state-' + $countryCode);
}

Upvotes: 0

Mike M
Mike M

Reputation: 212

As far as pulling the url path you can do the following

var path_raw = document.location.path, 
     path_array = path_raw.split("/");

Then, you could do something like this:

$.ajax({
     url: "./remote_data.php?country=" + path_array[0] + "&state=" + path_array[1],
     type: "GET",
     dataType: "JSON",
     cache: false,
     success: function(data){
          // update all your elements on the page with the data you just grabbed
     }
});

Upvotes: 0

Mr. 14
Mr. 14

Reputation: 9528

You can try

var countryCode = ... // parse the country code from your module    
$('#yourDiv').load('state-loader.html .state-' + countryCode);

See more examples of .load() here.

Upvotes: 0

Related Questions