jQuery sortable from database

Показать описание

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss a real world example of where we would use jQuery sortable widget

1. The Question text, question options and answer options should be from the database

2. The user should be able to reorder the capital cities to match with the respective country

3. After the reordering is done, click "Check Answer" button. If the capital cities are ordered correctly the background color should change to green else red.

Рекомендации по теме

Комментарии

Venkat you are really insteresting. I like ur way to describe everything very deeply.You are really desire of Million of Likes. Now i am a .net developer because of u. I hope, i will find a good job very soon because i have watched ur all series of ur .net tutorials, not just one time but 4 times.

samerattariqadri

Sir, Awesome videos,
Could you please suggest some handbook for Jquery??

ashimbera

Venkat, hope you are well.
what is your next playlist ?

Cmobile

Thanks alot man i build this client site question answer based on your video soon i will make exam system if i have free time here is my code
for anyone just copy past and test

<html>
<head>
<title></title>
<script
<script
<link
<script>

$("#sortable1").sortable({
placeholder:'placeholder',
opacity:0.8,

});

})

function CheckAnswers()
{
$("#sortable1
$("#sortable1
//you chceck the order only make sure you check for every specific postion not just order it will cause erros
//if he asnwer all wrong will give him 1
answer=["2", "4", '5', '6', '1', "00", "77"]; //if question goes more than 100
correct=0;
wronglist=[];
//You can take the order of the answer as parmeter and put instead of 24561 but make sure you send string '2341' the order you wanted
var answers=$("#sortable1 li[data-Order]")
if(answers.length>0)
{
Result=""
alert("You Have Answered " + (answers.length-0) +" Questions");
answers.each(function(i, e){

$(this).addClass('correct');
correct+=1;
//you can even know excautlly what he answer right and wrong from here and high light those in red
}else{

}
})
//high light the wrong elements
console.log(wronglist);
var all =$("#sortable1 li[data-Order]")
all.each(function(i, e){

{
console.log(this)
$(this).addClass("wrong")
}
})
if(Result==="245610077"){
alert("Well Done YOu answer all correctly")
}else
alert("You didn't complete all answers "+correct +" Only was correct")
}else{
alert("Some of your answers are wrong "+correct +" Only was correct")
}
}else{
alert("You didn't answer anything")
}
$("#btnz").attr("disabled", "true")

}

</script>
<style>
.wrong{
background-color: red !important;

}
.correct{
background-color: green !important;
}
ul{
float: left;
}
li
{
border:2px solid gray;
padding:10px;
cursor: pointer;
margin:3px;
width:300px;
height:10px;
line-height: 10px;
color: black;
list-style-type: none;
overflow: hidden;
}
.placeholder
{
border:2px solid gray;
padding:10px;
margin:3px;
width:300px;
height:10px;
background-color: darkgray;

}
.ui-sortable-handle
{
background-color:gray;
color:white;

}
.content{
max-width: 900px;
margin: auto;

}
.Questions{
overflow: hidden;
}
</style>
</head>
<body>
<div class="content">

<div class="Questions">

<ul id="sortable1">
<li
<li data-value="weekday" data-Order="2">Sunday</li>
<li data-value="weekday" data-Order="4">Monday</li>
<li data-value="weekday" data-Order="5">tuseday</li>
<li data-value="weekday"
<li data-value="weekday"
<li data-value="weekday" data-Order="00">friday</li>
<li data-value="weekday"

</ul>
<ul id="sortable2">
<li data-value="weekend" >Questions</li>
<li
<li
<li
<li
<li
<li
<li

</ul>
</div>
<button onclick="CheckAnswers()" id="btnz" style="clear: both;" >Click Check</button>
</div>

</body>

</html>

donfeto

jQuery sortable from database

jQuery sortable from database

Jquery sortable menu saving to database

Sort element using jQuery sortable

jQuery sortable widget

jQuery UI Sortable Tutorial - Save Positions With Ajax & PHP & MySQL

Laravel: Reordering with Observers and jQuery UI Sortable

jQuery UI: Table with Sortable Rows using jQuery UI's sortable Interaction

Refactoring and Setting up jQuery Sortable Part 17

Create Drag and Droppable Datatables Using jQuery UI Sortable in Laravel(2021)

jQuery UI tutorial Lesson 2: Using sortable connectWith to connect multiple lists

jQuery : jQuery UI Sortable, then write order into a database

Ordenação com JQuery Sortable - Passo a Passo

Simple jQuery Sortable List Plugin - DEMO

Jquery Drag and Drop Table Rows and Save Position to Database Using PHP

Lecture 40 Tutorial JQuery Sortable Function

jquery sortable

jQuery UI sortable in 4 min

Searching , sorting , pagination add on Table - HTML,JQuery,DataTable

How to make jQuery sortable lists feel more natural

jQuery sortable table on rails

jQuery: Create a Table with Sortable Columns - Part 1

html list sorting drag drop jquery php mysql

How to sort Elements - Jquery UI

jquery sortable function (video-34)