code for using jquery modal dialog, like in admin module

mischka · June 17, 2013

Hey guys,

I'm trying to implement a kind of modal dialog window, much like the one you see in the admin section. For example when editing an airport you click on edit on the row and a window pops up with the relevant form.

I've tried analyzing and extracting the code in the admin section, as well as trying to google, but after an hour it has yielded nothing but frustration

I admit that jquery is not my strength, so i thought it might be better to ask someone who does know what I need and knows how to make it work with phpvms. After all, this functionality seems to be built into phpvms already, so why not use it?

thanks in advance

mischka · June 24, 2013

Ok, I've gotten a bit further on my own accord, but still need some help.

This experimental page does exactly what I want: http://european.virtualairlines.eu/jquerytest.htm

However, if I paste the script code into my schedule_results.tpl, or any other page, it doesn't work any more..

eg http://european.virtualairlines.eu/index.php/schedules <- click on the flight number to get the details

the schedule_details.tpl will just load in a full window, not in the dialog box.

from the test htm I took out the calls, because they were duplicated in the phpvms header page.

I also tried moving my script into the <head> section but it doesn't matter.. the experimental page has the script in the body and works just fine.

who knows where the problem lies? Im getting a tad frustrated here

Strider · June 25, 2013

Do you mind if I take the code and try and see if I can get it to work on my VA?

mischka · June 25, 2013

sure, go ahead... but post the results so others have a benefit too!

Strider · June 25, 2013

I have got it working somewhat. It opens up in a new window, problem is, it is basically opening the site in an iframe. I have the banner and the nav. How I got it that far was putting the js code in the schedule_results.tpl file. How to get it to show without the nav and banner I am unsure.

Strider · June 25, 2013

http://malaysiava.org/index.php/schedules/view

You can see what I have got there. If you click on the flight number, it opens up in a new window.

mischka · June 25, 2013

if I open that link I get to the standard phpvms schedule search, which doesn't work.. I never get any results, even if I "select all" airports.

to open the schedule details page without the nav and banner, use action.php instead of index.php, that'll show it without the skin.

Strider · June 26, 2013

http://malaysiava.org/index.php/schedules

Try that

mischka · June 26, 2013

doesn't work! it just keeps showing the spinner and "searching" nothing ever shows up. Tried in IE and chrome

I can really recommend frontschedules.. works much much better than the standard schedule search in phpvms

maybe you can post the code of what you did, and where you put it?

Parkho · June 26, 2013

I can offer you to use a hidden table row and then on click the table row opens showing the details in the same table. You can see it on my website. Go to www.parkho.ir -> Login using the provided username and password -> click on "try out center-pilot" -> click on "FlightBookingSystem_V1.0" then click on search and the schedules page opens up then if you click on detail image you'll see what I mean. I assure you it's working and yet it has very simple coding.

mischka · June 26, 2013

it wont let me log in... tried with ALD0001 and also the email address provided, and the supplied password but it wont let me in.

About your solution: I really want to use this modal window on different places of my website (like pirep history, pilot brief and others) where I just need a dialog window and JIT loading. So thanks for the idea but it doesn't suit my needs

Parkho · June 26, 2013

Hi, try this direct link :http://parkho.ir/phpvms

Strider · June 26, 2013

the code is the exact same, just I put the js code in the schedule_results.tpl file.

mischka · June 26, 2013

@parkho: yes, I managed to get in now. It looks really neat but it's not exactly what I need

@strider: yes, I also put it in the schedule_results.tpl.

