window.location.search ohne Reload

R

raybrackho

Mitglied
Ich bastele gerade einen simplen Produktkonfigurator, indem man seine Wunschkombination bereits über die url vars aufrufen kann.

Wenn ich nach der Auswahl einer neuen Farbe nun die URL ändern möchte (damit man diese URL z.B.bookmarken kann). Wird automatisch die Seite neugeladen.

Das führt in meinem Fall zu einer unendlichen Schleife, da die Variablen in der URL am Anfang die Farbe meiner Teile im Produktkonfigurator bestimmen.

Gibt es eine Möglichkeit "window.location.search" zu definieren bzw. auszutauschen, ohne das alle meine Funktionen erneut durchlaufen werden?

Code: 
window.location.search = '?farbeA=2';
 
Ich denke nicht.

Zumindest wird das nicht ohne Neuladen gehen, allerdings könntest du deine Funktionen umbauen.
Sodass du nicht mehr auf die "Browserinterne"-Variable zugreifst, sondern auf eine eigene, die du selber verändern kannst (ohne Neuladen!).
Könntest du deinen Code zeigen?
 
Hi,

ist es möglich, der URL einen Parameter mitzugeben, anhand dessen entschieden werden kann, ob ein Aufruf der Funktionen gewünscht ist?
Code: 
window.location.search = '?farbeA=2&recalc=0'; // recalc = 1 neuberechnen, 0 = nicht neu berechnen
Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var intRecalc = 1;

if(window.location.search){
  var strSearch = window.location.search.substr(1);
  // Falls ein Neuberechnen-Flag übergeben wurde
  if(strSearch.search(/recalc/) != -1){
    intRecalc = parseInt(strSearch.match(/recalc=[^&|\b]/)[0].split("=")[1]);
  }
}

window.onload = function(){
  // Falls die Funktionen aufgerufen werden sollen
  if(intRecalc == 1){
    // ToDo: Funktionen aufrufen
    alert("Funktionsaufruf");
  }
}
 //-->
</script>
</head>
<body>
<button onclick="window.location.search = '?farbeA=2&recalc=0'">search ohne Funktionsaufruf</button>
<button onclick="window.location.search = '?farbeA=2&recalc=1&tester=hallo'">search mit Funktionsaufruf</button>
</body>
</html>

Ciao
Quaese
 
Ich rufe beim Seitenaufruf meine calc() Fuktion einmal auf, um das Produkt mit den Variablen aus der URL einzufärben.
Code: 
<body onload=calc();>

Anschliessend soll der User über einen jQuery Colorpicker Farben auswählen, mit denen dann ein PNG erzeugt wird (Vorschau).
Code: 
<script type="text/javascript">
<!--

$(document).ready(function(){

farbeA = $.url.param("farbe");

$('#cpm').colorPicker({
			
defaultColor: farbeA | 0, // index of the default color (optional)
columns: 8,     // number of columns (optional)  
color: ['#ffffff','#000000', '#272727', '#001126', '#001805', '#200500', '#201400', '#1d0024'], // list of colors (optional)

// click event - selected color is passed as arg.
click: function(colorm){

$('#outputm').html(colorm.replace(/#ffffff/,"Weiß").replace(/#272727/,"Anthrazit").replace(/#001126/,"Dunkelblau").replace(/#001805/,"Dunkelgrün").replace(/#200500/,"Dunkelrot").replace(/#201400/,"Braun").replace(/#1d0024/,"Dunkellila").replace(/#000000/,"Schwarz"));
},
});

$('#cpm').click(calc); //Bei Klick auf ein Farfeld wird die Funktion zur Erstellung des PNG aufgerufen
// $('#cpb').click(window.location.search = '?farbeA=2'); Dieser Aufruf endet in der besagten Endlosschleife

$('#\\#ffffff').attr('title', 'Weiß');
$('#\\#272727').attr('title', 'Anthrazit');
$('#\\#001126').attr('title', 'Dunkelblau');
$('#\\#001805').attr('title', 'Dunkelgrün');
$('#\\#200500').attr('title', 'Dunkelrot');
$('#\\#201400').attr('title', 'Braun');
$('#\\#1d0024').attr('title', 'Dunkellila');
$('#\\#000000').attr('title', 'Schwarz');

//$(document).ready //-->

function calc(){
var m_farbe=document.getElementById("outputm").innerHTML;
document.getElementById("bild").src = "phpimg.php?mf="+m_farbe+";
}

</script>

Nach der Berücksichtigung von Quaeses Tipp (Danke übrigens dafür) habe ich die calc() Funktion folgendermaßen umgeschrieben.
Code: 
var intRecalc = 1;
 
if(window.location.search){
  var strSearch = window.location.search.substr(1);
  // Falls ein Neuberechnen-Flag übergeben wurde
  if(strSearch.search(/recalc/) != -1){
    intRecalc = parseInt(strSearch.match(/recalc=[^&|\b]/)[0].split("=")[1]);
  }
}
 
window.onload = function calc(){
  // Falls die Funktionen aufgerufen werden sollen
  if(intRecalc == 1){
var m_farbe=document.getElementById("outputm").innerHTML;
document.getElementById("bild").src = "phpimg.php?mf="+m_farbe+";
  }
}

Leider tut sich dann garnichts mehr in meinem Script. Es wird kein Bild mehr erzeugt und es ändert sich auch nichts in der URL.
 
Zuletzt bearbeitet:
Also ich verzweifel da dran.
Habe jetzt Quaeses Funktion mal etwas vereinfacht.
Code: 
function calc(){
 if(recalc | 0 == 1){}
else {
var m_farbe=document.getElementById("outputm").innerHTML;
document.getElementById("bild").src = "phpimg.php?mf="+m_farbe+";
   }
}

Das funktioniert in soweit, da ich ja ein Script laufen lasse, welches mir die Variablen aus der URL extrahiert. http://ajaxcssblog.com/jquery/url-read-request-variables/

Aber ich gerate immer wieder in eine Schleife oder das garnichts mehr angezeigt wird.
Die Anzeige in der URL ist halt wichtig, damit man damit das Produkt mit den gesetzten Einstellungen bookmarken kann oder den Link weitersenden kann.

Und ein weiteres Problem ist, dass bei meinem Colorpicker am Anfang ein "Klick" generiert wird, um die Standardfarbe auszuwählen. Und so lande ich, egal was ich mache wieder in der Endlosschleife.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück