Develop Reference

div does not react under circumstances

i'm doing a website for a friend of mine and I have some really wierd behaviur here, which I totally cannot understand.
main navigation
about
pictures
videos
files
contanct
in pictures and in videos, there are categorys, when you switch between the categorys, the title of the current catgeory is loaded in a DIV with the id contentRowTitle
$("#contentContainer").delegate(".catBit", "click", function() {
var catID = $(this).attr('data-id');
var pwd = $(this).attr('data-pwd');
var catType = $(this).attr('data-type');
$('#contentRowTitle').slideUp(function() {
$('.thumbContainer').fadeOut(function() {
if(pwd != "") {
$('#loginRow').show();
$('#contentRowTitle').load('./'+catType+'/contentImagesHeader?id='+catID, function() {
$('#contentRowTitle').slideDown();
});
} else {
$('#contentRowTitle').slideUp('slow', function() {
$('#contentRowTitle').load('./'+catType+'/contentHeader?id='+catID, function(responseText) { alert(responseText);
$('#contentRowTitle').slideDown();
});
});
}
$('.thumbContainer').load('./'+catType+'/contentImages?id='+catID, function() {
$('.thumbContainer').fadeIn();
//$('#thumbContainer').slideDown();
});
});
});
});
now everyhting seems to work fine.. BUT if you go to pictrures, and click on some thumbnails
(this is the function that is beeingexecuted when you click on some thumbs in a category)
$(".contentBox").delegate(".imgPreview", "click", function() {
var id = $(this).attr('data-id');
$('#wrap').fadeOut(function() {
$('#showDetailLoader').fadeIn(function() {
$('.galMainImg').attr('data-id', id);
$('#showDetail').load('./gal/show?id='+id, function() {
$('#showDetailLoader').fadeOut(function() {
$('#showDetail').fadeIn();
$('.galTitle').textillate({ in: { effect: 'flipInY' } });
$.getJSON('./gal/statsAdd?id='+id, function( data ) {
});
});
});
});
});
});
.. and now you go to videos and switch between the categorys... the DIV contentRowTitle does not react to anything.. I have put an alert inside the load() callback and it shows up.. but why does the output of the load-URL not show up in the DIV ???

Running a form handled by ajax in a loaded ajax page?

