I use this method for pagination:
https://gist.github.com/tobysteward/6163902
When I click on pagination page, my other scripts on page not working after ajax. I need reload page, then scripts working.
I use simple script:
$("#select").on("change", function() {
alert()
});
How I can fix this solution? I need load scripts ?
After you load your posts, you need to rebind any event. try something like:
function getPosts(page) {
$.ajax({
url : '?page=' + page,
dataType: 'json',
}).done(function (data) {
$('.posts').html(data);
//bind again
$("#select").on("change", function() {
alert();
});
location.hash = page;
}).fail(function () {
alert('Posts could not be loaded.');
});
}
Related
The button action does not work after searching in the index page. The action button does not work on the second page.
My Ajax Script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(responsiveness);
}
});
})
});
Using Ajax Pagination, you can create dynamic navigation links for pages and then load data without reloading the entire web page content. So, by using Ajax Pagination, we can add dynamic page content to the data list without having to refresh the web page content.
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();
I load a vieschs views_embed_vesch using Ajax.
This views included Ajax PAGER. It does not work.
Drupal.attachBehaviors does not work too.
I think in Drupal.settings need added data from views.
(function($){
Drupal.behaviors.ajax_views = {
attach: function (context, settings) {
//alert('dddd');
$('a.views-link').click(function(){
// alert('sfsdfsd')
var relArr = $(this).attr('rel').split(' ');
$.ajax({
type: "POST",
url: Drupal.settings.basePath + 'ajax-views/'+relArr[0]+'/'+relArr[1],
dataType: 'json',
success: function (datad){
alert(datad.seet.views);
// Drupal.settings.views = datad.seet.views ;
$('div#block-system-main > div.content').append(datad.view);
},
});
return false;
});
}
};
})(jQuery);
Try this module to load content via ajax. It will automatically attach behaviour with the ajax loaded content.
https://drupal.org/project/ajax_links_api
I'm using Symfony2.1 with Doctrine2.1
I'd like to use AJAX for many features on my site , editing a title , rate an article , create an entity on the fly , etc.
My question is simple :
Do I need to create a JQuery function for each functionnality , like this :
$('#specific-functionality').bind('click', function(e){
var element = $(this);
e.preventDefault();
// the call
$.ajax({
url: element.attr('href'),
cache: false,
dataType: 'json',
success: function(data){
// some custom stuff : remove a loader , show some value, change some css
}
});
});
It sounds very heavy to me, so I was wondering if there's any framework on JS side, or a specific method I can use to avoid this. I was thinking about regrouping items by type of response (html_content , boolean, integer) but maybe something already exists to handle it nicely !
From what I understand, you are asking for lighter version of JQuery ajax method. There are direct get/post methods instead of using ajax.
$.get(element.attr('href'), {'id': '123'},
function(data) {
alert(data);
}
);
To configure error function
$.get(element.attr('href'), {'id': '123'}, function(data) {alert(data);})
.error(function (XMLHttpRequest, textStatus, errorThrown) {
var msg = jQuery.parseJSON(XMLHttpRequest.responseText);
alert(msg.Message);
});
Also, you can pass callback function to do any synchronous operations like
function LoadData(cb)
{
$.get(element.attr('href'), { 'test': test }, cb);
}
And call
LoadData(function(data) {
alert(data);
otherstatements;
});
For progress bar, you use JQuery ajaxStart and ajaxStop functions instead of manually hiding and showing it. Note, it gets fired for every JQuery AJAX operation on the page.
$('#progress')
.ajaxStart(function () {
//disable the submit button
$(this).show();
})
.ajaxStop(function () {
//enable the button
$(this).hide();
});
Instead of $('#specific-functionality').bind('click', function(e){, try this:
$(".ajax").click(function(){
var url = $(this).attr("href") ;
var target = $(this).attr("data-target") ;
if (target=="undefined"){
alert("You forgot the target");
return false ;
}
$.ajax(....
And in html
<a class="ajax" href="..." data-target="#some_id">click here </a>
I think it is the simplest solution. If you want some link to work via ajax, just give it class "ajax" and put data-target to where it should output results. All custom stuff could be placed in these data-something properties.
Was hoping to use the popup and I am pretty sure I am trying to use it incorrectly. Any ideas on how this should work? Can you use the popup in this manner?
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
data = $.trim(data);
//$("#notification").text(data);
$("#notification").popup(data); }
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "sendmsg.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
I'm assuming you are trying to use the JQM popup widget, first your missing the closing } from your onError function. Second to use the popup widget you can first set the data
$("#myPopupContent").text(data)
Then to display you use the open method
$("#myPopup").popup("open")
I am using a cakephp form. I have a dropdown select box. If dropdown value changes then the form should submit.Is there any method similar to form submission like this.form.submit for ajax forms. Any help?
If jquery is okay for you you can do
$('#myDropdown').change(function() {
$(this).closest('form').submit();
});
if you want ajax replace line 2 as follows
var myForm = $(this).closest('form');
$.post(myForm.attr('action'), myForm.serialize(), function(data)
{
/*do something on success*/
}
If you use jQuery you could use the .serialize() method and AJAXify a form like this:
$(function() {
$('#myform').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function(result) {
// TODO: process the results
}
});
return false;
});
});
Another possibility is to use the excellent jQuery form plugin.
You can use dropdown elemnts onChange event
Example
$('.target').change(function() {
alert('Handler for .change() called.');
});