php dynamic into javascript code

[andrewliu]

Hello

if my page outputs a certain item number from my database, how do i put that item number into my javascript?

'<div class="update".$item_id.">';

say i have $item_id and it various

how do i put it into javascript code? would it be the same thing?

I can just put something like this?

$(document).ready(function(){	
    $('.update$item_id').hide()

I need help,

thank you

[Airshow]

Andrew,

Very nearly.

Assuming the HTML to be part of a php print or echo statement:

'<div class="update' . $item_id . '">';

And assuming the javascript not to be part of a php print or echo statement:

$(document).ready(function(){
    $('.update<?php echo $item_id; ?>').hide();

Airshow

[andrewliu]

Thank you! That works!

But I have a problem.

I'm outputting my products through a while loop. It seems like it works for my last output product, but the products before that doesn't work.

I currently have a hide/show

$(document).ready(function(){	
    $('#update<?php echo $item_id?>').hide()
	$('#update<?php echo $item_id?>').append('<a href="#" id="cancelOptions<?php echo $item_id?>" class="button">cancel</a>');
	$('a#changeOptions<?php echo $item_id?>').click(function() {
		$('#update<?php echo $item_id?>').show();
		$('#itemOptions<?php echo $item_id?>').hide();
		return false;
	});
	$('a#cancelOptions<?php echo $item_id?>').click(function() {
		$('#update<?php echo $item_id?>').hide();
		$('#itemOptions<?php echo $item_id?>').show();
		return false;
	});
});

Let me know if you need more clarification,

Thank you again for the help!

[Airshow]

Is $(document).ready(function(){...}) inside the php while loop?

That would certainly explain why only the last iteration works. Each iteration will overwrite the previous iteration.

You should be able to achieve what you want with a single $(document).ready(function(){...}) (in the document head) containing a $(...).each () structure, something like this (untested):

$(document).ready(function(){
  $('.update').each(function() {
    $that = $(this);
    $that.hide();
    var item_id = this.id.replace('update','');
    $that.append('<a href="#" id="cancelOptions' + item_id + '" class="button">cancel</a>');
    $('a#changeOptions'+item_id).click(function() {
      $that.show();
      var item_id = this.id.replace('changeOptions','');
      $('#itemOptions'+item_id).hide();
      return false;
    });
    $('a#cancelOptions'+item_id).click(function() {
      $that.hide();
      var item_id = this.id.replace('cancelOptions','');
      $('#itemOptions'+item_id).show();
      return false;
    });
  });
});

As written above, it requires that each id="updatexx" element is also given class="update" (as the HTML is built in php).

Probably needs debugging but that's the essence of it.

Airshow

[andrewliu]

it looks like i should be able to just copy and paste it into my code, but it doesn't work.

This is what my php looks like

foreach($_SESSION["cart_array"] as $each_item){


		
		while($row = mysql_fetch_array($sql)){
			
		
		$cartOutput .= "<div id='".$item_id."' class='itemDescription'>";
		//codes
		$cartOutput .= "</div>";
		
		$cartOutput .= "<div id='itemOptions".$item_id."' class='itemOptions'>";
		
		$cartOutput .= "<a href='#' id='update".$item_id."'>change details</a>";
		
		$cartOutput .= "</div>";
		$cartOutput .= "<fieldset id='update".$item_id."' class='update'>";
		
		$cartOutput .= "<a href='#' id='cancelOptions".$item_id."'>cancel</a>";
		$cartOutput .= "</fieldset>";

the code wasn't able to do anything?

the var item_id would just act as if i had php echo $item_id? sorry I'm new to jquery.

Thank you for your help!

[Airshow]

At least part of the problem is due to lines 14 and 17 (above), which both create an element with id='update".$item_id."' .

I wonder, should the element at line 14 be id='changeOptions".$item_id."' ?

Airshow

[andrewliu]

Oh, the thing is I have a list of descriptions and at the end of it it has a link which is to "change details"

Then the fieldset pops up in replacement of the original details along with the "change details" and then a new link will appear having "cancel"

I also will have a link saying "update" but thats not in this yet. I guess I would have to figure that out after I figure this one first.

Thank you for help!

[Airshow]

Andrew,

I'm sure you're not a million miles away.

With a little rearrangement of the HTML and by using classes to identify the various elements within a "controls" container, the javascript will (I think) get a bit easier to implement:

foreach($_SESSION["cart_array"] as $each_item){
	while($row = mysql_fetch_array($sql)){
		$cartOutput .= "<div id='details".$item_id."' class='itemDescription'>";
		//codes
		$cartOutput .= "</div>";

		$cartOutput .= "<div id='itemControls".$item_id."' class='itemControls'>";
		$cartOutput .= "<div class='itemControlsGroupA'>";
		$cartOutput .= "<a href='#' class='button changeButton'>change details</a>";
		$cartOutput .= "</div>";
		$cartOutput .= "<fieldset class='itemControlsGroupB'>";
		$cartOutput .= "<a href='#' class='button cancelButton'>cancel</a>";
		$cartOutput .= "</fieldset>";
		$cartOutput .= "</div>";
	}
}

$(document).ready(function(){
  $('.itemControls').each(function() {
    $that = $(this);
    var item_id = this.id.replace('itemControls','');
    var $details = $('#details' + item_id);
    var $itemControlsGroupA = $that.find('.itemControlsGroupA')
    var $itemControlsGroupB = $that.find('.itemControlsGroupB');
    $itemControlsGroupB.hide();
    $that.find('.changeButton').click(function() {
      $details.hide();
      $itemControlsGroupA.hide();
      $itemControlsGroupB.show();
      return false;
    });
    $that.find('.cancelButton').click(function() {
      $details.show();
      $itemControlsGroupA.show();
      $itemControlsGroupB.hide();
      return false;
    });
  });
});

Airshow

[andrewliu]

brilliant! Thank you! I just gotta tweak it a little to my settings.