FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: jQuery Rater Umstellung vom 01.10.2008

	MGi Foren-Übersicht -> Programmierung -> jQuery Rater Umstellung

Autor

Nachricht

ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht: Männlich

Verfasst Mi 01.10.2008 14:44
Titel

jQuery Rater Umstellung

Hey Leut,

ich hab mal ne frage, hab mir das Rater Plugin für jQuery heruntergeladen und bastel da gerade dran rum.
Jetzt möchte ich das meine Datei die die Varibale erhält automatisch nen DB Eintrag macht.

Jetzt habe ich nur das Problem das die Variable die zurückgegeben wird stehts die gleiche ist und zwar :
$_POST['rating'], da ich aber mehrere abfrage habe und die variable so nicht direkt unterscheiden kann muss ich in der js datei einstellen das die zurückgegebene datei von mir aus $_POST['q1'] - $_POST['q2'] - $_POST['qN'] heißt.

jedoch weiß ich nicht wo ich das in der js machen kann... jemand ne ahnung?:

Weil aufgerufen wir das ganze ja über

Code:

<div id="demo1" class="demo">
</div>
<script type="text/javascript">
$('#demo1').rater('ratingsdemo.php');
</script>

jetzt will ich einfach das die variable $_POST[''] den werd der div id übernimmt und dann zurückgibt

Code:

/**
* jQuery Ajax Rater Plugin
*
* This rater is based on the code Ritesh Agrawal did. Unfortunatly his CSS and the hover technique breaks in some browsers.
* So i thought, why not use the best CSS star-rater known to man kind and throw it in the mix.
* I have used the CSS and technique from Komodo Media since it is stable and tested on many, many browsers.
*
* This rater compared, has no cancel button. But i think we can live with that :)
* To avoid conflicts i have changed the function name.
*
* Licensed under The MIT License
*
* @version 1.0
* @since 03.01.2007
* @author Kjell Bublitz <m3nt0r.de@gmail.com
* @link http://www.m3nt0r.de/devel/raterDemo/ Demonstration and Documentation
* @link http://php.scripts.psu.edu/rja171/widgets/rating.php Based on Ritesh Agrawal Star Rating System
* @link http://komodomedia.com/blog/index.php/2007/01/20/css-star-rating-redux/ The Komodo Media CSS Rater Blogpost
* @license http://www.opensource.org/licenses/mit-license.php MIT
* @package jQuery Plugins
* @subpackage Rater
*/

/**
* Usage: $('#rating').rater('your_servlet', {style:'basic', maxvalue:5, curvalue:0});
*
* @param url The address you want to post the result to.
* @param options The style and value attributes
*
* Valid options:
* ---------------------------------------
* style: 'basic', 'inline' OR 'small'
* maxvalue: the maximum value / number of stars
* curvalue: the initial value / selected stars
*/
jQuery.fn.rater = function(url, options)
{
if(url == null) return;
var settings = {
   url : url, // post changes to
   maxvalue : 5, // max number of stars
   curvalue : 0 // number of selected stars
};

if(options) { jQuery.extend(settings, options); };
jQuery.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false});

var container = jQuery(this);
jQuery.extend(container, { averageRating: settings.curvalue, url: settings.url });

if(!settings.style || settings.style == null || settings.style == 'basic') {
   var raterwidth = settings.maxvalue * 25;
   var ratingparent = '<ul class="star-rating" style="width:'+raterwidth+'px">';
}
if(settings.style == 'small') {
   var raterwidth = settings.maxvalue * 10;
   var ratingparent = '<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
}
if(settings.style == 'inline') {
   var raterwidth = settings.maxvalue * 10;
   var ratingparent = '<span class="inline-rating"><ul class="star-rating small-star" style="width:'+raterwidth+'px">';
}
container.append(ratingparent);