This is what my schedule_result.tpl looks like:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
   <style>
    .loading { background: url(/img/spinner.gif) center no-repeat !important}
   </style>  
   <script type="text/javascript">
   $(function (){
    $('a.ajax').click(function() {
	    var url = this.href;
	    // show a spinner or something via css
	    var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');

	    // open the dialog
	    dialog.dialog({
		    // add a close listener to prevent adding multiple divs to the document
		    close: function(event, ui) {
			    // remove div with all data and events
			    dialog.remove();
		    },
		    modal: true, height: 600, width: 700, position: ['center',80], title: "Schedule details"
	    });
	    // load remote content
	    dialog.load(
		    url,
		    {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
		    function (responseText, textStatus, XMLHttpRequest) {
			    // remove the loading class
			    dialog.removeClass('loading');
		    }
	    );
	    //prevent the browser to follow the link
	    return false;
    });
   });
   </script>

and then the rest

the link looks like this:

<a class="ajax" href="<?php echo url('/schedules/details/'.$route->id);?>"><?php echo $route->code . $route->flightnum?>
  <?php echo '('.$route->depicao.' - '.$route->arricao.')'?>
 </a>

Strider · June 26, 2013

When you look at the code , it shows above the search part of the schedules.

Parkho · June 26, 2013

try this:

<a class="a.ajax" href="<?php echo url('/schedules/details/'.$route->id);?>"><?php echo $route->code . $route->flightnum?>
  <?php echo '('.$route->depicao.' - '.$route->arricao.')'?>
 </a>

Strider · June 26, 2013

I am unsure that will work parkho, as in the js script the a.ajax, is just calling an a link with the class ajax. It is the same way in a css file where you would go a.ajax{color:#00000;}

Parkho · June 26, 2013

I was just looking at the code in admin ops_airlineform.tpl and noticed that the <a> tag has an id as "dialog" and a class as "JqModal"

Strider · June 26, 2013

I have got it working the way you want it to.

Place the following at the beginning of the schedules_results.tpl file:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function (){
 $('a.ajax').click(function() {
	 var url = this.href;
	 // show a spinner or something via css
	 var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');

	 // open the dialog
	 dialog.dialog({
		 // add a close listener to prevent adding multiple divs to the document
		 close: function(event, ui) {
			 // remove div with all data and events
			 dialog.remove();
		 },
		 modal: true, height: 600, width: 700, position: ['center',80], title: "Schedule details"
	 });
	 // load remote content
	 dialog.load(
		 url,
		 {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
		 function (responseText, textStatus, XMLHttpRequest) {
			 // remove the loading class
			 dialog.removeClass('loading');
		 }
	 );
	 //prevent the browser to follow the link
	 return false;
 });
});
</script>

replace the link that has the flight number with this:

<a class="ajax" href="<?php echo SITE_URL?>/action.php/schedules/details/<?php echo $route->id;?>"><?php echo $route->code . $route->flightnum?></a>

Preview:

mischka · June 26, 2013

that looks really great, and just how I want it!

However...

just updated my schedule_results.tpl with the code you posted -> nothing

then I downloaded your schedule_results and temporarily put it on my site -> nothing either!

seems its not so much a problem of the specific code in the results.tpl but either in the header or a client-side issue..

still, your schedule_results doesn't work on any of my computers (my sim-pc, my two thinkpads, my girlfriends dell)

.. now I wonder, does mine work on yours?

this is the page with your code in it: http://european.virt.../FrontSchedules

Strider · June 26, 2013

No it doesn't I get

[b]Notice[/b]: The template file "/home/virtuala/domains/virtualairlines.eu/public_html/european//core/templates/airport_search.tpl" doesn't exist in [b]/home/virtuala/domains/virtualairlines.eu/public_html/european/core/classes/TemplateSet.class.php[/b] on line [b]248[/b]

mischka · June 26, 2013

Oh bugger, pasted the wrong link: this should do: http://european.virtualairlines.eu/index.php/schedules

anyway, I'm on to something now, I think I know where the issue is

mischka · June 26, 2013

yay, it works finally! it appeared to be a problem in my layout.tpl... the order of some script refs was the other way around.

however, now my dropdown menu's don't work anymore... gosh, I hate jquery!

anyway, I'll figure it out now.. thank y'all for your help

Sign In

code for using jquery modal dialog, like in admin module

Recommended Posts

mischka

mischka

Strider

mischka

Strider

Strider

mischka

Strider

mischka

Parkho

mischka

Parkho

Strider

mischka

Strider

Parkho

Strider

Parkho

Strider

mischka

Strider

mischka

mischka

Join the conversation