Using tutorials found i'm currently loading new pages with this:
$("a.nav-link").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#userright');
$wrap
// removing old data
.html('')
// slide it up
.hide()
// load the remote page
.load(href + ' #userright', function () {
// now slide it down
$wrap.fadeIn();
});
});
This loads the selected pages perfectly, however the pages have forms that themselves use ajax to send the following:
var frm = $('#profileform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data)
}
});
However this is not sending the form as it did before the page itself was called to the parent page via ajax. Am I missing something? Can you not use an ajax call in a page already called by ajax?
I also have other issues, for example I disable the submit button unless there are any changes to the form, using:
var button = $('#profile-submit');
var orig = [];
$.fn.getType = function () {
return this[0].tagName == "INPUT" ? $(this[0]).attr("type").toLowerCase() : this[0].tagName.toLowerCase();
}
$("#profileform :input").each(function () {
var type = $(this).getType();
var tmp = {
'type': type,
'value': $(this).val()
};
if (type == 'radio') {
tmp.checked = $(this).is(':checked');
}
orig[$(this).attr('id')] = tmp;
});
$('#profileform').bind('change keyup', function () {
var disable = true;
$("#profileform :input").each(function () {
var type = $(this).getType();
var id = $(this).attr('id');
if (type == 'text' || type == 'select') {
disable = (orig[id].value == $(this).val());
} else if (type == 'radio') {
disable = (orig[id].checked == $(this).is(':checked'));
}
if (!disable) {
return false; // break out of loop
}
});
button.prop('disabled', disable);});
However this also doesn't work when pulled to the parent page. Any help much appreciated! I'm really new to ajax so please point out any obvious mistakes! Many thanks in advance.
UPDATE
Just an update to what i've found. I've got one form working by using:
$(document).on('mouseenter', '#profile', function() {
However the following:
$(document).on('mouseenter', '#cancelimage', function() {
$('#cancelimage').onclick=function() {
function closePreview() {
ias.cancelSelection();
ias.update();
popup('popUpDiv');
$('#imgForm')[0].reset();
} }; });
Is not working. I understand now that I need to make it realise code was there, so I wrapped all of my code in a mouseover for the new div, but certain parts still don't work, so I gave a mouseover to the cancel button on my image form, but when clicked it doesn't do any of the things it's supposed to.

For anyone else who comes across it, if you've got a function name assigned to it, it should pass fine regardless. I was trying to update it, and there was no need. Doh!
function closePreview() {
ias.cancelSelection();
ias.update();
popup('popUpDiv');
$('#imgForm')[0].reset();
};
Works just fine.

jQuery on or live?

I recently deployed an infinite scroll to an app that I have build and found that sometimes I need to click twice for something to happen.
My app has likes, and once the dom had loaded, i need to click on the like button twice before it changes, then once i click on the other ones it's okay but I always have to click once for the app to almost "wake up"
Is there a better solution?
$(document).ready(function() {
function runUpdate(url, item) {
$.ajax({
type: "GET",
url: url,
cache: false,
success: function(data){
if (data == '200') {
removeAddColor(item);
}
}
});
}
$('.mini-like').live('click', function(){
$('.mini-like').toggle(
function() {
var item = $(this);
var href = item.attr('href');
runUpdate(href, item);
},
function() {
var item = $(this);
var rel = item.attr('rel');
runUpdate(rel, item);
}
);
});
function removeAddColorFollow(item) {
var href = $(this).attr('href');
var rel = $(this).attr('rel');
if (item.hasClass('btn-success')) {
$(item).removeClass('btn-success').attr('href', href).attr('rel', rel);
$(item).find('i').removeClass('icon-white');
} else {
$(item).addClass('btn-success').attr('href', rel).attr('rel', href);
$(item).find('i').addClass('icon-white');
};
}
});

Well unless I'm completely wrong, you only attach the toggle event to .mini-like after it has been clicked once. Try to just replace
$('.mini-like').live('click', function() {...
With
$(function() {...
To attach the toggle event handler on document ready instead of on click

The code $('.mini-like').live('click',... should be placed inside $(document).ready()
You can use .on in place of .live. As .on is a new method and .live is deprecated now you should use .on
UPDATE
The re-written version will be
$(document).ready(function(){
$('.mini-like').on('click', function(){
$('.mini-like').toggle(
function() {
var item = $(this);
var href = item.attr('href');
runUpdate(href, item);
},
function() {
var item = $(this);
var rel = item.attr('rel');
runUpdate(rel, item);
}
);
});
});
function runUpdate(url, item) {
$.ajax({
type: "GET",
url: url,
cache: false,
success: function(data){
if (data == '200') {
removeAddColor(item);
}
}
});
}
function removeAddColorFollow(item) {
var href = $(this).attr('href');
var rel = $(this).attr('rel');
if (item.hasClass('btn-success')) {
$(item).removeClass('btn-success').attr('href', href).attr('rel', rel);
$(item).find('i').removeClass('icon-white');
} else {
$(item).addClass('btn-success').attr('href', rel).attr('rel', href);
$(item).find('i').addClass('icon-white');
};
}

reinitiate jquery plugin after ajax, causes events to fire multiple times

I have a query plugin I'm working on and I certain functions after ajax content has loaded. The problem is that let's say I re-initiate it 15 times, a click event will then fire 15 times when it's only clicked once.
Is there a way so it doesn't keep piling up? I'm calling addToCart onload and also from itemDetail after the ajax return
thanks!
function addToCart()
{
$(options.add_to_cart).click(function ()
{
event.preventDefault();
var id = $(this).attr('id');
store_item_id_val = id.replace('store-item-id-', '');
var quantity = $('.quantity-' + store_item_id_val);
if (quantity.val() < 1)
{
showError('Please enter a quantity of 1 or more.');
$(quantity).val(1);
return this;
}
$.post($(this).attr('href'),
{ store_item_id: store_item_id_val, quantity: quantity.val() },
function (data)
{
var result = jQuery.parseJSON(data);
renderCart(result);
});
});
return this;
}
function itemDetails()
{
$('.item-details').click(function ()
{
event.preventDefault();
var url = $(this).attr('href');
$.getJSON(url, function (result)
{
$('.modal-title').empty().html(result.title);
$('.modal-content').empty().html(result.html);
$('#modal').slideDown(100);
$('.ui-button').button();
addToCart();
$('.modal-close').click(function ()
{
event.preventDefault();
$('#modal').hide();
});
});
});

Based on the code you provided, I would probably say that you have some other code calling itemDetails(). Each time itemDetails() is called, it ADDS another event handler for click to your .item-details. You may want to instead do:
$(document).ready(function()
{
$('.item-details').click(function ()
{
event.preventDefault();
var url = $(this).attr('href');
$.getJSON(url, function (result)
{
$('.modal-title').empty().html(result.title);
$('.modal-content').empty().html(result.html);
$('#modal').slideDown(100);
$('.ui-button').button();
addToCart();
$('.modal-close').click(function ()
{
event.preventDefault();
$('#modal').hide();
});
});
});
});
This would put the event handler on your .item-details classed items, and only fire the events once. If you have dynamic .item-details added and removed you probably should use:
$('.item-details').live('click', function() ...

jQuery - run a function when focusing on a input field

I have a text input field, on which when you click a json request fires off, and some data gets retrieved.
$("input").focus(function(){
var thefield = $(this);
$.getJSON("http://www.blabla.com/bla",
function(data){
alert(JSON.stringify(data));
thefield.val('blabla');
}
);
});
How can I do so this request only gets to run once and not every time I focus on the text field? But I still want data to be available when I focus the 2nd, 3rd time etc.

$('input').one('focus', function() {
// load data using ajax
$(this).data('ajax-data', data);
});
$('input').focus(function() { $(this).val($(this).data('ajax-data')); });

Assign another function on the first click or store some value in alt attribute indicating whether you need to fire a request or not

Something like this will do the trick:
//have this line outside any function to make it global:
var _globalData = "";
$("input").focus(function(){
if ($(this).attr("focused") == "1") {
alert("already focused before, data is: " + _globalData);
}
else {
var thefield = $(this);
$.getJSON("http://www.blabla.com/bla",
function(data) {
_globalData = JSON.stringify(data);
alert(_globalData);
thefield.val('blabla');
thefield.attr('focused', '1');
});
}
);

If your input elements do not share the same data do this:
function loadData(field) {
$.getJSON("http://www.blabla.com/bla",
function(response){
field.data("ajax-data", response).val(response);
}
);
};
$("input").focus(function(){
var $this = $(this);
if ($this.data("ajax-data")) {
$(this).val($this.data("ajax-data"));
} else {
loadData($this);
}
});
If they do share data, it's nearly the same code but with a shared variable instead of using data.
var data = null;
function loadData(field) {
$.getJSON("http://www.blabla.com/bla",
function(response){
data = response;
field.val(response);
}
);
};
$("input").focus(function(){
var $this = $(this);
if (data) {
$(this).val(data);
} else {
loadData($this);
}
});
You can also create a small jQuery plugin to handle any of the above scenarios, and that also support multiple events:
(function($){
$.fn.loadInputData = function(options){
var defaults = {
url: "http://www.blabla.com/bla",
events: "focus",
sharedData: false
};
var _data = null;
options = $.extend({}, defaults, options);
function loadData(field){
$.getJSON(options.url,
function(response){
if (options.sharedData) {
_data = response;
} else {
field.data("ajax-data", response);
}
field.val(response);
}
);
}
return this.each(function(){
var $this = $(this);
$this.bind(options.events, function(){
if ((options.sharedData && !_data) ||
(!options.sharedData && !$this.data("ajax-data")) {
loadData($this);
} else {
$this.val(options.sharedData ? _data : $this.data("ajax-data"));
}
});
})
};
})(jQuery);
Usage for this plugin would be:
$("input").loadInputData({ sharedData: true });
And just for the kicks, an improved version of the accepted answer:
$('input').one('focus', function() {
var $this = $(this);
$.getJSON("http://www.blabla.com/bla",
function(response){
$this.data("ajax-data", response).val(response);
}
);
$this.focus(function() { $this.val($this.data('ajax-data')); });
});