I have a JavaScript page which loads a page via ajax into a JQuery tab.
When I try and call a function which exists in the parent page from page loaded via ajax it complains it cannot find the function.
Is this normal behaviour and does anyone have a way around this?
For example:
function test() {
My code here...
}
function openMainGridRecord(Sequence,Module) {
$('#Tabs').jqxTabs('addLast', 'View Record*', '<div id=new' + index + ' style="height:99%"></div>')
loadTabData('editrecord.php', index);
index++;
}
loadPage('mainGrid.php', 2);
My page called mainGrid.php also has javascript in it, but I would like to call a function that exists on the page above.
So I would like some javascript inside mainGrid.php to call my test() function.
Thanks
From what you describe I believe I know the issue. What is loaded in the parent page is not loaded in the page called by the Ajax request. PHP is stateless, that is to say every time a page is opened it is a fresh page with no data loaded.
When you make an Ajax request you are, in effect, opening a new page on the server. That is why you cannot access the function on the parent page.
The solution is to have a common file available to both pages (using include) and then put the function in that file. Include it at the top of the parent page and at the top of the Ajax page.
Related
Hi I have a PHP page loading in a DIV tag from a javascript function. I also have a button on this PHP page that sends information to another PHP page. I was using header to go back to the page I was on (still in the div tag) but I was wondering if there is a way to reload the original parent page. The pages are all saved in separate files so I was unsure how to do this. I have tried using Javascript such as top, window, and opener for location.reload() e.g.
top.location.reload()
window.location.reload()
and saving the function on each page as
function myFunctio(){
location.reload();
} and then calling it on each page again using top, window, and opener but nothing has worked. If I use a header it will only load the page in the DIV.
You can use them in sequence to get the result you're looking for give something like window.opener.location.reload(false); a try
I am using the Jeditable plugin to edit in place. If I use it directly on the page, the plugin works perfectly; but if I use it in the modal window, it does not work anymore. The data populating the modal comes from a PHP file via AJAX, it seems that the plugin does not load in the modal.
This is the code that ajax receives from PHP:
<div class='edit2' id='div_1'>Dolor</div>
And this is the plugin call that I make:
$(document).ready(function() {
$('.edit2').editable('http://www.example.com/save.php');
});
If i do this directly on the page, it works fine; but not in the modal.
From the description and the code in the question, it looks like the problem is the time in which you call the editable() function.
Right now, you call it when the document is ready (inside the $(document).ready() function). This is fine and will work great if the element with class .edit2 is already in the page (e.g.: when you use it directly on the page), but it doesn't work if the element is not there yet (e.g.: when you load it later using AJAX).
The solution to this issue would be to move the call:
$('.edit2').editable('http://www.example.com/save.php');
from the page load into the success function of the AJAX call, right after you have added the content into the modal. That way, .edit2 will exist when the plugin is called, and it should work normally.
I am currently working on the project that have 2 php files category.php and product.php.
In category.php file i put a link shown below.
click here
I have the following js function called on the body onload in the product.php page.
<body onload="font_select(1760,'No',239)">
When users click on the link then they will be redirect to product.php file where the body onload function is called.this function is working fine.
My question is i need to call this function only once when the user enter in product.php page.currently this function is called on page reload also.
How would i call this function only once ? Thanx In Advance.
The most efficient way will be, use Cookies
(It's a little kludgy, but you could check document.referrer in font_select)
well that's wrong, turns out at least in firefox the referrer does not change apparently when the page is refreshed.
You may want to have a look at this question, where they handle detecting refresh using a cookie, however you should know that is really just a check if the page has been accessed before so it won't work unless you also clear that cookie on detecting a click on the link from your category.php page.
Go for javascript cookies
well to track whether the function is called or not, you could use javascript cookie. Like say you set a cookie with any name, say functioncalled with value 0 initially, when user goes to product page, check this cookie. If value is 0, then call a function then set the value of cookie to 1, next time when page is reloaded the function will not be called.
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.
I am new to Zend Frame Work.
I am using $ajaxContext = $this->_helper->getHelper('AjaxContext'); for adding action contexts. I have one Index.phtml page and all other views are ajax.phtml pages. I have to do some java script methods in the ajax.phtml pages. But i didn't find a way to refer the js files in the ajax.phtml pages. I have tried adding those in the controller init and index action, using $this->view->headScript()->appendFile, though i have the reference added in the page source, none of htese seems to be working on the ajax content. Then i tried to add it in the action for the ajax page, then it is not coming in the page source itself. As far as i understood, $this->view->headScript()->appendFile will append the file reference to the layout page and for the ajax.phtml pages, the layout will be disabled.
Is there any way that i can refer my js files in the ajax.phtml pages?
You are on the right way, but where does you echo the ViewHelper?
After adding the Files with the headScript view Helper try:
echo $this->headScript();
I found two ways to resolve this issue. One is we can bound the click event of the ajax postbacked content button with a jquery.live() method. This will register the element in the DOM, even if the element is not present at the time of page load.
Another way is to reload the javascript in the success of each ajax postback using the getScript() method. In this way all the newly added elements will get registered and active. if you are using jquery dialogs, using variables, you may have to destroy those, before reloading the js.
Put this code to your Controller public function:
public function indexController(){
$this->_helper->viewRenderer->setNoRender();
$Response = $this->getResponse();
$Response->setBody(Zend_Json::decode($foo))
->setHeader('content-type', 'application/json', true);
return null;
}