Wo habe ich einen Fehler drin?

10.06.2010 16:04
#1 Wo habe ich einen Fehler drin?
avatar
Mitglied

Hallo!

Ich wollte mein Template-Element Bildergalerie-Home aktualisieren. Rein optisch hat auch alles geklappt, aber rein technisch passiert nichts, wenn ich die Sortierbuttons anklicke. Was habe ich falsch gemacht?
Hier mein Code:

<script language="javascript" src="{{js_uri}}jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="text/javascript" src="{{js_uri}}ui/ui.core.js"></script>
<script type="text/javascript" language="text/javascript" src="{{js_uri}}ui/ui.draggable.js"></script>
<script type="text/javascript" language="text/javascript" src="{{js_uri}}ui/ui.droppable.js"></script>
<script type="text/javascript" language="text/javascript" src="{{js_uri}}ui/ui.sortable.js"></script>





<style type="text/css">

<!--
.cat_name{
margin-left: 30px;
font-size: 20px;
font-weigth: bold;
}
.cat_desc{
margin-left: 30px;
font-style:italic;
}
.cat_attr{
margin-left: 30px;
font-size: 20px;
font-weigth: bold;
}
-->
</style>

<!-- javascripts for this template element --->
{{drag_drop_js.start}}
<script language="javascript" type="text/javascript">


/*Id's and definitions:*/

var name_sort,date_sort,user_sort = 'desc';

/*Picture Container*/

var pic_container = "#ulThumbnailList";

/*Picture class*/

var pic_class = ".photolistitem"

/*Links & Buttons*/

var save_button_container = "#ChangeButton";

var save_button = "#SaveOrder";

var name_link = "#sortName";

var user_link = "#sortUser";
var date_link = "#sortDate";

var loader_container = "#drag_drop_loader";

var drag_drop_container = "#drag_drop_text";

var result_container = '#result';

var info_container = '#hinweis';

var element_before_pic_container = '#picture1';

function showLoader(){

$(loader_container).show();

$(drag_drop_container).hide();
return true;

}

function hideLoader(){

$(loader_container).hide();

$(drag_drop_container).show();
}

function getSortOrder(sortby){

switch(sortby){


case 'picname': return name_sort; break;


case 'picuser': return user_sort; break;


case 'picdate': return date_sort; break;


default: return name_sort; break;

}

}


function changeSortOrder(sortby){

switch(sortby){

case 'picname': name_sort == 'asc' ? name_sort = 'desc' : name_sort = 'asc'; break;

case 'picuser': user_sort == 'asc' ? user_sort = 'desc' : user_sort = 'asc'; break;


case 'picdate': date_sort == 'asc' ? date_sort = 'desc' : date_sort = 'asc'; break;


default: alert('wrong sort type: ' + sortby); break;
}

}
$(document).ready(function(){
$('#picture2').hide();
$('#hinweis').show();
$(info_container).html("{[change_order]}<br />Bilder sortieren nach: <a href='javascript:void(0)' id='sortName'>Name</a>&nbsp;&bull;&nbsp;<a href='javascript:void(0)' id='sortUser'>Uploader</a>&nbsp;&bull;&nbsp;<a href='javascript:void(0)' id='sortDate'>Datum</a>");
$('#subNav').hide();

makeSortable();


$(name_link).click(function(){


if(showLoader()){setTimeout("sortPics('picname')",100);}

});



$(user_link).click(function(){

if(showLoader()){setTimeout("sortPics('picuser')",100);}


});


$(date_link).click(function(){


if(showLoader()){setTimeout("sortPics('picdate')",100);}

});

$(save_button_container).click(function(){


serial = $(pic_container).sortable('toArray');


var items = $(pic_class);
var ids = [];
for(var x=0; x<items.length; x++){
ids.push(items[x].id);
};
$.ajax({
url:"gallerySort.php",
type:"post",
data: {ids:ids.join(',')},
success:function(vars){
$('#hinweis').hide();
$('#SaveOrder').hide();
$('#result').html('{[gallery_newpos_saved]}');
$('#result').fadeIn('2000');
}
})
});

});
</script>
<script type="text/javascript">



function show_hidden_divs(id,text) {
document.getElementById('edit_' + id).style.display='block';
return false;
}
function hide_hidden_divs(id) {

document.getElementById('edit_' + id).style.display='none';
return false;

}
</script>
{{drag_drop_js.end}}




