Develop Reference

Dropdown won't select and open div... What am I doing wrong?

On our Offices page if you click the dots on the map it opens a div below and changes the sidebar contents. We added a dropdown so you could select cities on mobiles. Since I recreated the website and copied over the code I've done something and it doesn't work anymore.
I know the problem has something to do with this bit of code
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Here is the full code
jQuery(function($) {
$(".dot").show();
$('.dot').click(function() {
$(".slidingDiv").slideDown('slow');
});
$('#continent').change(function() {
$(".slidingDiv").slideDown('slow');
});
});
jQuery(function($) {
$('#showSingle').click(function() {
$('.targetDiv').show();
});
$('.dot').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
var value = $(this).attr('city');
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#' + value).show();
$('#continent').val(value);
});
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("select option:selected").attr('target');
var value = $("select option:selected").attr('value');
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
});
I'm sure this is something simple for someone who knows Javascript.
Thanks.

There you go:
$('#continent').change(function() {
$('.targetDiv').hide();
$('#worldwide').hide();
var target = $("#continent").find(":selected").attr('target');
var value = $("#continent").val();
console.log($('#' + value));
$(".detail-container").empty();
$('#' + value).clone().show().appendTo(
".detail-container");
$('#div' + target).show();
if (value == "worldwide") {
$('.slidingDiv').slideUp();
}
});
Should work, but it's very ugly code i guess :P

JQuery Method is not defined

I have the following JS/JQuery in the body of a my JQM (html) site, when I try to call sortMethod() I get 'ReferenceError: sortMethod is not defined' in FireBug console.
<script>
$(function(){
$("[name=radio-choice-h-3]").change(function() {
//alert('Selected: '+$('input[name=radio-choice-h-3]:checked').val());
sessionStorage.sortBy = $('input[name=radio-choice-h-3]:checked').val();
sortMethod();
});
});
$(function(){
sortMethod();
});
$(function sortMethod(){
if(sessionStorage.sortBy === "model" || sessionStorage.sortBy == null || sessionStorage.sortBy.trim())
{
theManufacturers('model');
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2a", page).prop("checked", true).checkboxradio("refresh");
});
}
else if(sessionStorage.sortBy === "year")
{
theManufacturers('year');
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2b", page).prop("checked", true).checkboxradio("refresh");
});
}
else if(sessionStorage.sortBy === "location")
{
theManufacturers('location');
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2c", page).prop("checked", true).checkboxradio("refresh");
});
}
else if(sessionStorage.sortBy === 'ttaf')
{
theManufacturers("ttaf");
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2d", page).prop("checked", true).checkboxradio("refresh");
});
}
});
$(function theManufacturers(inputSearch){
var qryString = 0;
//set up string for adding <li/>
var li = "";
var jqxhr = $.getJSON("url",
function(data){
$.each(data.items, function(i,item){
li+='<li><img src="' + item.Image.trim() + '" style="height:80px;/> <span style="font-size:0.75em;">' + item.Manufacturer.trim() + ' ' + item.Model.trim() + '(' + item.Price.trim() + ')</span><br/><span style="font-size:0.65em;">S/N: ' + item.Serial.trim() + ' | TTAF: ' + item.TTAF.trim() + ' | LOC: ' + item.Location.trim() + '</span><br/><span style="font-size:0.65em;">' + item.DealerName.trim() + '</span></li>';
});
$("#results-list").append(li);
$("#results-list").listview("refresh");
});
//jqxhr.done(function() {
// console.log( "second success" );
//});
});
What am I doing wrong?

<script>
//first you define your functions, they will not be executed "from alone"
//syntax:|function name() { .. code }
function sortMethod(){
if(sessionStorage.sortBy === "model" || sessionStorage.sortBy == null || sessionStorage.sortBy.trim())
{
theManufacturers('model');
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2a", page).prop("checked", true).checkboxradio("refresh");
});
}
else if(sessionStorage.sortBy === "year")
{
theManufacturers('year');
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2b", page).prop("checked", true).checkboxradio("refresh");
});
}
else if(sessionStorage.sortBy === "location")
{
theManufacturers('location');
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2c", page).prop("checked", true).checkboxradio("refresh");
});
}
else if(sessionStorage.sortBy === 'ttaf')
{
theManufacturers("ttaf");
$(document).on("pagecontainerbeforeshow", function () {
var page = $.mobile.pageContainer.pagecontainer("getActivePage");
$("#radio-choice-h-2d", page).prop("checked", true).checkboxradio("refresh");
});
}
};
//same here, just a defined function
function theManufacturers(inputSearch){
var qryString = 0;
var li = "";
var jqxhr = $.getJSON("url",
function(data){
$.each(data.items, function(i,item){
li+='<li><img src="' + item.Image.trim() + '" style="height:80px;/> <span style="font-size:0.75em;">' + item.Manufacturer.trim() + ' ' + item.Model.trim() + '(' + item.Price.trim() + ')</span><br/><span style="font-size:0.65em;">S/N: ' + item.Serial.trim() + ' | TTAF: ' + item.TTAF.trim() + ' | LOC: ' + item.Location.trim() + '</span><br/><span style="font-size:0.65em;">' + item.DealerName.trim() + '</span></li>';
});
$("#results-list").append(li);
$("#results-list").listview("refresh");
});
});
//here is an example how i outsourced your changehandler to a function
function initializeChangeHandler(){
$("[name=radio-choice-h-3]").change(function() {
//alert('Selected: '+$('input[name=radio-choice-h-3]:checked').val());
sessionStorage.sortBy = $('input[name=radio-choice-h-3]:checked').val();
});
};
//heres the function that will be executed when the document model is complete loaded
//syntax:|$(function(){ .. code .. })
$(function(){ // as the code inside here is executed, you can now call your functions
initializeChangeHandler();// <<-- example for understanding
sortMethod(); // <<-- heres the call
});
</script>
keep up to this structure ( initialize the stuff you defined before)
then you can be sure your functions are defined ;9

