realtime preview is working. but save to object when preview

app/assets/javascripts/inc/modal-preview.js

@@ -0,0 +1,15 @@
+//Preview need a link in form as Ex and a corresponding PUT action in controller
+//Ex preview trigger:
+// <%= link_to "NewPreview", realtime_preview_admin_ad_banner_path(ad_banner_tab) , :class=>'preview_trigger'%>
+
+$(document).ready(function() {
+	$("a.preview_trigger").click(function(){
+		$(this).after("<p id='show_preview'></p>");
+		$.ajax({
+			type:"PUT",
+			url:$(this).attr("href"),
+			data:$(this).parents("form").serialize()
+			}).done(function(){ $("#"+start_modal_with_id).modal('show');});  
+			return false;}
+		);
+});

app/assets/stylesheets/new_admin.css.erb

@@ -12,4 +12,4 @@
  *= require style
  *= require scroll_style
  *= require isotope
-*/
+*/ 

app/assets/stylesheets/widget.css

@@ -59,27 +59,29 @@
 }
 .select-role {
 	display:none;
-	padding: 10px 0;
+	overflow:hidden;
 }
 .file-upload {
 	position:relative;
 	overflow: hidden;
 }
 .file-upload .file-name {
-  border-color: #CCCCCC;
-  border-radius: 0 3px 3px 0;
-  border-style: solid;
-  border-width: 1px 1px 1px 0;
-  display: inline-block;
-  float: left;
-  height: 18px;
-  line-height: 18px;
-  margin: 0;
-  overflow: hidden;
-  padding: 4px 10px;
-  text-align: left;
-  white-space: nowrap;
-  width: 182px;
+	white-space: nowrap;
+	overflow: hidden;
+	border-style: solid;
+	border-width: 1px 1px 1px 0;
+	border-color: #CCC;
+	display: inline-block;
+	float: left;
+	padding: 4px 10px;
+	height: 18px;
+	line-height: 18px;
+	-webkit-border-radius: 0 3px 3px 0;
+	-moz-border-radius: 0 3px 3px 0;
+	border-radius: 0 3px 3px 0;
+	text-align: left;
+	margin: 0;
+    width: 182px;
 }
 .file-upload .upload {
 	margin:0;
@@ -109,11 +111,11 @@
     width: 100%;
 }
 .widget-box .widgetInfo {
-  display: inline-block;
-  margin: 0 0 5px;
-  padding: 5px 10px;
-  text-align: center;
-  width: 255px;
+    display: inline-block;
+    text-align: center;
+    width: 255px;
+    margin : 0px 0 5px;
+    padding: 5px 10px;
 }
 .file-upload .input-medium {
     border-radius: 3px 3px 3px 3px !important;
@@ -126,25 +128,21 @@
 }
 /*Date*/
 .showDate {
-  border-color: #CCCCCC;
-  border-radius: 3px 0 0 3px;
-  border-style: solid;
-  border-width: 1px 0 1px 1px;
-  display: inline-block;
-  float: left;
-  height: 18px;
-  line-height: 18px;
-  padding: 4px 10px;
-  text-align: center;
+	border-style: solid;
+	border-width: 1px 0 1px 1px;
+	border-color: #CCC;
+	display: inline-block;
+	float: left;
+	padding: 4px 10px;
+	height: 18px;
+	line-height: 18px;
+	-webkit-border-radius: 3px 0 0 3px;
+	-moz-border-radius: 3px 0 0 3px;
+	border-radius: 3px 0 0 3px;
+	text-align: center;
 }
 .calendarInput {
 	position: absolute;
 	visibility: hidden;
 	left: 11px;
-}
-.file-upload .input-medium {
-   border-radius: 3px 3px 3px 3px !important;
-   position: relative;
-   width: 267px;
-   z-index: 5;
 }