<!-- show navigation or "create category" link if gallery is empty --->
<div name="header">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://files.homepagemodules.de/b214495/bhnetfiles-yb4-e0.gif"></td><td class="icats" width="100%"><div style="float:left;">{[gallery_nav_intro]}: <a href="{{module_link}}">{[gallery_picture]}</a>
{{nav==true.start}}
{{nav.startlist}} > <a href="{{nav:cat_link}}">{{nav:name}}</a>{{nav.end}}
{{nav==true.end}}</div><div style="float:right;">{{can_add_subcat==true.start}}
<a href="{{add_subcat_link}}" onclick="return hpm_newDialog('{{add_subcat_link}}','500');">{[gallery_new_subcat]}</a>&nbsp;&nbsp;
{{can_add_subcat==true.else}}

{{can_add_cat==true.start}}
&nbsp;&nbsp;
<a href="{{add_cat_link}}" onclick="return hpm_newDialog('{{add_cat_link}}','500');">{[add_new_cat]}</a>&nbsp;&nbsp;
{{can_add_cat==true.end}}
{{can_add_subcat==true.end}}</div></td><td><img src="https://files.homepagemodules.de/b214495/bhnetfiles-yb4-e1.gif"></td>
</tr>
</table>
</div>



<!-- list options if viewing a category --->
{{show_pics==true.start}}
<div name="options" align="left" style="padding-top:10px;">
<table width="100%" cellpadding="2" cellspacing="0" valign="top"><tr><td class="itop" width="100%" >
{{can_add_subcat==true.start}}
<a href="{{add_subcat_link}}" onclick="return hpm_newDialog('{{add_subcat_link}}','{{global_page_width}}');"> <b>{[gallery_new_subcat]}</b></a>&nbsp;&nbsp;&bull;
{{can_add_subcat==true.end}}

{{UserCanUpload==true.start}}
<a href="{{pic_upload_link}}" onclick="return hpm_newDialog('{{pic_upload_link}}','500');">{[gallery_upload_new]}</a>&nbsp;&nbsp;
{{UserCanUpload==true.end}}
{{haspics==true.start}}
{{movable==true.start}}
&bull;&nbsp;&nbsp;<a href="{{move_pic_link}}">{[gallery_movepics]}</a>
{{movable==true.end}}
{{UserCanSetcover==true.start}}
<span style="margin-left: 5px; margin-right: 5px;">&bull;</span>
<a href="{{cover_pic_link}}">{[gallery_set_cover]}</a>
{{UserCanSetcover==true.end}}


{{can_drag_drop==true.start}}
{{drag_drop_js}}
{{can_drag_drop==true.end}}
{{haspics==true.end}}
</td></tr></table>
</div>

{{show_pics==true.end}}
<div name="show_cats">

<!-- list categories (=Foto-Alben) --->
{{cats==true.start}}
<table width="100%" cellspacing="1" cellpadding="2" border="0">
{{tick(gallery_pre_gallery)}}
<tr >
<td class="itop" width="5%">&nbsp;</td>
<td class="itop" width="25%" align="left"><b>{[gallery_sub_header]}</b></td>
<td class="itop" width="10%"><b>{[gallery_num_pics]}</b></td>
<td class="itop" width="20%"><b>{[gallery_creator]}</b></td>
<td class="itop" width="25%"><b>{[gallery_last_upload]}</b></td>
<td class="itop" width="15%">&nbsp;</td>

</tr>
{{tick(gallery_pre_first_cat)}}



{{cats.startlist}}

<tr >

<td class="ifo1" width="5%">&nbsp;</td>
<td class="ifo1">
<a href="{{cats:cat_link}}" class="">{{cats:name}}</a>
{{cats:canedit==true.start}}
<span><small>
(<a href="{{cats:edit_link}}" onclick="return hpm_newDialog('{{cats:edit_link}}','{{global_page_width}}');" >{[edit]}</a>
{{cats:canedit==true.end}}

{{cats:candel==true.start}}

|<a href="{{cats:del_link}}" onclick="return hpm_newDialog('{{cats:del_link}}','{{global_page_width}}');" >{[delete]}</a>)
</small></span>
{{cats:candel==true.else}}
{{cats:canedit==true.start}}
)
{{cats:canedit==true.end}}
</small></span>
{{cats:candel==true.end}}



</td>
<td align="center" class="ifo1">{{cats:anzahl}} {[picture]}</td>
<td align="center" class="ifo1">{{cats:creator}}</td>
<td align="center" align="right" class="ifo1">{{cats:last_upload}}</td>
<td class="ifo1">&nbsp;</td>

</tr>

<tr class="ifo2">



