Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts

Wednesday, 1 August 2012

url to latest jquery version

Hi,

Here is the url for the latest jquery file that you required to include in html page for jquery library.

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Thank You,
Uma Mahesh.

diplay data in webpage on page load

Hi,

In the webworld, displaying webpage in less time plays an important role. So in many satuations you may required to load the page parts separately i.e through ajax call in the page load.

You can see in many webpage page will be loaded first and parts of the webpage is loaded after that.

This can be done using jquery ".load()" method.

This method will load data from server and place the returned html in the element.


  .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

  url =>  url of the request to be send.
  data => data that is sent to server.
  complete => its an call back that will inoke after the load was done.



 ex : $('#content').load('umamahesh/sample.html');


 here 'content' => div id
 url => umamahesh/sample.html


sample code:

<! DOCUMENT HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>Response block</h1>
<div id="success"> </div>
<b>Error block:</b>
<div id="error"></div>
<script>
$("#success").load("success.html", function(response, status, xhr) {

  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>
</body>
</html>


success.html

<! DOCUMENT HTML>
<html>
<head>
</head>
<body>
<div>
Hi my name is uma mahesh
</div>
</body>
</html>


You can load part of data from the url page as below

$('#content').load('umamahesh/sample.html #data');

When this method executes, it retrieves the content of umamahesh/sample.html, but then jQuery parses the returned document to find the element with an ID of data. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.


Thank You,
Uma Mahesh.

Tuesday, 12 June 2012

Text Editor for rails application with jquery

Hi,

Recently I came to see Jquery text editor markitup which is easy to use.

I have worked on many editors in ruby on rails application like TinyMCE, simple editor. They provide good features in rails application. But all these are rails application dependent.

So I suggest you to use Jquery markitup editor insode your rails application.

You can get complete information and demo of the editors at the URL: http://markitup.jaysalvat.com/

Thank You,
Uma Mahesh.
 

Wednesday, 6 June 2012

Jquery ajax call - jQuery.ajax()

Jquery ajax call - jQuery.ajax()

Here is the JQuery asynchronous HTTP (Ajax) request.

$(function () {
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType

});

});


url : A string containing the URL to which the request is sent.

date: Data to be sent to the server. It is converted to a query string.

success: success(data)
A function to be called if the request succeeds.

dataType: The type of data that you're expecting back from the server.



Here is the example code in mu view file. I am uisng HAML

  :javascript
    $(function () {

    $('#party-schedule').on('show', function () {

      $.ajax({
      url: "#{party_schedules_parties_path}",
      data:'section=party',
       success:function(data){
        $('#party-schedule').html(data);
       },
      dataType:'html'
      });

    })


---------------------------------

The above ajax call will send a request to server as below:

Started GET "/parties/party_schedules?section=party" for 127.0.0.1 at 2012-06-07 11:43:19 +0530
Processing by PartiesController#party_schedules as HTML
  Parameters: {"section"=>"event"}


------------------------------------

So you need to have party_schedules method inside the parties controler to respond for this request.
When request comes to controller, it responds to respective view file.

Note: You should use render :layout => false inside the method.


Thank You,
Uma Mahesh