Develop Reference

JS popup does't works comparison operator

I have 5 link and mini preview photo and url 3 links its good link opsss and upsss is wrong when i click good link i'm going to new page when i click error link attr href change to adresError and then we have popup This only works for the first time second time click all links have a popup and should have only opsss and upsss
http://jsfiddle.net/3ptktp47/1/
Here is my code :
var nameError = [
"opsss",
"upsss",
];
$(function() {
$('#prev').hide();
$(function() {
var title_link = 'kliknij aby podejżeć';
$(".preview-link a")
.attr({title: title_link})
//.tooltip()
.click(function(){
$('.preview-link a img').css('opacity',1);
var sciezka = $(this).attr("href");
var tytul = $(this).attr("title");
var adres = $(this).text();
//alert(adres);
$(".duzy").attr({ src: sciezka, alt: tytul, style:'cursor:pointer;', href:'http://www.'+ adres,'target':'_blank'});
$('.link').html(adres).attr({href:'http://www.'+ adres,'target':'_blank'});
$('#prev').show();
function errorDomain() {
$('.link, .duzy').removeAttr('href');
$('.link, .duzy').click(function(event){
$('#popup, .popup-bg').show('slow');
$('.server_url').html(adresError).attr({href:'http://'+ adresError,'target':'_blank'});
});
};
if(adres == 'opsss.com'){
var adresError = 'x4ql.nazwa.pl/'+ nameError[0];
errorDomain();
}else if(adres == 'upsss.com' ){
var adresError = 'x4ql.nazwa.pl/'+ nameError[1];
errorDomain();
}else{
//$('#popup, .popup-bg').fadeOut();
};
$('.cancel, .popup-bg').click(function(event){
$('#popup, .popup-bg').fadeOut();
});
return false;
});
$('.close').click(function(){
$('#prev').hide();
});
$('.link').mouseover(function(){
$(this).css({style: 'color:#000;'});
});
});
});

EDITED:
Ok, I was able to handle your problem.
Your .click() event in the errorDomain() method was firing every time you clicked this square. I managed it to toggle a class on a.duzy element with toggleClass('error') in your if-statement where you check the address.
Inside your click() event, a if-statement is checking if the .duzy element has class named error with hasClass('error') , this has following result -
TRUE- your popup will be displayed
FALSE - nothing happens
I hope my answer is clear enough, but please check out the edited fiddle.
EDITED SOURCE:
Your errorDomain() Method
function errorDomain() {
$('.link, .duzy').removeAttr('href');
$('.duzy, .link').click(function (event) {
if ($(this).hasClass("error")) {
$('#popup, .popup-bg').show('slow');
$('.server_url').html(adresError).attr({
href: 'http://' + adresError,
'target': '_blank'
});
}
});
}
The if-statements
if (adres == 'opsss.com') {
var adresError = 'x4ql.nazwa.pl/' + nameError[0];
$('a.duzy').toggleClass("error");
errorDomain();
} else if (adres == 'upsss.com') {
var adresError = 'x4ql.nazwa.pl/' + nameError[1];
$('a.duzy').toggleClass("error");
errorDomain();
} else {
$('a.duzy').removeClass("error");
}
Edited fiddle

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 confirm popping up multiple times

I'm having problems with this confirm box popping up multiple times. I only confirm after a certain button is pressed. If I only click on that button this should only ask once for that button but it's asking me once for every button of that class.
Any ideas why this is looping if I'm only firing this condition when a user clicks on a specific button?
$(".TweetNow").each(function () {
$(this).click(function TweetThis() {
var identify = $(this).attr('id');
var prestart = identify.indexOf('_');
var start = prestart + 1;
var end = identify.length;
var position = identify.substr(start, end);
var message = $("#Tweet_" + position).val();
var site = $("#SiteLabel").text();
if (message != '') {
var trend = $("#Topic_" + position).text();
var website = $("#SiteLabel").text();
if (confirm("Are you sure you want to tweet the following message:\n" + message + " ?")) {
PageMethods.TweetThis(message, site, trend, website);
location.reload();
}
}
});
});

