7/06/2012

Jquery fundas

This week was all about Jquery...!

Though I've been using it in bits and pieces, did not get a chance to do something so exhaustive in jquery till now. 

So here are few things, which I learned this week..I'll keep updating this post every now and then..
To add a new element into an existing DIV, use append/ prepend:
$('#someDiv').append(something);

To Make AJAX calls :
$.ajax({
    type : "POST",
    url : '/sticky',
    dataType : "html", //Can be txt/json
    data: {contentToSave: event.currentTarget.innerHTML,contentToSaveId: event.currentTarget.id},
    success: function(data) {
        //Do Something
        },
    error : function() {
            alert("Oops, No donuts!");
        }
    });

To make an editable DIV using HTML5:
 $('#someDIV').attr('contentEditable',true);   


To make all DIVs editable that start with a pattern using regex:
 $('div[id^="note_"]').attr('contentEditable',true);
Note: In this case, all DIVs that starts with id "note_" will be made editable

To add a DIV dynamically into another DIV:
$("
", {"class": "someClassName",
          id:"someId",
           text: "someText",
         }).appendTo("#someDiv"); 

To make a DIV draggable/Droppable:
 $("#someDIV").draggable({ cursor: "move"});   

 $( "#droppable").droppable({
    drop: function( event, ui ) {               
        //Some operation when dropping the DIV
        }
     });   

To get the object content on mouseleave/ mouse out event:
$("."+className).mouseleave(function(event) {       
    event.currentTarget.innerHTML // Gives the innerHTML of the DIV, in this case
    event.currentTarget.id //Gives the Id of the element
     });

To add a CSS dynamically:
$("#someObject").css( {
    position: 'absolute',
    zIndex: 5000,
    left: topVal,
    top: leftVal
    });

No comments:

Tired of seeing that 500 Bad gateway error while deploying a Springboot application in AWS...?

By default, Spring Boot applications will listen on port 8080. Elastic Beanstalk assumes that the application will listen on port 5000. Th...