I have a website which uses pagination, and some filtering with jQuery and AJAX. All works well up until the point I changed my links to Javascript links.
Being on the homepage and not having used any filtering or pagination all works as expected. After I have used pagination or a filtering (effectively using an AJAX call for both) my JavaScript links do not work anymore.
The JavaScript for the link is:
$(function(){
$( ".artikel_box_lk .button" ).click(function( e ) {
window.open( "/lk/" + $( this ).attr("rel"), "_blank");
});
});
And the code for the pagination:
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "php/load_data.php",
data: dataToSend,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
My guess is that the javascript does not get reloaded on the AJAX call as only part of the page is reloaded, but I am unsure if this is the case and on how to fix this.
Seems your javascript is not loaded after postback. Try adding your function inside pageLoad on Webpage like :
function pageLoad()
{
$( ".artikel_box_lk .button" ).click(function( e ) {
window.open( "/lk/" + $( this ).attr("rel"), "_blank");
});
}
Do event delegation
$( "#container" ).on ("click",".artikel_box_lk .button" ,function( e ) {
window.open( "/lk/" + $( this ).attr("rel"), "_blank");
});
Related
When the page is load first time the slider is working fine but when I change the value in the slider, on change event of slider there is an AJAX call and on success result I have replace some div content with result.
But that slider is not displaying after success result on that AJAX call.
I have put an alert in that slider function, same thing happens, on page load all alert are working fine but after ajax call they also not work.
See code below:
$( "#slider-range" ).slider(
{
range: true,
min:min,
max:max,
values: [ selectedMinValue,selectedMaxValue ],
slide: function( event, ui )
{
//Note: Currency Custom formatting is not supported.
$( ".currentMinPrice" ).html( '#(Model.Context.CurrencySymbol) ' + ui.values[ 0 ]);
$( ".currentMaxPrice" ).html( '#(Model.Context.CurrencySymbol) ' + ui.values[ 1 ]);
},
change:function(event,ui)
{
alert("hello2");
var url=removeParameter('#(currentURL)',"price");
var newUrl=url.replace(/&/g,'');
if(isAjaxRequest)
{
callAjax(UpdateQueryString("price", ui.values[0] + "-" + ui.values[1],newUrl));
}
}
});
AJAX function:
$.ajax(
{
url: url,
type: 'POST',
success: function (result)
{
// Result is in html
$('#div').replaceWith(result);
$('#ajax-loading').hide();
DisplayFilter();
//Lazy Loading
$("img.lazy").show().lazyload(
{
effect: "fadeIn"
});
$(window).trigger("scroll");
}
});
I use a jQuery 1.10.2, this code is already working in jQuery 1.7.2 version.
Why it's not working in 1.10.2 version of jQuery?
Please give suggestion
Thank you all
regards,
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
}
});
});
I have code do ajax method for loading new content
But I have problem with the new content, the links not applying the action i did like
preventDefault and the ajax method, just after loading the new content
clicking on links make the page reload like there was no ajax code at all
In JQ 1.8 working grate with live() method, but after updating jQuery, not working as it should with on() method
The old code working right and have no problem with it
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
function loadContent(url){
$.ajax({
url: url,
dataType: 'html',
cache: false
}).done(function(html){
var $html = $(html);
$('title').html($html.filter('title').text());
$('#main').replaceWith($html.find('#main'));
$('.nav-menu').replaceWith($html.find('.nav-menu'));
$('.nav-below').replaceWith($html.find('.nav-below'));
});
}
$(function(){
// Get The Content Action
$('.nav-menu li a,#nav-below a,#main a').live('click',function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
// go top after showing the content
$('html, body').animate({scrollTop:0}, 'slow');
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event){
loadContent(location.pathname);
$('html, body').animate({scrollTop:0}, 'slow');
};
});
</script>
The new updated code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function loadContent(url){
$.ajax({
url: url,
dataType: 'html',
cache: false
}).done(function(html){
var $html = $(html);
$('title').html($html.filter('title').text());
$('#main').replaceWith($html.find('#main'));
$('.nav-menu').replaceWith($html.find('.nav-menu'));
$('.nav-below').replaceWith($html.find('.nav-below'));
});
}
$(function(){
// Get The Content Action, ‡‡=‡=‡=‡=L0000K HERE=‡=‡=‡=‡‡ Not workin JQ 1.9
$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
// go top after showing the content
$('html, body').animate({scrollTop:0}, 'slow');
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event){
loadContent(location.pathname);
$('html, body').animate({scrollTop:0}, 'slow');
};
});
</script>
The problem right here
$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
Thank you :)
You don't simply s/live/on, you need to read the documentation of on() to see the changes required to update your code (on is similar to the old delegate()).
If you want to make it work exactly like live(), try...
$(document).on('click', '.nav-menu li a,#nav-below a,#main a', function(e) { });
However, if you can, you're better off choosing the most common persistent ancestor. This means that the events won't have to go all the way up to document to be handled. For example, body probably covers 99.9% of situations. However, it's probably more like #some-container.
for easy usage you can use something like this:
$.fn.follow = function (event, callback) {
$(document).on(event, $(this).selector, callback);
}
and you can use it like:
$("#myselector").follow("click",function(){
/*some callback code*/
});
you can still use event data in your plugin
$("#expform").follow("submit",function(e){
e.preventDefault();
});
I'm using this code:
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
/* Content is now loaded */
ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
});
});
});
along with this:
<li>HELP</li>
To load pages when the link is clicked.
I would like to know how do I add to the current script so that I can load a page the minute the page loads up, while keeping it working the way it already is? I'd like to load a page named "Homepage.html"
This should do it:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html');
});
</script>
Or if you still need that callback:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html', function() {
ThumbnailScroller('tsv_container','vertical',10,800,'easeOutCirc',0.4,500);
});
});
</script>
I would like to load some content using AJAX and Shadowbox
Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-
1) Cancel the click event i.e the User must not go to a different page.
2) Load content using ajax function in jQuery
3) Show the content inside a shadow box
My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "/ajax-post.php?p="+id,
success: function(data){
Shadowbox.open({
content: data,
player: "html",
height: 350,
width: 350
});
}
});
return false;
});
UPDATE 1
tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.
Shadowbox.init({
skipSetup: true,
players: ["html"]
});
// LOAD
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('.post h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id,
success: function(data){
show_box(data);
}
});
return false;
});
});
//shadowbox
function show_box(html) {
Shadowbox.open({
content: html,
player: "html",
height: 350,
width: 350
});
}
UPDATE 2
Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.
Why is this happening ? Any ideas ?
Since you're not getting any JavaScript errors try debugging by breaking it down:
Ensure that the binding to and overriding of the click event is functioning properly:
$('h2 a').bind('click', function() {
alert('click even fired');
return false;
});
If that works, check the data that your ajax request is returning:
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "ajax-post.php?p="+id,
success: function(data){
alert(data);
}
});
return false;
});
The code looks like it should work, so I'm guessing there's either something wrong elsewhere (in which case the first test will likely fail) or you're getting some really odd data returned.
Need to run
Shadowbox.setup('h2 a');
This will reinitialise and bind it to any ajax loaded content