Φόρτωμα ajax περιεχομένου και πρόβλημα μη εφαρμογής του CSS της σελίδας σε αυτό

[philos]

Αντιμετωπίζω το εξής πρόβλημα με ajax response και styling, έχω κάνει άπειρες προσπάθειες να το φτιάξω αλλά χωρίς αποτέλεσμα.
 
Μιλάμε καταρχήν για το mobile style της μηχανής vbulletin 4, στο οποίο προσπαθώ να κάνω customιές.

Έχω προσθέσει το εξής javascript/jquery function για να κάνω load τα subforums μιας main κατηγορίας. όταν κάποιος κάνει click πάνω της:

<script>
function sc_getsubforums(getforumid)
{
        $.ajax({
            url : "getforums.php",
            type: "POST",
            data: {
                securitytoken: SECURITYTOKEN,
                act: 'getsubforums', forumid: getforumid
            },
            dataType: "html",
            success: function(data, textStatus, jqXHR){
				$('#sc_subforums_' + getforumid).html('');
                                $('#sc_subforums_' + getforumid).html(data);
				$('#sc_subforums_' + getforumid).fadeOut(500);
				$('#sc_subforums_' + getforumid).fadeIn(500);
            }
        });
}
</script>

Παράλληλα έχω τοποθετήσει ένα div (τελευταία γραμμή) για κάθε main κατηγορία που φορτώνει:

<li data-role="list-divider" onclick="sc_getsubforums({vb:raw forum.forumid});">
	<h3>{vb:raw forum.title}</h3>
	<vb:if condition="$show['forumdescription']"><p>{vb:raw forum.description}</p></vb:if>
</li>
<vb:if condition="$childforumbits">
	{vb:raw childforumbits}
</vb:if>
<div id="sc_subforums_{vb:raw forum.forumid}"></div>

Το πρόβλημα είναι ότι ναι μεν επιστρέφεται η λίστα στο div, αλλά δεν έχει το σωστό style. Φαίνεται σαν να έχει επιστραφεί κάτι τελείως αποκομμένο από το css style της σελίδας που έχει φορτωθεί.

 

Σας παραθέτω εικόνες σωστό/ λάθος.

(το "σωστό" το έχω πάρει από την αφαίρεση της customιάς ώστε η σελίδα να φορτώνει άμεσα τα sub forums αντί να γίνεται μετέπειτα με ajax -> αυτό που προσπαθώ να πετύχω).

 

Πως μπορώ να το διορθώσω;

[dominotrix]

Μπορεις να μας δωσεις τον HTML κωδικα που εμφανιζεται στη σελιδα; Ειναι διαφορετικος απο αυτον που εχεις πιο πανω; Τα classes ειναι ιδια; Αν βαλεις τον κωδικα CSS inline παλι δε θα δουλεψει;

[philos]

Λοιπόν, ο κώδικας είναι ο εξής (φόρτωσα με ajax τα forums που εμφανίζονται λάθος, τα επέλεξα και έκανα view source). Οπότε ο λάθος κώδικας:

<div role="main" class="ui-content" data-role="content">
	<ul data-role="listview" class="forumbits ui-listview">
		<li class="ui-li ui-li-divider ui-btn ui-bar-b" role="heading" data-role="list-divider" onclick="sc_getsubforums(11);">
	<h3 class="ui-li-heading">Lala love</h3>
	
</li>

<div style="display: block;" id="sc_subforums_11">
	<li data-role="list-divider">
		 
	</li>

<li id="forum9" class="forumbit_post L1">
	<img src="http://localhost/suite422/images/statusicon/forum_old-16.png" class="forumicon ui-li-icon" id="forum_statusicon_9" alt="">
	<h3><a href="forumdisplay.php?f=9">Another Forum</a></h3>
	
	<span class="ui-li-count">0</span>
</li>


	<li data-role="list-divider">
		 
	</li>

<li id="forum56" class="forumbit_post L1">
	<img src="http://localhost/suite422/images/statusicon/forum_old-16.png" class="forumicon ui-li-icon" id="forum_statusicon_56" alt="">
	<h3><a href="forumdisplay.php?f=56">Test Forum</a></h3>
	
	<span class="ui-li-count">0</span>
</li>

</div>

	</ul>
</div>

Και ο σωστός κώδικας (φόρτωση μαζί με τη σελίδα) :

<div role="main" class="ui-content" data-role="content">
	<ul data-role="listview" class="forumbits ui-listview">
		<li class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-undefined" role="heading" data-role="list-divider" onclick="sc_getsubforums(11);">
	<h3 class="ui-li-heading">Lala love</h3>
	
</li>

	<li data-theme="d" class="forumbit_post L2 ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-li-has-icon ui-btn-up-d"><div aria-hidden="true" class="ui-btn-inner ui-li"><div class="ui-btn-text">
	<img src="http://localhost/suite422/images/statusicon/forum_old-16.png" class="forumicon ui-li-icon ui-li-thumb" id="forum_statusicon_9" alt="">
	<h3 class="ui-li-heading"><a class="ui-link-inherit" href="forumdisplay.php?f=9">Another Forum</a></h3>
	
	<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">0</span>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>

