menu

Wednesday 30 October 2013

save and fetch data through jquery / java script and php without data base using push and pop

//---------------------- SCRIPT PART -----------
<script>
function addondblclick1(addobj)
{
 if($('.her1 .box ').size()< 5)
 {
itemcounts++;
var cat=$(addobj).attr('cat');

var catname=$(addobj).attr('catname');

var imagename=$(addobj).attr('imagename');

var imagecounter=$(addobj).attr('imagecounter');
var yaddfavtype =$(addobj).attr('addfavtype');
var user_email=$('#user').attr('value');
var sessionid=$('#sessionid').attr('value');
var openedtr=0;
$('#popup_box_for_progress').fadeIn("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','none', 500);

inp=$('#add_to_list_'+ cat + '_' + imagecounter);

$.ajax({
type: "POST",
url: "createpageajax/addtolist.php",
data: {
  session_id : sessionid,
  email : user_email,
  catid : cat,
  imgsrc:$(addobj).attr('imagename'),
  xcatname:catname,
  xaddfavtype:yaddfavtype,
  item:inp.val()
 }
}).done(function( msg ) {

$('#popup_box_for_progress').fadeOut("slow");  //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','auto');
 // alert(msg);
if(itemcounts < listexpandtrcount)
{
//alert('if');
    var rowCount=0;
var Count=0;

openedtr=openedtr+1;
         // alert('open'+openedtr);
  var count=$('#rowcount').attr('value');
  //alert(count);
  if(count>=1)
  {
var rowCount = $('.her1 li').find('span').length;
var newcount = Number(rowCount)+1;
$('#rowcount').attr('value',newcount);
  }
  else
  {
    ///////////////--count favlist rows--////////
            $('#rowcount').attr('value',openedtr);
  }
/*$('#table_item_count_' + itemcounts ).append("<span><img src='"+ $(addobj).attr('src')  + "' /></span><h5>" + catname + "-" + inp.val() + "</h5><a href='#'   index='" + msg + "'><img src='covers/removeicon.png' /></a>");*/
$('.her1').append("<li class='box'><img src='"+ $(addobj).attr('imagename')  + "' /></span>" + "<a href='#'   index='" + msg + "'>X</a></li>");
$('.table_listdata a').addClass("fav_list_ul_li_a");

}
else
{
//alert('else');
var rowCount=0;
var Count=0;

openedtr=openedtr+1;
         // alert('open'+openedtr);
  var count=$('#rowcount').attr('value');
 //alert(count);
  if(count>=1)
  {
var rowCount = $('.her1 li').find('span').length;
var newcount = Number(rowCount)+1;
$('#rowcount').attr('value',newcount);
  }
  else
  {
    $('#rowcount').attr('value',openedtr);
  }

var table_item='<li class="box"><span><img src="'+ $(addobj).attr('imagename')  + '"></span>' + '<a index="'+ msg +'" href="#" class="fav_list_ul_li_a">X</a>';
$( ".her1" ).append(table_item);

$('.her1 a').addClass("fav_list_ul_li_a");

}
inp.val('');

$('.fav_list_ul_li_a').click(function() {

$('#popup_box_for_progress').fadeIn("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','none', 500);

 $.ajax({
type: "POST",
url: "createpageajax/removefromlist.php",
data: {
  index:jQuery(this).attr('index')
 }
}).done(function( msg ){

//alert('dblclc');
//alert("Remove 1");

//alert(msg);

var rows=$('#rowcount').attr('value');
rows=Number(rows)-1;
$('#rowcount').attr('value',rows);

$('#popup_box_for_progress').fadeOut("slow");  //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','auto');

});
$(this).parent().remove();
//$(this).parent().parent().remove();
//alert('remove');
/*$('.her1 .table_listitem .table_listcounter').each(function(index) {
$(this).html(index+1);
}); */
 });
});
}
else
{
alert("You cannot add more than 5 items in her favs");
    $('#popup_box_for_max_items').fadeIn("slow");
           
}
}
</script>
//-------------------- HTML with PHP -------------
<html>
//----in loop----
<span class="her" imagename="<?php echo $fb_music['image']; ?>>" cat="<?php echo $row3['category_id'];?>"
catname="<?php echo $row3['category_name'];?>"
imagecounter="<?php echo $imagecounter;?>" addfavtype="Her" onClick="addondblclick1(this);">+ ADD ITEM</span>
//-------loop end---------------
 <div class="right-box">
      <p><span class="ch">Choose 10 items</span></p>
       <ul class="her">
<li>Her Favs</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<ul class="his">
<li>His Favs</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
      <ul class="her1">
<li>&nbsp;</li>
<!--
<li class="box"></li>-->
<?php $itemindex=0;
if(isset($_SESSION["items"]))
$sessitems=$_SESSION["items"];
else
$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='Her'){ ?>
                  <li class="box">
                    <!--<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
                    <td  id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata">--><?php

if(isset($item))
{
?>
                      <span><img src="<?php echo $item["imgsrc"];?>"></span>
                     
                      <a href="#" class="fav_list_ul_li_a" index="<?php echo $key;?>">X</a>
                      <?php

}

?><!--</td>
                  </tr>--></li>
                  <?php
$itemindex++;
}}
/*while($itemindex<0)
{
?>
                 <tr class="table_listitem">
                    <td class="table_listcounter"><?php echo $itemindex+1; ?></td>
                    <td  id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata"></td>
                  </tr>
                  <?php

$itemindex++;
}*/

