JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="selectList">
    <img src="http://results.rightware.com/system/images/212/mini/Samsung-Galaxy-R.png" />
    <img src="http://media.xda-developers.com/customavatars/avatar1431849_5.gif" />
    <img src="http://img4.flixcart.com//image/mobile/2/n/f/samsung-galaxy-r-i9103-275x275-imad2whbbudghwgg.jpeg" />
    <img src="http://www.pcmobilezone.com/wp-content/uploads/2012/02/Samsung-Galaxy-R-I9103-50x50.jpg" />
    <img src="http://a248.e.akamai.net/origin-cdn.volusion.com/rajtf.xprvf/v/vspfiles/photos/Samsung_i9103-2S.jpg" />
</div>
<input type = "text" id="name">

<div id="output">

</div>

CSS

#output, #selectList { width: 202px; border: 1px solid #000; margin: 2px; height: 400px; float: left }

#selectList img.clicked { border: 1px solid Blue }

JavaScript

$(function() {
$('#new_img').click(function() {

var element = $(this);

    var boxval = $("#newimgurl").val();

    var dataString = 'content='+ boxval;

        if(boxval=='')
        {
        alert("Please Enter Some Text");
        }
        else
 {
        $("#flash2").show();
        $("#flash2").fadeIn(400).html('<img src="images/ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');

$.ajax({
                type: "POST",
  url: "image_et.php",
   data: dataString,
  cache: false,
  success: function(html){
  $("#image-url-body").hide();
  $("#flash2").hide();
  $('.window').hide();
  $("#dialog3").show();
  data = $('<div/>').append(html);
  $("#selectList").prepend(html);
  $('#linktitle',data).prependTo('#output');
  $('#output').append($('<input id="imgurl" type="hidden" value="'+boxval+ '">'));

  }
 });

}

 return false;


});
});


$(function() {
$('#new_img_store').click(function() {

var imgpath = $("#imgpath").val();
var imgcaption = $("#linktitle").val();
var imgurl = $("#imgurl").val();
var tabid="84";
var uid = "1";

var dataString = 'imgpath='+ imgpath+ '&imgcaption=' + imgcaption+ '&imgurl=' + imgurl+ '&tabid=' + tabid+ '&uid=' + uid;

alert(dataString);
                        if(vcaption=='')
                        {
                        alert("Please Enter Some Text");
                        }
                        else
                 {
                        $("#flashimagedb").show();
                        $("#flashimagedb").fadeIn(400).html('<img src="images/ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');

                $.ajax({
                                type: "POST",
                  url: "add_link_db.php",
                   data: dataString,
                  cache: false,
                  success: function(html){

                  $("#flashimagedb").hide();
                    $("#flashimagedb").prepend(html);

                  }
           ...