How to call a Javascript function from other page?

Question

I have 5 javascript functions index.php :

1) showMsg(); //this display 50 latest messages

2) showPopUpBox(); // this I use jquery to load the textbox and send button from typingMsg.php

3) hidePopUpBox(); // this hide pop up box

4) checkNewMsg(); // this will be auto reloaded every 5 sec to check if there is new message, it will show the numbers counts of total new messages.

5) ShowNewMsg(); // this function will be called when the user click the "show new messages" button.

After a user typing message on the text box on the pop up box then after he click "Send" button, ajax will call messagePost.php to submit the message to database, as the following code :

$(function() {
$(".button").click(function() {
$.ajax({
             type: "POST",
             url: "messagePost.php",
             data: dataString,
             success: function() {
                 $('textarea.expand25-75').val('');
                 showMsg(); //this is my problem
                 hidePopUpBox(); //this is my problem too
             }
        });
    return false;
});
});

As u can see from the codes above, the function of showMsg(); hidePopUpBox(); cannot be called because the functions are not on this page, my question is How to call the javascript function from different page?

can i ask why you don't put your reusable javascript function in .js file and take refrence in each page u need to use functions from it ?? or does this functions Server Business is related to index.php page ? — Marwan
– Marwan, Commented May 3, 2011 at 11:45
How to call the javascript function from different page? and what is a different page? — epascarello
– epascarello, Commented May 3, 2011 at 11:46
Is the function visible in this scope? Is the ajax return a success. Another thing is, do the other page is can be called or are do you properly add the it in the current page? Like <script type="text/javascript" src="pageLocation"></script> — ace
– ace, Commented May 3, 2011 at 11:50

abahgat · Accepted Answer · 2011-05-03 13:27:34Z

2

You'll have to include all the functions you need in each of the pages that will use them (index.php and messagePost.php, I guess).

That is normally done by grouping all the correlated functions in .js files and then including them by using the <script> tag.

By the way, some of the other answers include, correctly, top and opener. All of the suggested options make your code work, but in general I suggest you to import the functions right in the pages that need them.

For example, it may make sense to import the hidePopUpBox() function right within the popup (which will be using than), rather than in the parent window.

edited May 3, 2011 at 13:27

answered May 3, 2011 at 11:46

abahgat

13.6k9 gold badges38 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BrunoLM · Accepted Answer · 2011-05-03 11:54:33Z

2

Try to use

top.showMsg();
top.hidePopUpBox();

top refers to the top most window object of your page. If you are in an iframe for example.

Or try opener if you are in a popup (called by window.open)

opener.showMsg();
opener.hidePopUpBox();

answered May 3, 2011 at 11:54

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Comments

David Mårtensson · Accepted Answer · 2011-05-03 11:51:15Z

1

If, as I understand, the above script is run in a popup you can reach the scripts int the base page using opener object.

$(function() {
$(".button").click(function() {
$.ajax({
             type: "POST",
             url: "messagePost.php",
             data: dataString,
             success: function() {
                 $('textarea.expand25-75').val('');
                 opener.showMsg(); //this is my problem
                 opener.hidePopUpBox(); //this is my problem too
             }
        });
    return false;
});
});

opener will always exist in a window that was opened from another window pointing back.

answered May 3, 2011 at 11:51

David Mårtensson

7,6244 gold badges34 silver badges48 bronze badges

Comments

Nicola Peluchetti · Accepted Answer · 2011-05-03 11:44:50Z

0

What do you mean with "on another page"?If they all are in index.php you should have no problem calling them. Since i see you are using jQuery, i suggest you put your javascript function outside of $(Document).ready(function(){ });

because they have to stay outside, but i don't think it's what you are saying.

answered May 3, 2011 at 11:44

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Comments

Marwan · Accepted Answer · 2011-05-03 11:54:17Z

no no i can see where is the problem i think the problem is with

$(function() {
// You Are Here Not in contact with outside script 
});

i think this is called javascript closure or some thing i think you should use instead of that the

window.onload=function()
{  
 $(".button").click(function() {
     $.ajax({
             type: "POST",
             url: "messagePost.php",
             data: dataString,
             success: function() {
                 $('textarea.expand25-75').val('');
                 opener.showMsg(); //this is my problem
                 opener.hidePopUpBox(); //this is my problem too
             }
        });
    return false;
});
}

to be in contact with other functions in same page that if i got you right

Regards

Collectives™ on Stack Overflow

How to call a Javascript function from other page?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related