Change your code as
$(".TweetNow").click(function() {
var identify = $(this).attr('id');
//Rest of code
});
Instead of
$(".TweetNow").each(function () {
$(this).click(function TweetThis() {
});
});

Dynamically created buttons not firing onclick event

Thanks in advance for any help I can get with this one. I'm working on a project which requires me to create buttons out of select options. The buttons are being created without issue, but I can't figure out for the life of me why the onclick trigger isn't firing. I've recoded this in jQuery too and am having the same issue. I'll post both.
JS (with a bit of JS):
var buttonObj = {
addButtons: function() {
$('select').each( function() {
// Check that buttons don't already exist
var selectBox = $(this);
if(!selectBox.parent().next().hasClass('button-group')) {
// Create button div
var buttonGroup = document.createElement('div');
buttonGroup.className = 'button-group';
// Check which type of button to create
var buttonLen = selectBox.children().length;
if(buttonLen > 3) {
// Long button classes
var buttonClass = 'decision-button long';
} else {
// Short button classes
var buttonClass = 'decision-button';
}
selectBox.parent().parent().append(buttonGroup);
// Create Buttons
for(var i = 1; i < buttonLen; i++) {
var newButton = document.createElement('button');
newButton.className = buttonClass;
newButton.type = "button";
newButton.innerHTML = selectBox.children().eq(i).html();
buttonGroup.appendChild(newButton);
newButton.onclick = function() {
alert($(this));
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
}
}
} else {
console.log('do nothing');
}
});
}
}
buttonObj.addButtons();
The Answer
I wasn't checking for $(document).ready() because I was lead to believe that if you're loading the JS at the bottom of the DOM, it is unnecessary. In this case, it was totally necessary.
Thanks to all those who helped.

I think jQuery got an easy way to bind dynamically elements.
jQuery provides .on() (or .live() for older version) for this.
Example:
jQuery(document).ready(function(){
var btnClass=".someClass";
$(document).on('click',btnClass,function(e){
alert($(this));
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});

jQuery Function - return a value with two clicks

I want to carry a value inside a JavaScript function but use jQuery to detect the click or hover state.
function foo(bar){
var choc=bar;
}
When I click foo() I want it detect the first click and the second so I can do an image swap.
Example:
function foo(bar) {
var choc=id;
$(id).click(function () {
alert('first click');
}, function () {
alert('second click');
});
}
I can only return first click. This is what I am trying to do:
An example which will not work
open <img id="5" class="swap5" src="down.png" />
<div id="box5">press the up button to close me</div>
jQuery
$(document).ready(function() {
$(".open").click(function(event){
var id = event.target.id;
$('#box' + id).slideToggle();
$(".swap"+id).attr("src", "up.png");
}, function () {
var id = event.target.id;
$('#box' + id).slideToggle();
$(".swap"+id).attr("src", "down.png");
});
});

Use .toggle instead of .click.
$(document).ready(function() {
$(".open").toggle(function(event){
event.preventDefault();
var id = event.target.id;
$('#box' + id).slideToggle();
$(".swap"+id).attr("src", "up.png");
}, function (event) {
event.preventDefault();
var id = event.target.id;
$('#box' + id).slideToggle();
$(".swap"+id).attr("src", "down.png");
});
});
Also lose the href="javascript:open(5);" in the <a> tag. Use href="#" instead.

This is a pretty hacky solution, but here is my take at it.
Declare a counter variable that is initialized at 0.
On click increment it and do a check to see if it is 2 to perform your action.
var counter = 0;
function foo(bar) {
var choc=id;
$(id).click(function () {
if(counter == 2) {
//Perform action
counter = 0; //reset counter
} else {
counter++; //Increment counter
}
});
}

Did you try using the double click event handler? Check out a description by going to: http://api.jquery.com/dblclick/
It's pretty well documented so you should find it straight forward to implement