jQuery having problems with load()

[GaVrA]

Hi.

I am trying to load some elements from external page which is like a search result into mine page and show those elements:

http://www.vizioshop.com/browse.php?q=crtaci.info

This is what i have:

<script type="text/javascript">
$(function() {
        $("#result").load("http://www.vizioshop.com/browse.php?q=crtaci.info .tShirt");
});
</script>	
<div id="result""></div>

So i want to load elements with class of "tShirt" and show them on my page and few other stuff, but im stuck on this "load issue"...

[Spudhead]

You don't say what your "load issue" actually is, but I'll take a guess that what you're having problems with is the fact that for security reasons, browsers won't allow AJAX requests for pages that aren't on the same domain as the requesting page.

There are several solutions

The "Cross domain proxy" mentioned in the link above can be as simple as a PHP file on your server that contains the following:

<?php
header('Content-type: text/html');
$url = $_GET['url'];;
echo file_get_contents($url);
?>

[GaVrA]

I thought that was the problem, i mean i do remember reading about that bolded problem...

I think i will have to do something less advanced... :lol: Like code similar page on my site...

[GaVrA]

Ok i came up with something, so i would like you guys to tell me what is the better way to do this... I have 3 dummy html pages that i am loading.

http://www.crtaci.info/majice20.html
http://www.crtaci.info/majice40.html
http://www.crtaci.info/majice60.html

This is finall result:

http://www.crtaci.info/index.php?autocom=majice

And this is the code:

PHP Code:

<script type="text/javascript">
$(function() {
    $.ajaxSetup ({
        cache: false
    });
    
    var ajax_load = "<img style='width:42px;height:42px;display:block;margin:auto;' src='style_images/freshair/load.gif' alt='loading...' />";
    
    $("#majice").html(ajax_load).load("majice20.html", function(){
        $(".tShirt").removeAttr('title');
    });
    $("#show").click(function(){
        $("#shown").slideToggle(1000);
    });
    $("#1").click(function(){
        $("#majice").html(ajax_load).load("majice20.html", function(){
            $(".tShirt").removeAttr('title');
        });
        $("ol.majice_navigacija>li").removeClass("selected");
        $(this).addClass("selected");
    });
    $("#2").click(function(){
        $("#majice").html(ajax_load).load("majice40.html", function(){
            $(".tShirt").removeAttr('title');
        });
        $("ol.majice_navigacija>li").removeClass("selected");
        $(this).addClass("selected");
    });
    $("#3").click(function(){
        $("#majice").html(ajax_load).load("majice60.html", function(){
            $(".tShirt").removeAttr('title');
        });
        $("ol.majice_navigacija>li").removeClass("selected");
        $(this).addClass("selected");
    });
});
</script>
<div class="maintitle">{$this->ipsclass->lang['welcome_message']}</div>
    <div id="show" style="background:#CAEBFF;padding:10px;cursor:help;"><a title="Klikni da pročitaš uputstvo!" style="font-size:20px;font-weight:bold;margin:auto;width:100px;padding:10px;display:block;">Uputstvo!</a><div id="shown">Da bi ste kupili majicu treba prvo da kliknete na izabranu majicu, pa kada vam se otvori novi prozor ovde treba da izaberete boju, veličinu, količinu i da li želite mušku ili žensku majicu. Nakon toga treba da kliknete na "Dodaj proizvod u korpu".<img style="margin:10px auto;width:530px;display:block;" src="http://i25.tinypic.com/2reldfk.png" alt="Info"></a></div></div>
    <ol class="majice_navigacija">
        <li id="1" class="selected">1</li><li id="2">2</li><li id="3">3</li>
    </ol>
    <div id="majice"">
        
    </div>
    <br clear="all"/>
<div class="catend"></div>