Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

DROP DOWN box no longer works in move from PHP to Javascript

Posted on 2013-06-24
13
Medium Priority
?
401 Views
Last Modified: 2014-05-11
We are trying to offload load from the server to the browser.  We have a drop down box with SELECT OPTION statements that have been transferred from PHP to Javascript.  drop-down box works the first time.  The updated SELECT is transferred back to PHP code with a JSON return.  Now, the dropdown box no longer "works."
0
Comment
Question by:ccbergman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39273762
Please wait while I put on my telepathy helmet so I can see your code through your eyes.... Hmmm no. Too much interference. Please post the code here instead and wrap it in [ code] ... [/ code] tags
0
 

Author Comment

by:ccbergman
ID: 39275325
function updateData()
{
	// update panel headers
	$.getJSON('/xml/xml.flights.counter.php', function (json)
	{
		var scheduledFlightData = json.scheduled;
		var scheduleViewDays = json.scheduleViewDays;
		var scheduleExpanded = json.scheduleExpanded;
		var php_Self = json.php_Self;

           var optIn = json.optIn;

		// Here we have the data structure that is returned from xml.flight.counters - so we can now pass this into
		// the new javascript function to display the scheduled pane.

		// As we make this same change to the other panes the calls to render them will occur here, meaning that we've now
		// limited the number of requests to draw the left panel of the page to just one
		genHTML_Scheduled(scheduledFlightData, showBlock, scheduleViewDays, scheduleExpanded, php_Self);
	
	});
}

Open in new window


[code]


function updateScheduled()
{
    $.getJSON('/xml/xml.flights.counter.php', function (json)
    {
        var scheduledFlightData = json.scheduled;
    });
}


function genHTML_Scheduled(scheduledFlightData, showBlock, scheduleViewDays, scheduleExpanded, php_Self)
{
        var SO = '';

        var o = '<table border="0" width="100%" style="border-collapse: collapse; border-color: #f0f0f0;" id="scheduledflights">';
        o += '<tr><th colspan="9" style="cursor:pointer"><b><? echo($current_flights_current_sched_text); ?></b></th></tr>';
        o += '<tr id="csf">';
    
        if (showBlock == "none")
        {
            SO = "no";
        }
        else
        {
            SO = "yes";
        }
     
        if(scheduleExpanded)
            o += '<td align="left" id="_hs"><a href="#" onclick="showNestedScheduled(false);"><? echo($current_flights_close_all_text); ?></a></td>';
        else
            o += '<td align="left" id="_hs"><a href="#" onclick="showNestedScheduled(true);"><? echo($current_flights_open_all_text); ?></a></td>';

        //The form below allows a user to select a number of days to see worth of flights
        o += '<td align="left" colspan="6"><form name="ScheduleViewDaysForm" method="POST" action="' + php_Self + '?window=queue&SO=' + SO + '&ScheduleViewDays=' + scheduleViewDays + '"><? echo($current_flights_show_text); ?>';
        o += '<select name="ScheduleViewDays" id="ScheduleViewDays" size="1" onchange="updateScheduled();">';

        if(scheduleViewDays == 0)
            o += '<option value="0" selected="selected">Infinite</option>';
        else
            o += '<option value="0"><? echo($current_flights_infinite_text); ?></option>';
        if (scheduleViewDays==1)
            o += '<option value="1" selected="selected">1</option>';
        else
            o += '<option value="1">1</option>';
        if (scheduleViewDays==2)
            o += '<option value="2" selected="selected">2</option>';
        else
            o += '<option value="2">2</option>';
        if (scheduleViewDays==3)
            o += '<option value="3" selected="selected">3</option>';
        else
            o += '<option value="3">3</option>';
        if (scheduleViewDays==4)
            o += '<option value="4" selected="selected">4</option>';
        else
            o += '<option value="4">4</option>';
        if (scheduleViewDays==5)
            o += '<option value="5" selected="selected">5</option>';
        else
            o += '<option value="5">5</option>';
        if (scheduleViewDays==6)
            o += '<option value="6" selected="selected">6</option>';
        else
            o += '<option value="6">6</option>';
        if (scheduleViewDays==7)
            o += '<option value="7" selected="selected">7</option>';
        else
            o += '<option value="7">7</option>';
        if (scheduleViewDays==8)
            o += '<option value="8" selected="selected">8</option>';
        else
            o += '<option value="8">8</option>';
        if (scheduleViewDays==9)
            o += '<option value="9" selected="selected">9</option>';
        else
            o += '<option value="9">9</option>';
        if (scheduleViewDays==10)
            o += '<option value="10" selected="selected">10</option>';
        else
            o += '<option value="10">10</option>';
        o += '</select><? echo($current_flights_days_text); ?>';
        o += '</form>';
        o += '</td>';
        o += '</tr>';
        o += '</table>';
   
        o += '<table border="0" width="100%" style="border-collapse: collapse; border-color: #f0f0f0;" id="scheduledflights_2">';
        o += '<tr>';
        o += '    <th width="300"><b><? echo($current_flights_reg_text); ?></b></th>';
        o += '    <th width="300"><b><? echo($current_flights_flight_number_text); ?></b></th>';
        o += '    <th width="300"><b><? echo($current_flights_from_text); ?></b></th>';
        o += '    <th width="300"><b><? echo($current_flights_at_text); ?></b></th>';
        o += '    <th width="300"><b><? echo($current_flights_to_text); ?></b></th>';
        o += '    <th width="300"><b><? echo($current_flights_at_text); ?></b></th>';
        o += '    <th width="300"><b><? echo($current_flights_bay_text); ?>Bay</b></th>';
        o += '</tr>';

 

        if (scheduledFlightData.length == 0)
        {
            o += '<tr><td align="centered" colspan="7"><? echo($current_flights_no_flights_scheduled_text); ?></td><td colspan="5">&nbsp;</td></tr>';
        }
        else
        {
            var aircraftID_old = '';

            $.each(scheduledFlightData, function (key, value)
            {
                if(aircraftID_old != value.AircraftID) 
                {
                    o += '<tr><td align="left" style="cursor:pointer" onClick="ShowFlights(event,' + value.AircraftID + ')"><b>' + value.AircraftID + '</b></td>';
                }
                else
                {
                    if (scheduleExpanded)
                    { 
                        o += '<tr id="' + value.AircraftID + key + '_div" class="hs"><td>&nbsp;</td>';
                    }  
                    else
                    {
                        o += '<tr id="' + value.AircraftID + key + '_div" class="hs" style="display:none"><td>&nbsp;</td>';
                    }              
                }
            
                o += '<td>' + value.FlightID + '</td>';
                o += '<td>' + value.DeparturePoint + '</td>';
                o += '<td>' + value.ScheduledDeparture + '</td>';
                o += '<td>' + value.ArrivalPoint + '</td>';
                o += '<td>' + value.ScheduledArrival  + '</td>';
                o += '<td>' + value.BayNumber + '</td>';
                o += '</tr>';
                aircraftID_old = value.AircraftID;
            });
        }

        o += '<tr id="scheduledFlightRows"></tr>';
        o += '</table>';
        // Update 'Scheduled' element
        $('#scheduled').html(o);
}