<li data-theme="d" class="forumbit_post L2 ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-li-has-icon ui-btn-up-d"><div aria-hidden="true" class="ui-btn-inner ui-li"><div class="ui-btn-text">
	<img src="http://localhost/suite422/images/statusicon/forum_old-16.png" class="forumicon ui-li-icon ui-li-thumb" id="forum_statusicon_56" alt="">
	<h3 class="ui-li-heading"><a class="ui-link-inherit" href="forumdisplay.php?f=56">Test Forum</a></h3>
	
	<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">0</span>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>



<div id="sc_subforums_11"></div>

	</ul>
</div>

Διακρίνω τη διαφορά στο L1-L2 που λέει (levels) - έκανα μια δοκιμή να το διορθώσω, αλλά το πρόβλημα εξακολουθεί.

Δεν μπορώ να καταλάβω πως προστίθενται επιπλέον κλάσεις σε κάποια από τα παραπάνω στοιχεία (εγώ δε τις βλέπω στα templates που καλούνται).

[vadou]

Οι extra classes λογικά μπαίνουν με javascript, γι'αυτό δεν τις βρίσκεις στα templates. Επίσης, πολύ πιθανό κάποιο κομμάτι της html να διαμορφωνεται με javascript. Το πρόβλημά σου είναι ότι όταν αλλάζεις το περιεχόμενο της σελίδας σου με ajax, δεν ξανατρέχει η javascript από την αρχή, οπότε πρέπει  να βρεις τι κώδικα js χρειάζεσαι για να εμφανιστεί σωστά το καινούριο περιεχόμενο και να το ξανατρέχεις manually σε κάθε ajax call.

[satafaka]

Δεν διάβασα όλο το Post (κακώς   ) , απλά δοκίμασε να επιστρέψεις με ajax ΚΑΙ το CSS ή το Javascript που θέλεις να τρέξει. 

[philos]

Λοιπόν παιδιά σας έχω live παράδειγμα του mobile style της vBulletin 4.

Μπορείτε να δείτε εδώ.

 

Παρατηρήστε ότι αν κάνετε δεξί click και view source code, δείχνει διαφορετικό αποτέλεσμα για κάθε forum - row απ' ότι αν κάνετε select κάποια/α forums και view source code. Πρόκειται για ακριβώς τις διαφορές που παρέθεσα στο αρχικό post (σωστό - λάθος).

 

Δείτε επίσης τι js αρχεία τρέχουν. Εγώ δοκίμασα να τα κάνω όλα να - ξανά - φορτώνουν με το ajax request, αλλά χωρίς αποτέλεσμα.

 

Το θέμα είναι γιατί όταν το φορτώνω με ajax, δεν εφαρμόζει καθόλου το style...

[vadou]

Αν φορτώσεις τη σελίδα με απενεργοποιημένη τη Javascript στον browser σου, θα καταλάβεις γιατί στα εμφανίζει έτσι.

Το να ξαναφορτώσεις απλά τα αρχεία js, δε σου εγγυάται ότι θα τρέξει ο κώδικας που χρειάζεσαι. Αν πχ τρέχει κώδικα στο document.ready, αυτό δε θα ξαναεκτελεστεί όταν φορτωθεί το καινουριο περιεχόμενο. Πρέπει να βρεις τι κομμάτια js χρειάζεται να εκτελεστούν μετά το φόρτωμα του ajax και να τα ξαναεκτελέσεις.

[philos]

Ναι αλλά ποιος κώδικας είναι;

Δοκίμασα να τρέξω ένα προς ένα όλα τα js αρχεία της σελίδας + όλα μαζί σε ξεχωριστή δοκιμή μέσω του ακόλουθου κώδικα μέσα στην sc_getsubforums() :

$.getScript( "path_to_script", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

Αλλά και πάλι δεν άλλαξε κάτι...

[vadou]

- Δεν ξέρω και δε μπορώ να ξέρω τι είναι η sc_getsubforums().   Άκυρο τώρα είδα ότι την έδωσες στο 1ο post.

- Όπως σου είπα, δεν αρκεί να ξαναφορτώσεις τα js αρχεία, πρέπει να ξανακάνεις init τα functions που σου διαμορφώνουν το περιεχόμενο.

- Τα js αρχεία είναι minified, οπότε με μια πολύ γρήγορη ματιά που έριξα δε μπορώ να σου πω τι κώδικα πρέπει να ξανατρέξεις, αλλά πιστεύω ότι αυτό που ψάχνεις βρίσκεται στο vbulletin-mobile.js

- Προσωπικά, δεν έχω ούτε το χρόνο - ούτε τη διάθεση να κάτσω να διαβάσω όλη τη javascript που τρέχει το vbulletin για να σου πω τι χρειάζεται να κάνεις, αν βρεθεί κάποιος να το κάνει θα είσαι τυχερός. Αλλιώς έχεις 3 επιλογές: να το ψάξεις μόνος σου περαιτέρω, να πληρώσεις κάποιον να στο φτιάξει ή να ξεχάσεις το ajax.

Αυτά... Βοήθησα όσο μπορούσα, καλή τύχη.

[philos]

Ευχαριστώ πολύ vadou!

 

Τελικά έφτιαξα τα δικά μου αντίστοιχα templates - αντί να καλώ τα default της vBulletin - εφαρμόζοντας σε αυτά όσα εφαρμόζονται με javascript, οπότε πλέον το script λειτουργεί εντάξει.