Vintez Blog

Hi Frnds,
I get come across a nice way to load Ajax response with Jquery

function sync_image(arg1,arg2,..)
{
if(confirm(“alert msg”))
{
$(“#ids_to_hide”).hide();
$(“#ids_to_show”).show();
var url = “file.php”; //file url to call
$.ajax({
type: “GET”,
url: url,
success: function(msg){
$(“#id_to_hide”).hide();
$(“#id_to_show”).show();

}
});
}
}

Hi here we simply explain how to use multiple input check-box as array to get value in java-script

put this in a loop

on the submit button :

now in the Javascript tags
function addfunc(arg1)
{
var field_name = $(“input:[name='field_name[]‘]”).serialize().replace(/%5B/g, ‘[').replace(/%5D/g, ']‘);
alert(field_name); //you get all values of selected checkbox as a string then you may use it in ur way
}

Hope this helpful for developers…

Tutorial for Jquery nested drag and drop widget

Step 1. Include the following js files in your head section

<script src=”./jquery-1.4.4.js”></script>
<script src=”./jquery.ui.core.js”></script>
<script src=”./jquery.ui.widget.js”></script>
<script src=”./jquery.ui.mouse.js”></script>
<script src=”./jquery.ui.sortable.js”></script>
<script src=”./jquery.ui.draggable.js”></script>

Step 2. Put the below css in you css file of style tag

<style type=”text/css”>
h1
{
color:red;
background: gray;
}
dl dl{
margin:20px;
}
dl,ul,li,dt
{
border-width: 2px;
border-style: dashed;
border-color: #D3D3D3;
display:block;
padding:20px;
margin-top:10px;
}
.ui-state-disabled
{
padding : 0px !important;
background: gray;
}
dl#thirdlidivul1  dt
{
width:100px;
}
dl#thirdlidivul2  dt
{
width:100px;
}
#thirdlidiv  dl
{

width:150px;
margin:10px;
}
#thirdlidiv
{
border-width: 2px;
border-style: dashed;
border-color: #D3D3D3;
}
#maindiv
{
border-width: 2px;
border-style: dashed;
border-color: #D3D3D3;
width: 650px;
padding:20px;
float:left;
}
.sidebar{ width:288px; float:left; margin:0px 0px 0px 10px}
.sidebar ul{ margin-top:0px; }
.ui-state-highlight { height: 10em; line-height: 1.2em; background-color:yellow;}
.ui-state-highlight1 { height: 1em; line-height: 1.2em; background-color:yellow;}
.ui-state-highlight2 { height: 2em; line-height: 1.2em; background-color:yellow;}
.clear
{
clear:both;
line-height:0px;
height:0px;
}
</style>

3. Put the below html in you body section

<h1>Main Div</h1>
<div id=”maindiv”>
<h1>Mail UL</h1>
<ul id=”mainul”>
<li><h1>Un movable (&lt;li&gt;)</h1></li>
<li>
<h1>First LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
</li>
<li>
<h1>Second LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
</li>
<li>
<h1>Third LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
<div id=”thirdlidiv” style=”padding:20px; margin:0px auto; width:480px”>
<dl id=”thirdlidivul1″ style=”float: left;”>
<dt>Li 1</dt>
<dt>Li 2</dt>
<dt>Li 3</dt>
<dt>Li 4</dt>
</dl>

<dl id=”thirdlidivul2″ style=”float: left;”>
<dt>Li 1</dt>
<dt>Li 2</dt>
<dt>Li 3</dt>
<dt>Li 4</dt>
</dl>
<div></div>
</div>
<div></div>
</li>
<li>
<h1>Fourth LI</h1><p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument ‘ui’):</p>
<div id=”forthlidiv”>
<dl id=”forthlidivul”>
<dt>Li 1</dt>
<dt>Li 2</dt>
<dt>Li 3</dt>
<dt>Li 4</dt>
</dl>
</div>
</li>
</ul>
</div>
<div>
<ul id=”sidebarul”>
<li>Li 1</li>
<li>Li 2</li>
<li>Li 3</li>
</ul>
</div>

Last Step . put the below js code in your html file just before the body tag end.

<script type=”text/javascript”>
$(document).ready(function()    {
$(‘ul#mainul’).sortable({
connectWith: “div > ul li.drli”,
placeholder: “ui-state-highlight”,
items: “li:not(.ui-state-disabled)”,
containment:’parent’,
handle : “h1″
});

$(‘dl#forthlidivul’).sortable({
connectWith: “dt”,
placeholder: “ui-state-highlight1″,
containment:’parent’,
});

$(‘dl#thirdlidivul1, dl#thirdlidivul2′).sortable({
connectWith: “div#thirdlidiv  dl”,
placeholder: “ui-state-highlight1″,
containment:’div#thirdlidiv’,
});

$(‘ul#sidebarul’).sortable({
connectWith: “div#sidebar > ul”,
placeholder: “ui-state-highlight2″,
containment:’parent’,
});
});

</script>

You can also check our online demo

To download please click here