This forum is in READ-ONLY mode.
You can look around, but if you want to ask a new question, please use Stack Overflow.

Simple Jquery modal window and AJAX

Forum to discuss ExtJS and other JS plugins

Simple Jquery modal window and AJAX

by NeoX » Wed Jun 23, 2010 7:11 pm

Hi all,
I've followed this tutorial in order to creating a jquery modal window http://www.queness.com/post/77/simple-jquery-modal-window-tu torial

It works but I would know how to pass a javascript var into js code because depending on a href clicked I should show different robot information.

My html code:
Code: Select all
<?php include_javascripts() ?>
<?php foreach ($robots as $i => $robot ) : ?>
<td>
    <div id="card-robot" NAME="card">
        <dl>
[B]            <a href="#dialog"  style="float: right;margin-right:15px" name="modal">[/B]
                <img id="loader" src="/images/info.gif" style="float: right;"/></a>
            <dt>Robot:</dt>
            <dd style="margin-left: 15px" ><a href="<?php echo url_for('robot/show?id='.$robot->getId()) ?>"><?php echo $robot->getNombre() ?></a></dd>       
</td>
<?php endforeach; ?>

<div id="boxes">
    <div id="dialog" class="window">
         <a href="#card-robot" class="close" style="float: right;">Cerrar</a>
    </div>
</div>

<!-- Mask to cover the whole screen -->
<div id="mask"></div>


My panel.js code:
Code: Select all
$(document).ready(function(){
   $('a[name=modal]').click(function(e) {
      e.preventDefault();
                var id = ($(this).attr('href'));
      var maskHeight = $(document).height();
      var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
      $('#mask').fadeIn(1000);   
      $('#mask').fadeTo("slow",0.8);
      var winH = $(window).height();
      var winW = $(window).width();
                $(id).css('top', parseInt( winH/2-245) + $(document).scrollTop() );
      $(id).css('left', winW/2-$(id).width()/2);
$(id).slideDown(id,0,winH,Math.ceil(winH/timeToSlide));
              $(id).slideDown("slow");
[B]              $("#dialog").load("robot/number");[/B]   
   });
   //if close button is clicked
   $('.window .close').click(function (e) {
      e.preventDefault();
      $('#mask').hide();
      $('.window').hide();
   });      

   $('#mask').click(function () {
      $(this).hide();
      $('.window').hide();
   });         

});


So, I want to select a number depending on wich a href is clicked.
What can I do that?

Thanks.
NeoX
Member
 
Posts: 72
Joined: Thu Mar 25, 2010 2:42 pm
Location: Spain

Re: Simple Jquery modal window and AJAX

by halfer » Thu Jun 24, 2010 5:02 pm

At the simplest level, replace "robot/number" with a global JS var 'myJsLoadUrl'. Then in the related PHP template, do this at the start:

Code: Select all
<script type="text/javascript>
<!--
var myJsLoadUrl = "<?php echo $myPhpUrl ?>";
//-->
</script>

If you wish, you can make this more elegant by turning your JS into a Javascript class, and using something like this in your template:

Code: Select all
<script type="text/javascript>
<!--
myClickHandler.setUrl("<?php echo $myPhpUrl ?>");
//-->
</script>

Thus, once your page has loaded, the value will have in the meantime been set. I do this all the time for our AJAX stuff.
halfer
Faithful Member
 
Posts: 10148
Joined: Mon Jan 30, 2006 1:16 pm
Location: West Midlands, UK

Re: Simple Jquery modal window and AJAX

by NeoX » Fri Jun 25, 2010 4:13 pm

Hi halfer,
I'm trying the simplest way but It doesn't work because $myPhpUrl should be:
Code: Select all
<?php echo url_for('robot/show?id='.$robot->getId()) ?>

The value is obtained in foreach so I get the followin error:

Undefined variable: robot
NeoX
Member
 
Posts: 72
Joined: Thu Mar 25, 2010 2:42 pm
Location: Spain

Re: Simple Jquery modal window and AJAX

by halfer » Fri Jun 25, 2010 4:22 pm

Where are you putting that piece of code - not in your javascript file, I hope! That file is *not* executed by the PHP interpreter, it is read and served as-is by Apache.

... which is why I said this has to go into the PHP template, in your case in the one to which $robot has been passed.
halfer
Faithful Member
 
Posts: 10148
Joined: Mon Jan 30, 2006 1:16 pm
Location: West Midlands, UK

Re: Simple Jquery modal window and AJAX

by NeoX » Fri Jun 25, 2010 4:41 pm

Of course, at the beginning of my Php template.
NeoX
Member
 
Posts: 72
Joined: Thu Mar 25, 2010 2:42 pm
Location: Spain

Re: Simple Jquery modal window and AJAX

by halfer » Fri Jun 25, 2010 5:13 pm

Outside of the loop that defines $robot? If you wish to use $robot in the context of the loop, your code will have to be inside the loop.

However since this trick sets only one JS value, it makes sense to decide which single Robot instance you wish to assign to it, and assign that instance in the action. To avoid confusion, it may be better to use a different name other than $robot.
halfer
Faithful Member
 
Posts: 10148
Joined: Mon Jan 30, 2006 1:16 pm
Location: West Midlands, UK

Re: Simple Jquery modal window and AJAX

by NeoX » Fri Jun 25, 2010 7:02 pm

It doesnt work.
I've tried inside and outside of the loop.
I don't know if I'm explaining incorrectly but the behavior I need is: to get the information of the Robot (showSuccess action) corresponding with the a href="#dialog" clicked by the user, and show it in the modal window.
So, if the user clicks in a href of Robot 3, show information about Robot 3 in the modal window, and if It's clicked Robot 15, show information about Robot 15 in the modal window.
NeoX
Member
 
Posts: 72
Joined: Thu Mar 25, 2010 2:42 pm
Location: Spain

Re: Simple Jquery modal window and AJAX

by halfer » Fri Jun 25, 2010 11:39 pm

Right. Well, first you need to understand why this didn't work. If you don't understand this, you'll have difficulty with jQuery.

So, when the page loads, if the item we discussed is inside the loop, you'll have this javascript:

Code: Select all
<script>
<!--
var myJsLoadUrl = 'robot/show?id=1';
//-->
</script>
<script>
var myJsLoadUrl = 'robot/show?id=2';
//-->
</script>
<script>
var myJsLoadUrl = 'robot/show?id=3';
//-->
</script>
<script>
var myJsLoadUrl = 'robot/show?id=4';
//-->
</script>

It should be clear that, once the DOM has loaded, each will execute and you'll be left only with the last assignment. So this approach won't work.

This next idea is a bit more complex, but try this approach instead. For each of your clickable items, do this:

Code: Select all
<a href="#dialog" style="float: right;margin-right:15px" class="modal" id="modal_<?php echo $i ?>">

You'll notice I don't use `name` here, I use `class`. Then do this in your jQuery:

Code: Select all
$('.modal').click(function()
{
  var id = $(this).attr('id').replace('modal_');
  // ...
});

This will attach a click handler to all elements, and you don't need to add any JS into the loop - jQuery does all the work for you. From here you should be able to customise the handler as you require.
halfer
Faithful Member
 
Posts: 10148
Joined: Mon Jan 30, 2006 1:16 pm
Location: West Midlands, UK