Move sortMethod in outer of scope $(), I mean sortMethod not need $()
function sortMethod(){
....
}

jquery load function after show

I am trying to run a function after a given DIV shows.
$(document).ready(function () {
$("#next").click(function () {
$("#nextwindow").show()
});
});
$(document).ready(function () {
$("#pagetitle-up").click(function () {
$.post('maindatabase.php', {
page: <? php echo $_GET[p]; ?> , sort: 1
},
function (data) {
var printthisline = "";
var data = $.parseJSON(data);
for (var i in data.results) {
printthisline += " <a href='main.php?p=" + data.results[i].id + "'> " + data.results[i].pagetitle + "</a>" + " | " + " <br> ";
}
document.getElementById("nexttable").innerHTML = printthisline;
});
});
});
When trying to bind them together so that the function only runs once the initial DIV shows, it stops working. Any suggestions why?
$(document).ready(function () {
$("#next").click(function () {
$("#nextwindow").show()
});
});
$(document).ready(function () {
$("#nextwindow").on('show', function () {
$.post('maindatabase.php', {
page: <? php echo $_GET[p]; ?> , sort: 1
},
function (data) {
var printthisline = "";
var data = $.parseJSON(data);
for (var i in data.results) {
printthisline += " <a href='main.php?p=" + data.results[i].id + "'> " + data.results[i].pagetitle + "</a>" + " | " + " <br> ";
}
document.getElementById("nexttable").innerHTML = printthisline;
});
});
});
Thank you

You could trigger manually your custom show event:
DEMO jsFiddle
$(document).ready(function () {
$("#next").click(function () {
$("#nextwindow").show().trigger('show');
});
});
Or use callback:
DEMO jsFiddle
$("#nextwindow").show(0,myCallback);
function myCallback(){
$.post(...);
}
That's said, why not call POST request on #nextwindow click???

problem ajax load with autocomplete.?

i created a jquery autocomplete it work true, but loading LOADING... it after removed value by Backspace don't work true. it not hide and Still is show.
how can after removed value by Backspace, hide LOADING... ?
EXAMPLE: Please click on link and see problem
my full code:
$(document).ready(function () {
/// LOADING... ///////////////////////////////////////////////////////////////////////////////////////
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
/// autocomplete /////////////////////////////////////////////////////////////////////////////////////////
$('.auto_complete').keyup(function () {
var specific = '.' + $(this).closest('div.auto_box').find('b').attr('class');
var cl_list = '.' + $(this).closest('div.auto_box').find('ul').attr('class');
var id = '#' + this.id;
var url = $(id).attr('class');
var dataObj = $(this).closest('form').serialize();
$.ajax({
type: "POST",
dataType: 'json',
url: url,
data: dataObj,
cache: false,
success: function (data) {
//alert(url)
var cl_list = '.' + $('.auto_box '+ specific +' ul').attr('class');
var id_name = $(cl_list).attr('id');
$(cl_list).show().html('');
if (data == 0) {
$(cl_list).show().html('<p><b>There is no</b></p>');
}
else {
$.each(data, function (a, b) {
//alert(b.name)
$('<p id="' + b.name + '">' + b.name + '</p>').appendTo(cl_list);
});
$(cl_list + ' p').click(function (e) {
e.preventDefault();
var ac = $(this).attr('id');
$('<b>' + ac + '، <input type="text" name="'+id_name+'[]" value="' + ac + '" style="border: none; display: none;" /></b>').appendTo($('.auto_box ' + specific + ' span'));
$(this).remove();
return false;
});
$('.auto_box span b').live('click', function (e) {
e.preventDefault();
$(this).remove();
return false;
});
}
if ($(specific + ' input').val() == '') {
$(cl_list + " p").hide().remove();
$(cl_list).css('display','none');
$(".list_name").show().html('');
};
$('body').click(function () {
$(cl_list + " p").hide().remove();
$('.auto_complete').val('');
$(cl_list).show().html('');
$(cl_list).css('display','none')
});
},
"error": function (x, y, z) {
// callback to run if an error occurs
alert("An error has occured:\n" + x + "\n" + y + "\n" + z);
}
});
});
});

I recommend you to use jsfiddle next time you post code examples in a link.
Nevermind. The "loading" message keeps there because there's no fallback to empty values on results.
A quick fix could be just by test that there's a value in the input before making any post like if(this.value == ""){
$(cl_list).css('display', 'none');
return false;
}
Here's how it works with it

jQuery replace div based on rel attribute

I'm trying to replace a div based on a class name and a rel attribute.
<script type="text/javascript">
$(function () {
$('.special_button').click(function () {
var num = $(this).attr('rel');
$(button with class .value_button and rel=num).replaceWith("<div class='value_button' >" + $(this).val() + "</div>");
$('div.content_slide').slideUp(600);
});
});
</script>
How would you do this?

Try this:
$(function () {
$('.special_button').click(function () {
var num = $(this).attr('rel');
$('.value_button[rel="' + num + '"]').replaceWith("<div class='value_button' >" + $(this).val() + "</div>");
$('div.content_slide').slideUp(600);
});
});