<td width="5%">&nbsp;</td>


<td width="25%">

{{cats:coverpic==true.start}}
<div style="float:left;width:160px;">
<a href="{{cats:cat_link}}"><img style="max-width:160px;" align="right" src="{{cats:coverpic}}"></img></a>
</div>


{{cats:coverpic==true.else}}
{{cats:pics==true.start}}
{{first.start}}yes{{first.end}}
{{cats:pics.startlist}}
{{first==yes.start}}
<div style="float:left;width:160px; " >
<a href="{{cats:cat_link}}"><img align="right" src="{{pics:link}}"></img></a>
</div>
{{first==yes.end}}
{{first.start}}no{{first.end}}

{{cats:pics.end}}
{{cats:pics==true.else}}
<div style="float:left;width:160px;">
<a href="{{cats:cat_link}}"><img align="right" src="{{global_blank_gallery_pic}}"></img></a>
</div>
{{cats:pics==true.end}}
{{cats:coverpic==true.end}}
</td><td colspan="4">{{tick(gallery_cat_desc)}}{{cats:desc}}</td>

</tr>
<tr class="ifo2"><td align="left" colspan="6" >&nbsp;</td></tr>
{{tick(gallery_after_cat)}}
{{cats.end}}

{{tick(gallery_after_last_cat)}}

</table>
</div>
{{cats==true.end}}

<!-- show option to create a category if gallery is empty --->
{{cats==false.start}}
{{show_pics==false.start}}
<div class="ifo2">

<center><b>
{{can_add_cat==true.start}}
{[gallery_no_cat]}
{{can_add_cat==true.else}}
{[gallery_no_cat_no_permission]}
{{can_add_cat==true.end}}

</b></center>
</div>
{{show_pics==false.end}}
{{cats==false.end}}



<!-- show pictures if category contains any or "upload link" if category is empty --->
{{show_pics==true.start}}
{{cats==true.start}}
{{tick(gallery_after_cats_before_pics)}}
{{cats==true.end}}
<div name="show_pics">
{{errorpics.startlist}}
<div class="error"> {{errorpics:extension==true.start}}{[gallery_picture_2]} {{errorpics:pic}} ({{errorpics:name}}) {[gallery_with_extension]} {{errorpics:extension}} {[gallery_pic_is_not_correct]}
{{errorpics:extension==true.else}}{[gallery_picture_2]} {{errorpics:pic}} ({{errorpics:name}}) {[gallery_cant_upload_pic]} {{errorpics:extension==true.end}}<br /></div>
{{errorpics.end}}
<br>
{{upload_error==true.end}}

<table border="0" cellpadding="0" cellspacing="0" width="100%" valign="top">
<tr><td colspan="2" style="height:10px;">&nbsp;</td></tr>
{{showbox==true.start}}
<form method="post" name="movepicsForm">
<tr><td colspan="2" style="line-height:25px">{[gallery_move_pictures_to]}
<select name="newcat" id="newcat">
<option value="0">-- {[gallery_please_choose]} --</option>
{{catauswahl.startlist}}
<option value="{{catauswahl:cid}}">{{catauswahl:level|printalot("&nbsp;&nbsp;")}}{{catauswahl:name}}</option>
{{catauswahl.end}}
</select>&nbsp;
<input type="submit" name="movepics" value="{[gallery_movepics_now]}" class="button1" style="margin-left: 30px;" />
<input class="button1" type="button" value="{[gallery_cancel_move]}" onClick="window.location.href='{{nav:cat_link}}';" />
{{errcat==true.start}}
{[gallery_error_target]}
{{errcat==true.end}}
{{errpic==true.start}}<br>
{[gallery_error_selected]}
{{errpic==true.end}}
</td></tr>
{{showbox==true.end}}
{{showcover==true.start}}
<div align="left">
<form method="post" name="coverpicForm">
<br/><br/>
<input type="submit" name="save_cover" value="Neues Coverbild speichern" class="button1" style="margin-left: 30px;" />
<input class="button1" type="button" value="Abbrechen" onClick="window.location.href='{{nav:cat_link}}';" />
<br/><br/>
{{errcover==true.start}}
<div class="error">{[gallery_error_selected]}<br/></div><br/><br/>
{{errcover==true.end}}
</div>
<hr/>
{{showcover==true.end}}

