I would like to make an AJAX pagination withot php and mysql, so when I click a link than I would like to get the next page DOM without reloading page and than in that DOM find the elements I need to append to the current page.
I now that jQuery IAS does this but I have a three col design and I need only one next button which onclick appends the data into the aproppriate col based on its parent class and IAS can't handle tree col layout.
So basicly something like this:
$('a.button').click(function(){
var url = $('a.next').attr('href');
$.ajax({
type: 'GET', //or POST i don't know which one
data: url, //or should this be the url: ?
success: function(data){
//data should be the DOM of the second page
$html = $(data);
$html.find('.col1 .child').appendTo('.col1');
$html.find('.col2 .child').appendTo('.col3');
$html.find('.col3 .child').appendTo('.col3');
}
});
return false;
});
Obviously this doesn't work I just put it here to make my question undersandable.
How can I do this?
yes it would be variable url such as
$('a.button').onclick(function(){
var url = $('a.next').attr('href');
$.ajax({
type: 'GET', //or POST i don't know which one
url: url, //or should this be the url: ?
success: function(data){
//data should be the DOM of the second page
$html = $(data);
$html.find('.col1 .child').appendTo('.col1');
$html.find('.col2 .child').appendTo('.col3');
$html.find('.col3 .child').appendTo('.col3');
}
});
return false;
});
you use data parameter to pass an object of key value pairs to the receiving end.
data: {key1: value1 , key2: value2}
Related
In PHP I can do things like this:
echo "<div>".$myvariable."</div>";
Which will print out my variable with div's in HTML for its tags. However recently, I needed to do a ajax call using jquery. I'm somewhat familiar with ajax but I don't use it much. Anyways, I run the ajax code, it prints the data into my HMTL element box like I wanted, however, the div tags are printed and displayed along with the content itself!
The entire return data is pretty much 1 long string, rather than the PHP parsing my data like I want it to. Where did I go wrong? Why is it only returning 1 long string?
PHP CODE:
<?php
require 'database.php';
$meal = $_POST['meals'];
$meal_q = "SELECT item
FROM meal_ingredients
WHERE meal_name='$meal'
ORDER BY item";
$meal_c = $conn->query($meal_q);
while ($row = $meal_c->fetch_assoc()){
$view_ingredient = $row['item'];
echo "<div>".$view_ingredient."</div>";
};
?>
JQUERY CODE:
if($('body').hasClass('CreateMealPage')){
$('tr').on('click', function(e){
$('#sidebar').animate({right: '-200px'}, 500);
var meals = $(this).find('.meals').text();
$.ajax({
method: "POST",
url: 'meal_list.php',
data: {meals: meals},
success: function(data) {
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = "";
sidebar.append(data);
}
});
});
};
WHAT IS RENDERED ON SCREEN:
<div>ingredientname</div>
<div>ingredientname</div>
<div>ingredientname</div>
RATHER THAN:
ingredientname
ingredientname
ingredientname
just replace
sidebar.innerHTML = "";
sidebar.append(data);
with
sidebar.innerHTML = data;
To answer your comment you can use append with following in jquery
$(sidebar).append($(data))
so jquery's append needs to be used, instead of append, from dom api, which takes a node element only in arguments. If you still need to use append of dom api, use something like:
sidebar.append(document.createRange().createContextualFragme‌​nt(data))
Add dataType: "html" to the properties in your $.ajax() call, like this:
$.ajax({
method: "POST",
url: 'meal_list.php',
dataType: "html",
data: {meals: meals},
success: function(data) {
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = "";
sidebar.append(data);
}
});
This will inform the call to expect HTML data to be returned in the response body.
$(".content-short").click(function() {
$(".content-full").empty();
var contentid=$(this).parent().find(".content-full").attr('data-id');
var content=$(this).parent().find(".content-full");
alert(contentid);
var collegename = $(this).attr('data-id');
$.ajax({
type: "post",
url: "contenthome.php",
data: 'collegename=' + collegename,
dataType: "text",
success: function(response) {
$content.html(response);
}
});
});
here the alert displays the specific data-id but
content=$(this).parent().find(".content-full");
this didn't displays data in content-full div with that specific data-id
anything wrong in the code or something else?
the query displays data if i use(."content-full"); instead of
$(this).parent().find(".content-full");
Inside the ajax callback you are using $content, but you declare your variable as content. May that be the problem?
Your question is not clear. What are you trying to achieve?
I am processing my html form with jquery / ajax request. It's calling by jquery 'change()'. So when request is success it's showing me success result which is
Successfully Updated
Well, but if it again request it's showing
Successfully UpdatedSuccessfully Updated
It's just added last success result text to new one. I want to show only onnce. Can you tell me why it's happening ?
my code:
$("#corp_www_eng, #domestic_www_japaness").change(function(){
var cid = $("#cid").val();
var corp_www_eng = $("#corp_www_eng").val();
var domestic_www_japaness = $("#domestic_www_japaness").val();
$.ajax({
url: 'edit_companyinfo.php',
type: 'POST',
dataType: 'html',
data: {
"cid" : cid,
"corp_www_eng" : corp_www_eng,
"domestic_www_japaness" : domestic_www_japaness,
},
}).done(function ( data ) {
$('#result').append(data);
$('#result').show();
$('#result').delay(3000).fadeOut('slow');
});
});
Try substituting .html() for .append()
$("#result").html(data);
I believe it is because your are appending the data to the #result div. You could try adding
document.getElementById('result').innerHTML = '';
This would clear that div of any content before appending the new content.
I am struggling trying to get the corresponding result for each item after successful AJAX callback. I am able to get the results, but not individually in each div from the item when there is more than one, each item displayed is getting all the results in the div and not just the corresponding one.
var xhr = $.ajax({
type: "HEAD",
url: image,
success: function(){
$(".block .image-sze").append(xhr.getResponseHeader('Content-Length'));
}
});
Can someone help me to fix the above so it can show individual result for each item?
The selector $(".block .image-sze") is only selecting the first class with block, use $("*.block *.image-sze") instead!
The "*" selects all tag that has the same class!
Hope this help?
maybe you're looking for something like this?
var xhr = $.ajax({
type: 'POST',
dataType: 'json'
url: url,
success: function(json){
$('#image1').html(json['image1']);
$('#image2').html(json['image2']);
}
});
And you're calling from url with something like this
public function somefunction() {
$json = array();
$json['image1'] = 'image1';
$json['image2'] = 'image2';
echo json_encode($json);
}
I am pretty sure this is not so complicated but I have been for hours trying to figure out how to catch the id of this dynamically generated anchor tags.
What I do in my code is that everytime a text input changes, theres an ajax request that goes to a php file and returns me a json array with the prices then I render this results of search in buttons that will be clickable to do other types of request but so far here's where I'm stuck.
heres's the code that loops through the array and renders this buttons (NOTE:The Id of the buttons are variables rendered by the function too.
$.ajax({
type: "POST",
url: "php/get_products.php",
data: {query:prod_qry},
success: function(data){
$('#loader_s').hide();
var jsarray = JSON.parse(data);
var length = jsarray.length;
for(i=0;i<jsarray.length;i++){
var index1 = i;
var index2 = Number(i++) + 1;
var index3 = Number(i++) + 2;
$('#modal-bod').append('<a onclick="renderProds();" class="btn btn-default-item prod_sel" style="margin-top:10px;" id="'+index3+'" data-dismiss="modal">'+jsarray[index1]+' <span class="pull-right" st>lps. '+jsarray[index2]+'</span></a>');
}
}
Then here's the function renderProds()
function renderProds(){
var id = $(this).attr('id');
alert(id);
}
the alert is just to try and catch the values for testing purposes, but what really goes there is another Ajax request.
The only thing I get here is that the var Id is undefined...
You can pass object like
function renderProds(obj) {
var id = obj.id;
alert(id);
}
Pass invoker object like
onclick="renderProds(this);"
I would do :
onclick="renderProds(this);"
function renderProds(that){
var id = that.id;
alert(id);
}
You use jQuery.. so USE jQuery !
Ajax can do the JSON.parse for you with just dataType: "json".
The inline onclick is bad practice.
Move the success function to make your code more readable.
$.ajax({
type: "POST",
url: "php/get_products.php",
data: {query:prod_qry},
dataType : 'json',
success: productsUpdate
});
function renderProds(event){
var id = $(event.target).attr("id");
alert("Id is:"+id);
}
function productUpdate(data){
$('#loader_s').hide();
for(i=0;i<data.length;i++){
var link = $('<a>....</a>');
link.click(renderProds);
$('#modal-bod').append(link);
}
}
Now, this is readable.
Complete the link creation with your code, without the onclick, remove the inline css and use a real css selector and finally, check this ugly Number(i++)+ .... it looks so bad.