?>
</ul>
<ul class="his1">
<li>&nbsp;</li>
<!--<li class="box"></li>-->
 <?php

$itemindex=0;
if(isset($_SESSION["items"]))
$sessitems=$_SESSION["items"];
else
$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='His'){ ?>
                  <li class="box">
                    <!--<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
                    <td  id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata">--><?php

if(isset($item))
{
?>
                      <span><img src="<?php echo $item["imgsrc"];?>"></span>
                     
                      <a href="#" class="fav_list_ul_li_a" index="<?php echo $key;?>">X</a>
                      <?php

}

?><!--</td>
                  </tr>--></li>
                  <?php
$itemindex++;
}}
/*while($itemindex<0)
{
?>
                 <tr class="table_listitem">
                    <td class="table_listcounter"><?php echo $itemindex+1; ?></td>
                    <td  id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata"></td>
                  </tr>
                  <?php

$itemindex++;
}*/

?>
</ul>
</html>
-------------------------------------------------------------------------------------------
<?php
//--------Dvelopeped by- Atul Sharma (R&D)
//include('../config/config.php'); // you can create db connection if you want to save data in database
//----------------
session_start();

$item["catid"]=$_POST["catid"];
$item["imgsrc"]=$_POST["imgsrc"];
$item["item"]=$_POST["item"];
$item["catname"]=$_POST["xcatname"];
$item["addfavtype"]=$_POST["xaddfavtype"];
$email=$_POST["email"];
$sessionid=$_POST["session_id"];
$imgpath=$item["imgsrc"];
$catid=$item["catid"];

$items=array();

$items=$_SESSION["items"];

if(count($items)<=0)
$items=array();

 if(count($_SESSION["items"])<=10)
 {
$index=array_push($items,$item);

$_SESSION["items"]=$items;

  array_pop(array_keys($items));
//print_r($_SESSION);
echo $index;
 }
 array_slice($_SESSION['items'], 0, 10);

?>

how to fetch value of selected radio button in javascript

By the Loop through those elements to check which is checked. You can try document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. 
You can see this example of how to fetch the value of the checked button from a set of radio buttons with the name "selected".
You can do similar for check box.
<html>
    <head>
        <script type="text/javascript">
          function get_radio_value() {
            var inputs = document.getElementsByName("selected");
            for (var i = 0; i < inputs.length; i++) {
              if (inputs[i].checked) {
                return inputs[i].value;
              }
            }
          }

          function onSubmit() {
            var id = get_radio_value();
            alert("selected input is: " + id);
          }
        </script>
    </head>
    <body>
        <form onsubmit="onSubmit();">
            <input name="selected" value="1" type="radio"/>1<br/>
            <input name="selected" value="2" type="radio"/>2<br/>
            <input name="selected" value="3" type="radio"/>3<br/>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>

Tuesday 22 October 2013

Thumbnail Image Upload Example jQuery AJAX

We are showing here how to upload images using Ajax and show a thumbnail so I decided to do a quick demo to show you how it can be done. The Script facilitates the process of uploading an image via Ajax and using PHP to create a thumbnail, return the image source and display to the user as a thumbnail of the image uploaded. All without the page reloading. To help you understand how it works I’ve commented on a few of the key parts below.
 View Demo
Read More

ajax-image-upload