{{picture_morepages==true.start}}
<tr><td align="center" colspan="2">{{pages_pages}}:
{{picturespages.startlist}}
{{picturespages:pnow==true.start}}&nbsp;<strong>{{picturespages:number}}</strong>
{{picturespages:pnow==true.else}}&nbsp;<a href="{{picturespages:link}}" alt="seite {{picturespages:number}}">{{picturespages:number}}</a>
{{picturespages:pnow==true.end}}
{{picturespages.end}}
</td></tr>
{{picture_morepages==true.end}}

<tr class="ifo1">
{{haspics==true.start}}
<td colspan="2" align="center">
<div id="drag_drop_loader" style="display:none;text-align:left;margin:20px">{[gallery_wait]} <img src="{{global_loader}}"></div>

<div id="drag_drop_text">


<div id="hinweis" style="display:none;text-align:left;margin:20px"></div>


<div id="hinweis" style="text-align:left;"></div>
<div id="SaveOrder" style="display:none;text-align:left"><input type="button" value="{[gallery_save_changes]}" id="ChangeButton"></div>
<div id="result" style="display:none;"></div></div>
<div id="picture1" style="min-height: 200px; min-height:200px; height: auto !important;">
<ul id="ulThumbnailList">
{{tick(gallery_pre_first_pic)}}
{{pics.startlist}}
<li id="{{pics:id}}" class="photolistitem" style="display:block; float:left; ">


<span class="picname" style="display:none;">{{pics:title}}</span>


<span class="picuser" style="display:none;">{{pics:uname}}</span>

<span class="picdate" style="display:none;">{{pics:time}}</span>
{{showbox==true.start}}
<div id="checkbox"><input type="checkbox" name="pic_ids[]" id="pic{{pics:id}}" value="{{pics:id}}"></div>
{{showbox==true.end}}
{{showcover==true.start}}
<div id="radiobox" style="float:left;width:3%;"><input type="radio" name="picid" id="pic{{pics:id}}" value="{{pics:id}}" {{pics:iscoverpic==true.start}}checked{{pics:iscoverpic==true.end}}></div>
{{showcover==true.end}}
<div id="title" style="border:0px solid #990000; width:100%; height:20px; vertical-align:top;font-size:120%; font-weight:bold;">
<a style="text-decoration:none"
{{showbox==true.start}}onclick="CheckBox('pic{{pics:id}}'); return false;" {{showbox==true.end}}
href="{{pics:view_pic_link}}" >{{pics:title|shortstring(14,"...")}}
</a>
</div>
<div id="image" style=" padding:5px;" >
<div id="pic_{{pics:id}}" onmouseover="document.getElementById('edit_{{pics:id}}').style.visibility='visible';" onmouseout="document.getElementById('edit_{{pics:id}}').style.visibility='hidden';">
<a style="text-decoration:none" {{showbox==true.start}}onclick="CheckBox('pic{{pics:id}}'); return false;" {{showbox==true.end}} href="{{pics:view_pic_link}}" ><img src="{{pics:link}}" border="0"></a>
<div id="edit_{{pics:id}}" style="visibility: hidden;">
{{UserCanEdit==true.start}}
<a href="{{pics:edit_pic_link}}" onclick="return hpm_newDialog('{{pics:edit_pic_link}}','800');">{[gallery_edit]}</a>
{{UserCanEdit==true.else}}&nbsp;
{{UserCanEdit==true.end}}
{{UserCanDelete==true.start}}
<a href="{{pics:del_pic_link}}" onclick="return hpm_newDialog('{{pics:del_pic_link}}','600');">{[delete]}</a>
{{UserCanDelete==true.else}}&nbsp;
{{UserCanDelete==true.end}}
</div>
</div>
</div>

</li>
{{tick(gallery_after_pic)}}
{{pics.end}}
{{tick(gallery_after_last_pic)}}
</ul>
</div>

</td>

{{haspics==true.end}}

{{haspics==false.start}}
<td colspan="2" align="CENTER">

<h2>{[gallery_no_images]}</h2>
{{UserCanUpload==true.start}}
<a href="{{pic_upload_link}}" onclick="return hpm_newDialog('{{pic_upload_link}}','{{global_page_width}}');">{[gallery_upload_now]}</a><br/><br/><br/><br/>
{{UserCanUpload==true.end}}

</td>
{{haspics==false.end}}
</tr>

{{picture_morepages==true.start}}
<tr><td align="center" colspan="2">{[search_result_pages]}
{{picturespages.startlist}}
{{picturespages:now==true.start}}
&nbsp;<strong>{{picturespages:number}}</strong>
{{picturespages:now==true.else}}
&nbsp;<a href="{{picturespages:link}}" alt="seite {{picturespages:number}}">
{{picturespages:number}}</a>
{{picturespages:now==true.end}}
{{picturespages.end}}
</td></tr>
{{picture_morepages==true.end}}

