Ajax implementation
public
group: Bangalore
visualblind - Wed, 2007-05-02 12:50
hi all,
is there anyone experienced enough unlike me.. guys i've just started with drupal n i want ti know how can we implement Ajax with drupal.
i wanna develop a module that will define a block and will display 10 records from my database. add more link at the bottom will show next 10 n so one but woth no page refresh.
is there anyone who would like to help me with this
Sharad
AHAH Forms
You might like to check out the AHAH forms framework module (http://drupal.org/project/ahah_forms)
JQuery
yes, u should be able to do this with JQuery!
jQuery
You should be able to do this with jQuery. Check out the Drupal Dojo 'jQuery Resurrected' video/screencast/lesson: http://drupaldojo.com/lesson/jquery-resurrected.
I've asked this 10000 times
I've asked this 10000 times in the forum, all I wish to do is AJAX a custom form that makes use of the image.module. Does anyone know how to do this? Here's my attempt, perhaps you guru's can help me out (you know I'll love you forever)
<script type="text/javascript">$(document).ready(formInit);
function formInit(){
//vars
$("#edit-submit").click(function(){
title = $("#edit-title").val();
bodeh = $("#edit-body").val();
file = $("#edit-image").val();
$.ajax({
type: "POST",
url: "node/add/image",
data: "title="+title+"&body="+bodeh+"&file[images]="+file+"",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});
}
</script>
Markup
<form action = "node/add/image" method="post" id = "imageAdd">
<div>
<div class="node-form">
<div class="standard">
<div class="form-item">
<label for="edit-title">Title: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="128" name="title" id="edit-title" size="60" value="" class="form-text required" />
</div>
<div class="form-item">
<label for="edit-image">Image: </label>
<input type="file" name="files[image]" class="form-file" id="edit-image" size="40" />
<div class="description">Click "Browse..." to select an image to upload.</div>
</div>
<input type="hidden" name="changed" id="edit-changed" value="" />
<input type="hidden" name="images[_original]" id="edit-images--original" value="" />
<input type="hidden" name="images[thumbnail]" id="edit-images-thumbnail" value="" />
<input type="hidden" name="images[preview]" id="edit-images-preview" value="" />
<div class="form-item">
<label for="edit-body">Body: </label>
<textarea cols="60" rows="5" name="body" id="edit-body" class="form-textarea"></textarea>
</div>
<input type="hidden" name="form_token" id="edit-image-node-form-form-token" />
<input type="hidden" name="form_id" id="edit-image-node-form" value="image_node_form" />
</div>
<input type="submit" name="op" id="edit-preview" value="Preview" class="form-submit" />
<input type="submit" name="op" id="edit-submit" value="Submit" class="form-submit" />
</div>
</div></form>