Open in new window

0
 
LVL 29

Expert Comment

by:fibo
ID: 39275499
Not sure what you expect from moving this dropdown list from php(on the server) to javascript (on the client)

In both cases your list will be populated on the server by php...
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39275524
Any errors in the console?

Does the url to the php work on its own (look in Chrome network tab)

BTW the code is not using jQuery to it's fullest. It is not optimal.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39275559
This snippet can replace your ifs


   o += '<option value="0" selected="selected">Infinite</option>';
   if (scheduleViewDays >0)  for (var i=1;i<=10;i++) {    
            var sel = i==scheduleViewDays?' selected="selected"':"";
            o += '<option value="'+i+'" '+sel+'>'+i+'</option>';
      }
   }
0
 

Author Comment

by:ccbergman
ID: 39276008
Thanks.  I will implement the code snippet to replace ifs,
and check on the url.
How can I optimize JQuery?
Thanks so much again.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39276143
Use $("#scheduled").append instead of that o += for example
0
 

Author Comment

by:ccbergman
ID: 39276380
Oh.  Ok.  :)
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1100 total points
ID: 39276962
Ah, You might want

   if (scheduleViewDays >0)  for (var i=1;scheduleViewDays <i && i<=10;i++) {    
            var sel = i==scheduleViewDays?' selected="selected"':"";
            o += '<option value="'+i+'" '+sel+'>'+i+'</option>';
      }
   }
0
 
LVL 143

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 40053802
I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 40053803
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, I’ll look at how you can use a backup to start a secondary instance for MongoDB.
If you are a mobile app developer and especially develop hybrid mobile apps then these 4 mistakes you must avoid for hybrid app development to be the more genuine app developer.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question