Блог

Главная - Вопросы по программированию - Проблемы с клонированием jQuery

Проблемы с клонированием jQuery

#jquery #clone

#jquery #клонирование

Вопрос:

Может кто-нибудь проверить это и сказать мне, что не так…Я просто этого не вижу:

 function getStates(){
var stateData;

$.getJSON("getStateData.php", function(data) {
    stateData = data;
    var theLastGroup = "";

    $("#groupList").empty();
    $("#stateList").empty();

    $.each(stateData, function(i,jsonData) {
        if( theLastGroup != jsonData.groupName )
        {
            $("#listModel").clone(true).removeAttr("id").attr("id", "Group_"   i).removeClass("hidden").appendTo($("#groupList"))
                .find(".url").attr("href", "#" jsonData.groupName).end()
                .find(".groupName").html(jsonData.groupID);

            $("#groupModel").clone(true).removeAttr("id").removeClass("hidden").attr("id", jsonData.groupName).appendTo($("#stateList"));
        }


        $("#stateModel").clone(true).removeAttr("id").attr("id", jsonData.stateName).removeClass("hidden").appendTo($("#" jsonData.groupName))
            .attr("sname", jsonData.stateName).attr("lat", jsonData.centerLat).attr("lon", jsonData.centerLon)
            .attr("zom", jsonData.zoom).html(jsonData.stateName);

        if( theLastGroup != jsonData.groupName )
        {
            theLastGroup = jsonData.groupName;
        }
    });
    $("#tabs").tabs();
});

}

… и HTML, который в конечном итоге вызывает getStates() выше:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>My Page</title>

<link href="js_src/css/cupertino/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometryamp;sensor=false"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script>

<script type="text/javascript" language="javascript" src="js_src/geoxml3.js"></script>
<script type="text/javascript" language="javascript" src="js_src/CTR.js"></script>
<script type="text/javascript" language="javascript" src="js_src/common.js"></script>
<script type="text/javascript" language="javascript" src="js_src/mapNull.js"></script>
<script type="text/javascript" language="javascript" src="js_src/functions.js"></script>

<style type="text/css">
    div.hidden {display:none;}
    li.hidden {display:none;}
    span.hidden {display:none;}
</style>
</head>
<ul>
    <li id="listModel" class="hidden"><a class="url"><span class="groupName"></span></a></li>

    <div id="groupModel" class="hidden"></div>
    <span id="stateModel" class="hidden" sname="name" lat="0.0" lon="0.0" zom="7"></span>
</ul>

<body>
<h4>MyPage</h4>
<div id="tabs" style="height:100px" class="hidden">
    <h5>select a state...</h5>

    <ul id="groupList"></ul>
    <div id="stateList"></div>
</div>

<div id="map" style="float:left;"></div>

</body>
</html>

Функция getStates() вызывается из mapNull.js скрипт при загрузке страницы…

Есть идеи?

Комментарии:

1. Было бы полезно, если бы вы сообщили нам, что вы пытались отладить до сих пор и что это вам показало.

2. Какова ваша HTML-разметка? Какие у вас данные? Что именно вы хотите, чтобы произошло? Чем больше деталей вы предоставите нам, тем легче мы сможем вам помочь. Если вы можете, было бы еще лучше, если бы вы поместили упрощенный пример кода в jsfiddle. сеть, которая воспроизводит проблему.

3. Обновил вопрос дополнительной информацией… Для отладки я вставил предупреждения в разные места. Я действительно получаю данные обратно из PHP-вызова … и это те данные, которые я ожидаю. Все это кажется нормальным … просто клонирование, похоже, не происходит. Я ожидаю, что вкладки будут созданы после завершения всех клонирований…

4. Можете ли вы описать ожидаемый результат приведенного выше кода и то, что вы на самом деле видите? JSON из getStateData.php также было бы полезно.

5. Ожидаемый результат — «динамическая» вкладка jQuery, которая заполняется данными JSON. Данные в формате JSON выглядят следующим образом: (centerLat, centerLon, zoom, StateName, groupName) «139.50»,»-98.35″,»5″,» Карта США», «Все штаты» «32.7990»,»-86.8073″,»7″,» Алабама», «AStates» «61.5850»,»-152.2683″,»4″,» Аляска»,»АСтейты» «-14.3331″,»-170.0000″,»10″,» Американское Самоа», «АСтейты» «34.200»,»-111.3877″,»7″,» Аризона»,»АСтейтс» «34.9513»,»-92.3809″,»7″,» Арканзас», «AStates»

Ответ №1:

Эта часть вашего кода находится между </head> и <body> …. то есть ЗА ПРЕДЕЛАМИ <body> тега:

 <ul>
    <li id="listModel" class="hidden"><a class="url"><span class="groupName"></span></a></li>

    <div id="groupModel" class="hidden"></div>
    <span id="stateModel" class="hidden" sname="name" lat="0.0" lon="0.0" zom="7"></span>
</ul>

Размещение его внутри <body> было бы хорошим первым шагом к тому, чтобы заставить это работать 🙂

Комментарии:

1. Я сделаю это … могло бы быть моим показом Blonde, но по какой-то причине я подумал, что это должно быть в голове, чтобы оно никогда не появлялось на странице. ну что ж.. Спасибо

2. ваш «скрытый» класс должен позаботиться о скрытии элемента. Не размещая свои элементы в <body>, вы оставляете решение о том, где их разместить, на усмотрение агента пользователя. Я думаю, что некоторые UA могут поместить это внутри <body>, но все может happen…it может быть проигнорировано. Лучше всего размещать внутри <body>, если вы хотите, чтобы это было правильно вставлено в DOM. Дайте нам знать, если это исправит проблему.

3. Хорошо, после некоторого дергания за волосы и скрежета зубами. Я наконец-то получил что-то, что действительно работает … своего рода. Это действительно немного работает. Я получаю ОДНУ вкладку со всеми заголовками вкладок в ней и всеми элементами данных в теле этой вкладки…