Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-04-2011, 11:45 AM   PM User | #1
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
$_GET and JavaScript

Hello,

I am using the ColorBox (http://colorpowered.com/colorbox/) modal on my site.

I have a form, which is in an inline DIV. That div is called with a link.


The code looks the following way:
Code:
 
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
AND

Code:
<p><a class='example99' href="#">Quote</a></p>
AND

Code:
 <div style='display:none'>

        <div id='inline_example1' style='padding:10px; background:#fff;'>
                    <form class="settings" method="post" name="forumF" action="addpost.php">
 
                    
                    
                    <label>Message:</label>
                    <textarea class="field" name="replyText" id="replyText" rows="10" cols="30" style="color:#000;"><?php echo $quote; ?></textarea>
                    
                    <div class="buttons">
                    <input type="submit" value="POST" name="replyButton" class="submit">
                    </div>
                    </form>
         
        </div>

    </div>

So, as you can see the "<?php echo $quote; ?>" inside the TEXTAREA tag. I wish, when users click the QUOTE button, the quotet post will appear in the textarea, using $_GET.
slyfox is offline   Reply With Quote
Old 07-04-2011, 11:51 AM   PM User | #2
devnull69
Senior Coder

 
Join Date: Dec 2010
Posts: 2,245
Thanks: 10
Thanked 530 Times in 524 Posts
devnull69 will become famous soon enough
What is the "quotet post" ?

Generally you can use .load() to load external content into a DOM element using Ajax.
Code:
$('.example99').click(function() {
   // replyText is the id of the textarea
   $('#replyText').load('path/to/whatever.php');
});
devnull69 is offline   Reply With Quote
Old 07-04-2011, 12:16 PM   PM User | #3
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
I end up with this:

Code:
           $('.example99').colorbox({
               inline:true,
               href:"#inline_example1"
           // replyText is the id of the textarea
            $('#replyText').load('PATH');
           });

Doesn't seems to work. (The path is edited in this example)

Last edited by slyfox; 07-04-2011 at 12:21 PM..
slyfox is offline   Reply With Quote
Old 07-04-2011, 12:21 PM   PM User | #4
devnull69
Senior Coder

 
Join Date: Dec 2010
Posts: 2,245
Thanks: 10
Thanked 530 Times in 524 Posts
devnull69 will become famous soon enough
The path to the server side file (PHP I presume) that will generate the external content that you want to load.

This is what you said
Quote:
I wish, when users click the QUOTE button, the quotet post will appear in the textarea, using $_GET.
$_GET is a PHP array. To have this you'll need to make a request (usually Ajax request) to your server side script and output something for the browser to show.
devnull69 is offline   Reply With Quote
Old 07-04-2011, 12:23 PM   PM User | #5
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
Quote:
Originally Posted by devnull69 View Post
The path to the server side file (PHP I presume) that will generate the external content that you want to load.

This is what you said

$_GET is a PHP array. To have this you'll need to make a request (usually Ajax request) to your server side script and output something for the browser to show.
Alright. The PATH is not the problem then, as the #replyText textarea is in the PATH which I entered.

But still, when I press:

Code:
<p><a class='example99' href="#">Quote</a></p>
It does not work. It doesn't bring any ColorBox.
slyfox is offline   Reply With Quote
Old 07-04-2011, 12:32 PM   PM User | #6
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
I edited my code to:

Code:
        $(document).ready(function(){
  
            $("#butto a").colorbox({width:"30%", inline:true, href:"#inline_example1"});
           
               $('.example99').colorbox(function(){ 
               // replyText is the id of the textarea
                    $('#replyText').load('PATH');
               });


        });
But now, it just opens the ColorBox BUT inside the ColorBox, is the entire PATH. Not just the #replyText
slyfox is offline   Reply With Quote
Old 07-04-2011, 01:05 PM   PM User | #7
devnull69
Senior Coder

 
Join Date: Dec 2010
Posts: 2,245
Thanks: 10
Thanked 530 Times in 524 Posts
devnull69 will become famous soon enough
I think you are messing up a little here

1. In your first code example you bound the colorbox to an element with id 'example8', which was not at all visible in your HTML code
2. In your last code example you changed that to a link AND an element with id example99 all of a sudden
3. Where is the element with id 'replayText' located? Is it inside the current HTML (the same page where the Javascript code is running)? Or is it in an external PHP file that you want to load?
4. What do you want to achieve with .load('PATH') ? You need to replace PATH by the actual physical path to the PHP file you want to execute server side ... of course depending upon what your answer to (3) is
devnull69 is offline   Reply With Quote
Old 07-04-2011, 02:10 PM   PM User | #8
Kor
Red Devil Mod


 
Kor's Avatar
 
Join Date: Apr 2003
Location: Bucharest, ROMANIA
Posts: 8,478
Thanks: 58
Thanked 379 Times in 375 Posts
Kor has a spectacular aura aboutKor has a spectacular aura about
If you are using a JavaScript library (such as, presumably, JQuery) why don't you say that from the very first line? And name it; for all of us to know from the beginning what are we talking about. There are tens of JavaScript libraries, and we are not suppose to know all of them by hard, are we?
__________________
KOR
Offshore programming
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Kor is offline   Reply With Quote
Old 07-04-2011, 02:14 PM   PM User | #9
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
Quote:
Originally Posted by Kor View Post
If you are using a JavaScript library (such as, presumably, JQuery) why don't you say that from the very first line? And name it; for all of us to know from the beginning what are we talking about. There are tens of JavaScript libraries, and we are not suppose to know all of them by hard, are we?
Sorry about that. Yes, I am using jQuery.

I am sorry, but I easily get very confused with all of this code.

Can't seem to get it working.
slyfox is offline   Reply With Quote
Old 07-04-2011, 02:25 PM   PM User | #10
devnull69
Senior Coder

 
Join Date: Dec 2010
Posts: 2,245
Thanks: 10
Thanked 530 Times in 524 Posts
devnull69 will become famous soon enough
I think I have a slight idea about what your problem MIGHT be ... because there are a lot of people out there that have problems with that

So I give you a short outline of the general client/server architecture with PHP/HTML/Javascript

Browser request
1. You enter a URL into the address bar. Let's say it's going to an index.php with a single parameter index.php?value=5
2. The server will receive the request, look for index.php and execute it (if found). The parameter will then be available inside the PHP script as $_GET["value"]
3. The script will output some "stuff". Usually this is HTML (plus Javascript). The web server sends the output to the browser. The PHP script terminates(!)
4. The browser engine reads the response from the server and builds an internal representation as a tree ... the so called DOM. The rendering engine traverses the tree and renders all the elements. They become visible (if set to "visible" of course) in the browser
5. Javascript code that is embedded into the server response or has to be read from an external source will be executed (sometimes immediately, sometimes only after some user interaction).
6. Sometimes the Javascript code wants to load additional external content. It does that by initiating a request to a server side script. It's mostly the same as in (1), but it happens in the "background" without the browser refreshing the page. This is called an AJAX request. Now steps (2) and (3) execute mostly the same way as before.
7. The output of the script will be available for Javascript on the current page (still without any page refresh). So it's still the code from (5) that is running. The response from the new script can now be embedded into the existing DOM. So it will be made visible.

PHP and Javascript are not "directly" connected. You can neither read PHP variables from Javascript nor Javascript variables from PHP without sending and receiving requests!
devnull69 is offline   Reply With Quote
Old 07-04-2011, 02:35 PM   PM User | #11
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
Quote:
Originally Posted by devnull69 View Post
I think I have a slight idea about what your problem MIGHT be ... because there are a lot of people out there that have problems with that

So I give you a short outline of the general client/server architecture with PHP/HTML/Javascript

Browser request
1. You enter a URL into the address bar. Let's say it's going to an index.php with a single parameter index.php?value=5
2. The server will receive the request, look for index.php and execute it (if found). The parameter will then be available inside the PHP script as $_GET["value"]
3. The script will output some "stuff". Usually this is HTML (plus Javascript). The web server sends the output to the browser. The PHP script terminates(!)
4. The browser engine reads the response from the server and builds an internal representation as a tree ... the so called DOM. The rendering engine traverses the tree and renders all the elements. They become visible (if set to "visible" of course) in the browser
5. Javascript code that is embedded into the server response or has to be read from an external source will be executed (sometimes immediately, sometimes only after some user interaction).
6. Sometimes the Javascript code wants to load additional external content. It does that by initiating a request to a server side script. It's mostly the same as in (1), but it happens in the "background" without the browser refreshing the page. This is called an AJAX request. Now steps (2) and (3) execute mostly the same way as before.
7. The output of the script will be available for Javascript on the current page (still without any page refresh). So it's still the code from (5) that is running. The response from the new script can now be embedded into the existing DOM. So it will be made visible.

PHP and Javascript are not "directly" connected. You can neither read PHP variables from Javascript nor Javascript variables from PHP without sending and receiving requests!
Arh. That actually makes sense. Thanks a lot! I understand how AJAX works now.

Although, I still can't seem to work on my page. So, I will start from scratch:


Here is my script:
Code:
 
$(document).ready(function(){
  $(".open").colorbox({ 
                   width:"50%", 
                   inline:true,      
                   href:"#inline_example1"
               });
});
How shall the above code look, if I wish to get ($_GET) a value from my url? (topic.php?id=1&quote=2) - in this case, I need to have the quote value

And how shall the URL to start the JS function look like?

The textareas ID is id="replyText".
slyfox is offline   Reply With Quote
Old 07-04-2011, 02:40 PM   PM User | #12
Kor
Red Devil Mod


 
Kor's Avatar
 
Join Date: Apr 2003
Location: Bucharest, ROMANIA
Posts: 8,478
Thanks: 58
Thanked 379 Times in 375 Posts
Kor has a spectacular aura aboutKor has a spectacular aura about
I see an error on the slyfox's approach regarding the TEXTAREA element. Despite the general belief, the TEXTAREA element has no innerHTML. Same as all the form's elements, a TEXTAREA has a value attribute/property, thus the value has to be read/write, in a way or another (using only PHP or AJAX)
__________________
KOR
Offshore programming
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Kor is offline   Reply With Quote
Old 07-04-2011, 03:07 PM   PM User | #13
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
Quote:
Originally Posted by Kor View Post
I see an error on the slyfox's approach regarding the TEXTAREA element. Despite the general belief, the TEXTAREA element has no innerHTML. Same as all the form's elements, a TEXTAREA has a value attribute/property, thus the value has to be read/write, in a way or another (using only PHP or AJAX)
So what do I need to do? Please refer to my post above.
slyfox is offline   Reply With Quote
Old 07-04-2011, 03:25 PM   PM User | #14
Kor
Red Devil Mod


 
Kor's Avatar
 
Join Date: Apr 2003
Location: Bucharest, ROMANIA
Posts: 8,478
Thanks: 58
Thanked 379 Times in 375 Posts
Kor has a spectacular aura aboutKor has a spectacular aura about
Quote:
Originally Posted by slyfox View Post
How shall the above code look, if I wish to get ($_GET) a value from my url? (topic.php?id=1&quote=2) - in this case, I need to have the quote value

And how shall the URL to start the JS function look like?

The textareas ID is id="replyText".
Is this what you are looking for?
Code:
<?php
if (isset($_GET){
$quote = &$_GET['quote'];
}
?>
<textarea value="<?php echo $quote; ?>"></textarea>
__________________
KOR
Offshore programming
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Kor is offline   Reply With Quote
Old 07-04-2011, 03:28 PM   PM User | #15
slyfox
New Coder

 
Join Date: May 2009
Posts: 17
Thanks: 0
Thanked 0 Times in 0 Posts
slyfox is an unknown quantity at this point
Quote:
Originally Posted by Kor View Post
Is this what you are looking for?
Code:
<?php
if (isset($_GET){
$quote = &$_GET['quote'];
}
?>
<textarea value="<?php echo $quote; ?>"></textarea>
Well yes. But a textarea tag do not have a VALUE attr. So:

Code:
<textarea><?php echo $quote; ?></textarea>
But that is not the problem; the problem is to get the $quote text INSIDE the textarea, when clicking on a link. (The TEXTAREA is placed in the ColorBox lightbox)
slyfox is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:18 PM.


Advertisement
Log in to turn off these ads.