// create rater
var starWidth, starIndex, listitems = '';
var curvalueWidth = Math.floor(100 / settings.maxvalue * settings.curvalue);
for(var i = 0; i <= settings.maxvalue ; i++) {
   if (i == 0) {
      listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;">'+settings.curvalue+'/'+settings.maxvalue+'</li>';
   } else {
      starWidth = Math.floor(100 / settings.maxvalue * i);
      starIndex = (settings.maxvalue - i) + 2;
      listitems+='<li class="star"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue +'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
   }
}
container.find('.star-rating').append(listitems); // i am using find here, because the span wrapped in the small style would break children()

if(settings.maxvalue > 1) // add a container for the ajax result
{
   container.append('<span class="star-rating-result"></span>');
}
var stars = jQuery(container).find('.star-rating').children('.star');
stars.click(function()
{
   if(settings.maxvalue == 1) // on / off
   {
      settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
      jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
      jQuery.post(container.url, { "rating": settings.curvalue });
      return false;
   }
   else
   {

      settings.curvalue = stars.index(this) + 1;
      raterValue = jQuery(this).children('a')[0].href.split('#')[1];
      jQuery.post(container.url, { "rating": raterValue }, function(response){
         container.children('.star-rating-result').html(response)
      });
      return false;
   }
   return true;
});

return this; // strict warning: anonymous function does not always return a value. fix?
}

Zuletzt bearbeitet von ENIXone am Mi 01.10.2008 14:46, insgesamt 1-mal bearbeitet

sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich

Verfasst Mi 01.10.2008 14:50
Titel

Code:

jQuery.post(container.url, { "rating": settings.curvalue });
return false;

ändern in:

Code:

jQuery.post(container.url, { container.id: settings.curvalue });
return false;

sollte es tun.

ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht: Männlich

Verfasst Mi 01.10.2008 14:57
Titel

sahnemuh hat geschrieben:

Code:

jQuery.post(container.url, { "rating": settings.curvalue });
return false;

ändern in:

Code:

jQuery.post(container.url, { container.id: settings.curvalue });
return false;

sollte es tun.

also ich habs jetzt so:

Code:

stars.click(function()
{
   if(settings.maxvalue == 1) // on / off
   {
      settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
      jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
      jQuery.post(container.url, { container.id: settings.curvalue });
      return false;
   }
   else
   {

      settings.curvalue = stars.index(this) + 1;
      raterValue = jQuery(this).children('a')[0].href.split('#')[1];
      jQuery.post(container.url, { "rating": raterValue }, function(response){
         container.children('.star-rating-result').html(response)
      });
      return false;
   }
   return true;
});

in der ratingdemo.php rufe ich es so auf: <?php echo($_POST['demo1']); ?>

jedoch kommt da nix bei rum

sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich

Verfasst Mi 01.10.2008 14:59
Titel

mach mal <?php print_r($_POST); ?> und schau, was von dem script kommt.

ach ja: in der else bedingung mußt du natürlich das selbe ändern:

Code:

stars.click(function()
{
if(settings.maxvalue == 1) // on / off
{
settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
jQuery.post(container.url, { container.id: settings.curvalue });
return false;
}
else
{

settings.curvalue = stars.index(this) + 1;
raterValue = jQuery(this).children('a')[0].href.split('#')[1];
jQuery.post(container.url, { container.id: raterValue }, function(response){
container.children('.star-rating-result').html(response)
});
return false;
}
return true;
});

Zuletzt bearbeitet von sahnemuh am Mi 01.10.2008 15:01, insgesamt 1-mal bearbeitet

ENIXone
Threadersteller

Dabei seit: 25.02.2007
Ort: Sundern
Alter: 37
Geschlecht: Männlich

Verfasst Mi 01.10.2008 15:04 Titel

Okay habs jetzt so abgeändert und die php ausgabe reinsetzt. Die Ausgabe lautet dann: Array ( [rating] => 2 )

sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich

Verfasst Mi 01.10.2008 16:02
Titel

Dann mach's halt so:

Code:

<div id="demo1" class="demo">
</div>
<script type="text/javascript">
$('#demo1').rater('ratingsdemo.php', { postvalue : 'q1' });
</script>

in "postvalue" schreibst du dann einfach q1, q2 oder was auch immer.

Script:

Code:

