We Keep Coding

Laravel Bootstrap Tabs Pagination using AJAX

I am new to laravel, I have got a task of inserting pagination in bootstrap tabs. There are 2 tabs both tabs contain data which are different from each other. There may be 100 records in 1 tab and 10 in other, so it does not match.
I have been searching on the net to find an example which helps to crack this issue of paging. I inserted pagination but when I click on paging link other tab also gets affected and also it reloads the main page rather than the particular tab.
Please help me in solving this issue. Thanks in advance.
HomeController Code
View Code
Ajax code for pagination is below
$(window).on('hashchange', function() {
if (window.location.hash) {
var page = window.location.hash.replace('#', '');
if (page == Number.NaN || page <= 0) {
return false;
}else{
getData(page);
}
}
});
$(document).ready(function()
{
$(document).on('click', '.pagination a',function(event)
{
$('li').removeClass('active');
$(this).parent('li').addClass('active');
event.preventDefault();
var myurl = $(this).attr('href');
var page=$(this).attr('href').split('page=')[1];
getData(page);
});
});
function getData(page){
$.ajax(
{
url: '?page1=' + page1,
type: "get",
datatype: "html",
})
$.ajax(
{
url: 'dashboard',
type: "get",
datatype: "html",
data:{name:'newLeads'},
})
.done(function(data)
{
$("#item-lists").empty().html(data);
location.hash = page;
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
}
enter code here

Cannot change CSS from within ajax .done or .fail

I want to use a jQuery ajax call and change some CSS properties of an element if the ajax call succeeds or fails. My broswer is Chrome (latest version) on Windows 7 professional.
$.ajax({
url: "mytesturl",
dataType: 'json',
timeout: 3000 // 3 second timeout
}).done(
function(json) {
var el = $('#myDiv');
el.css('color', '#00FF00'); // green
}).fail(
function(jqXHR, textStatus){
var el = $('#myDiv');
el.css('color', '#FF0000'); // red
});
If I try this and start / stop the webserver to simulate a success and fail the color does not change at all. :-(.
If I debug I see that the code inside .done and .fail is executed, but the color does not change. The debugger is executing the line el.css('color', '#FF0000');. But the browser does not change the color!?!
I checked 'el' returns a valid element but for some reason the browser does not change the color. Also other changes like el.html('test'); do not work.
If I change the color using a button then the color is changed.
It seems that out of the functions .done / .fail it is not working.
Is there any issue with the scope?
What can it be?

try this:
$.ajax({
url: "mytesturl",
dataType: 'json',
timeout: 3000, // 3 second timeout
success: function(json) {
var el = $('#myDiv');
el.css('color', '#00FF00'); // green
},
error: function(jqXHR, textStatus){
var el = $('#myDiv');
el.css('color', '#FF0000'); // red
}
});
ALSO: if you are trying to set the color for a div, color isn't the right option to set, you should set the background like this:
$.ajax({
url: "mytesturl",
dataType: 'json',
timeout: 3000, // 3 second timeout
success: function(json) {
var el = $('#myDiv');
el.css('background', '#00FF00'); // green
},
error: function(jqXHR, textStatus){
var el = $('#myDiv');
el.css('background', '#FF0000'); // red
}
});

jQuery.ajax({
type:"post",
timeout: 3000,
dataType:"json",
url: "mytesturl",
success: function(json) {
var el = $('#myDiv');
el.css('color', '#FF0000');
},
error: function(data) {
var el = $('#myDiv');
el.css('color', '#000000');
},
});

After Image drag and drop make AJAX save to save image and its class

I have a page where i am dragging image from one div and dropping it into another div. After drop event user has to click the save button for saving the data in database by making a get request .But after the button is clicked page is refreshed and that image is again in the previous div.
so what i can do to make a AJAX call so that image and its class is saved after drop event ?
javascript
$(function() {
adFitsApp.set_app_cookie("{{ adftoken }}", "{{ adfdy }}");
$('#sortable1 img').css("cursor", "pointer");
$( "#sortable1 div" ).sortable({
connectWith: "div",
stop: function( event, ui ) {
if($('#sortable2').find('img').length==6) {
$('#btn-start').html("<a id='btn-start' href='/dashboard/redeem/{{ pk }}' >Redeem Coupon</a>");
}
}
});
$( "#sortable2" ).sortable({
connectWith: "div",
change: function( event, ui ) {
var theID = ui.item.attr('id');
ui.item.addClass(theID + '-style');
}
});
$('#sortable2').find('img').length
});

Ajax
Sorry but I have no knowledge of ajax can you please give a demo how I
can do that
Ajax is basically just a way to send requests in JS (JQuery)
Using it is really simple:
$("element").on("event", function() {
$.ajax({
url: "your_url",
data: {your: "data"},
success: function(data) {
//success
},
error: function(data) {
//error
}
});
});
Code
For you, I'd try this:
<div class="control-group">
<a id="btn-start" href="/dashboard/save" data-pk="{{ pk }}" class="btn btn-primary btn-embossed">Save</a>
</div>
$("#btn-start").on("click", function() {
$.ajax({
url: $(this).attr("href"),
data: {pk: $(this).data("pk")},
success: function(data) {
//success here
},
error: function(data) {
//error here
}
});
});

When this ajax jquery trigger I want a image that loads for 1 second

I have this code
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
Every time someone click on this button I want a image to load for like 1 sec
so the user knows that something happened..
any kind of help is appreciated

Something like:
var $loader = $('<img src="loader.gif">').appendTo(document.body);
And then
success: function (data) {
setTimeout(function() {
$loader.remove();
data = eval(data);
$this.addClass('productSelected');
},1000);
}
It will show the image for 1sec + the ajax loading time. Although, as a visitor of your site I would probably prefer to skip the 1sec delay...

Add before send like this :
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
SetTimeout(1000, function(){
$("#one_sec_img").hide();
})
}
But, I think your requirement is something normal :
Here, bcoz of the before send, as soon as you click button that triggers ajax, the image will be loaded, and on success, the image can be hidden . This is the usual process, in this case,setTimeout is not needed . But, if your requirement is something like, the image should appear only one sec, you can use set timeout. Otherwise, below code is enough.
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
},
success: function(res){
$("#one_sec_img").hide();
}

<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var html=$(this).html();
$(this).html('loading');//<img src="" />
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
$(".a").html(html);
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
try this.

Use jQuery BlockUI Plugin to show the image, may be it solve your problem.

Try:
$(".a").click( function( ) {
$("#idOfImage").show().delay( 1000 ).hide();
// ajax call
});
else if you only want the image to disappear only after the ajax call
$(".a").click( function( ) {
$("#idOfImage").show();
$.ajax({
// parameters
}).done( function( ) {
$("#idOfImage").hide( );
});
});

Apply animate to new elements that have been added dynamically

The code i current have is this.
function update (){
latest_id = $('#image:first').data('position'); /* == 12 */
$.ajax({
type: "POST",
url: "../web/update/" + latest_id + "",
success: function(data) {
$('#my_like').after(data);
$('.newly-added').animate({"margin-left": "+=66px"}, "fast");
},
error: function(response) {
alert("failed");
},
});
}
setInterval(function() {
update();
}, 4000);
But because the element has been newly added it doesn't receive the new animate part. I done some research and found .live but that needs something to start it, e.g a click.

Fixed, there was a issue with jquery I was including.