<tr><td colspan="2" align="left"><br>

{{showbox==true.start}}
</form>&nbsp;&nbsp;
{{showbox==true.end}}
{{showcover==true.start}}
</form>&nbsp;&nbsp;
{{showcover==true.end}}


</td></tr>

</table>


</div>
{{show_pics==true.end}}


Bitte kein irgendwie geartetes "schau doch mal, der Code müsste bei dir dort sein" usw. Einfach Finger drauf wo der Fehler ist und Berichtigung dazu :).

Danke im Voraus!

LG, Lady

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

 Antworten

 Beitrag melden
10.06.2010 16:12
avatar  mihca02
#2 RE: Wo habe ich einen Fehler drin?
mi
Mitglied

Hast du das per Hand da rein kopiert ?

Da bei der Bildergalerie im Standardtemplate sehr viel geändert wurde, ist es doch einfacher du gehst auf aktualisieren.

Welche Änderung hattest du denn vorher in der Bildergalerie gemacht, da sie ja nicht automatisch aktualisiert wurde ?

-------------------------------------------------------------------


 Antworten

 Beitrag melden
10.06.2010 16:17
avatar  Ingmar
#3 RE: Wo habe ich einen Fehler drin?
avatar
Technik

hm, irgendwie hast du ganze Teile aus dem Javascript gelöscht.

$.ajax({
url:"gallerySort.php",
type:"post",
data: {ids:ids.join(',')},
success:function(vars){
$('#hinweis').hide();
$('#SaveOrder').hide();
$('#result').html('{[gallery_newpos_saved]}');
$('#result').fadeIn('2000');
}
})
});

});





function makeSortable(){
$(pic_container).sortable({
opacity: 0.7,
revert: true,
scroll: true,
zIndex:9000,
cursor:'move',
stop:function(){
var items = $(pic_class);
if(items.length > 1){
$(save_button).show();
$(info_container).show();
$(result_container).hide();
}
}
});}

function sortPics(sortby){
changeSortOrder(sortby);

var items = $(pic_class).get();

items.sort(function(a, b) {
var compA = getSortValue(a,sortby);
var compB = getSortValue(b,sortby);


return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;});

el_type = document.getElementById(pic_container.substr(1,pic_container.length)).tagName;

prev_el = $(pic_container).parent();


$(pic_container).remove();

clearfix = document.createElement('div');
clearfix.setAttribute('style','clear:both');


sorted_images = document.createElement(el_type);
sorted_images.id = pic_container.substr(1,pic_container.length);

order = getSortOrder(sortby);
if(order=='desc'){items.reverse();}

$.each(items, function(idx, itm) { sorted_images.appendChild(itm);});
sorted_images.appendChild(clearfix);
$("#picture1").append($(sorted_images));

makeSortable();
$(save_button).show();
hideLoader();


}

function getSortValue(el,sortby){
val_spans = el.getElementsByTagName('span');
for(var i=0; i< val_spans.length; i++){
if(val_spans[i].getAttribute('class')==sortby){
return val_spans[i].innerHTML.toLowerCase();
}
}
}

</script>
<script type="text/javascript">



function show_hidden_divs(id,text) {
document.getElementById('edit_' + id).style.display='block';
return false;



Ich weiß jetzt nicht ob das alles ist - aber zumindest schon mal ein Anfang...

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
10.06.2010 16:17
#4 RE: Wo habe ich einen Fehler drin?
avatar
Mitglied

Ich habe es per Hand kopiert, vorher hatte ich das Blue-Ocean-Template noch von MyHPM (die gibt es ja leider nicht mehr)
http://www.myhpm.de/t589f50-Blue-Ocean-Template.html
Was genau sie an der Galerie gemacht haben, weiß ich leider nicht :(.

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

 Antworten

 Beitrag melden
10.06.2010 16:17
avatar  mihca02
#5 RE: Wo habe ich einen Fehler drin?
mi
Mitglied

ich vermisse den ganzen Abschnitt

function makeSortable()

alles wa sdu da unten einkopierst hast, ist doch nur ein Teil des Updates

-------------------------------------------------------------------


 Antworten

 Beitrag melden
10.06.2010 16:25
#6 RE: Wo habe ich einen Fehler drin?
avatar
Mitglied

Danke! :)
Alles eingebaut, nur das nicht, man bin ich manchmal blond!

Achim!

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!