/**
* jQuery Ajax Rater Plugin
*
* This rater is based on the code Ritesh Agrawal did. Unfortunatly his CSS and the hover technique breaks in some browsers.
* So i thought, why not use the best CSS star-rater known to man kind and throw it in the mix.
* I have used the CSS and technique from Komodo Media since it is stable and tested on many, many browsers.
*
* This rater compared, has no cancel button. But i think we can live with that :)
* To avoid conflicts i have changed the function name.
*
* Licensed under The MIT License
*
* @version 1.0
* @since 03.01.2007
* @author Kjell Bublitz <m3nt0r.de@gmail.com
* @link http://www.m3nt0r.de/devel/raterDemo/ Demonstration and Documentation
* @link http://php.scripts.psu.edu/rja171/widgets/rating.php Based on Ritesh Agrawal Star Rating System
* @link http://komodomedia.com/blog/index.php/2007/01/20/css-star-rating-redux/ The Komodo Media CSS Rater Blogpost
* @license http://www.opensource.org/licenses/mit-license.php MIT
* @package jQuery Plugins
* @subpackage Rater
*/

/**
* Usage: $('#rating').rater('your_servlet', {style:'basic', maxvalue:5, curvalue:0});
*
* @param url The address you want to post the result to.
* @param options The style and value attributes
*
* Valid options:
* ---------------------------------------
* style: 'basic', 'inline' OR 'small'
* maxvalue: the maximum value / number of stars
* curvalue: the initial value / selected stars
*/
jQuery.fn.rater = function(url, options)
{
if(url == null) return;
var settings = {
url : url, // post changes to
maxvalue : 5, // max number of stars
curvalue : 0 // number of selected stars
};

if(options) { jQuery.extend(settings, options); };
jQuery.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false});

var container = jQuery(this);
jQuery.extend(container, { averageRating: settings.curvalue, url: settings.url });

if(!settings.style || settings.style == null || settings.style == 'basic') {
var raterwidth = settings.maxvalue * 25;
var ratingparent = '<ul class="star-rating" style="width:'+raterwidth+'px">';
}
if(settings.style == 'small') {
var raterwidth = settings.maxvalue * 10;
var ratingparent = '<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
}
if(settings.style == 'inline') {
var raterwidth = settings.maxvalue * 10;
var ratingparent = '<span class="inline-rating"><ul class="star-rating small-star" style="width:'+raterwidth+'px">';
}
container.append(ratingparent);

// create rater
var starWidth, starIndex, listitems = '';
var curvalueWidth = Math.floor(100 / settings.maxvalue * settings.curvalue);
for(var i = 0; i <= settings.maxvalue ; i++) {
if (i == 0) {
listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;">'+settings.curvalue+'/'+settings.maxvalue+'</li>';
} else {
starWidth = Math.floor(100 / settings.maxvalue * i);
starIndex = (settings.maxvalue - i) + 2;
listitems+='<li class="star"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue +'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
}
}
container.find('.star-rating').append(listitems); // i am using find here, because the span wrapped in the small style would break children()

if(settings.maxvalue > 1) // add a container for the ajax result
{
container.append('<span class="star-rating-result"></span>');
}
var stars = jQuery(container).find('.star-rating').children('.star');
stars.click(function()
{
if(settings.maxvalue == 1) // on / off
{
settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
if(settings.postvalue && settings.postvalue != null) {
   jQuery.post(container.url, { settings.postvalue: settings.curvalue });
} else {
   jQuery.post(container.url, { "rating": settings.curvalue });
}
return false;
}
else
{

settings.curvalue = stars.index(this) + 1;
raterValue = jQuery(this).children('a')[0].href.split('#')[1];
if(settings.postvalue && settings.postvalue != null) {
   jQuery.post(container.url, { settings.postvalue: raterValue }, function(response){
   container.children('.star-rating-result').html(response)
   });
   } else {
   jQuery.post(container.url, { "rating": raterValue }, function(response){
   container.children('.star-rating-result').html(response)
   });
   }
return false;
}
return true;
});

return this; // strict warning: anonymous function does not always return a value. fix?
}


	MGi Foren-Übersicht -> Programmierung

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.