I looked on many posts but I've never found out such a context like the one I have so I'm requesting you some help.
Here is my development context :
I had in mind to build a single-page based PHP Application and I then chose to set-up a global container page embedding a side navbar-menu on the left for navigation control and an iframe on the right for related content.
The iframe is updated following the navigation navbar to display the selected content to the user.
First, I'm not saying that this is the right way to do this kind of PHP Application and would be ears opened to different way to achieve this.
For now, it's working out but I rose up a problem since I would like to reload only A PART of my content iframe. Indeed, there is a div box inside it that should be updated when the rest shouldn't (or at least it looks strange during navigation).
I was wondering if setting-up a listener on the iframe to look on mysql database updates and then trigger a JS function would be memory cost efficient ?
What would you guys think ? Maybe there's a different way to solve this problem (I was thinking of a big AJAX rendering instead of an iframe for example) ?
Thanks a lot for your answers,
Martin
Okay so for those who would face the same situation I ended up trigerring an ajax function in my child iframe from the parent main page via the instruction document.getElementbyId("myIframe").contentWindow.myAjaxFunction() that run the search script in background (with post parameters from the parent page).
Then I got the reload of only a section of the iframe.
Related
We provide live chat service to our customers. customer just copy some code and put in their footer. then they can have video chat, cobrowsing and many things..
but problem comes when user switch from page to page. so we have resume functionality as well. but thats not robost solution.
So i've come to two solution.
1. Iframe solution
i'll give client a some.html file which he'll need to upload to their root url, then upon video chat and cobrowse we load that page in some.html's iframe and chat appear in some.html
so that work well. chat box apprear seamlessly no page reload effects came in. and as its on same domain i can access all contents of iframe.
2. Another hack solution (not implemented yet, looks good solution)
i was thinking that instead of redirecting user to new page (some.html)
i should clear all contents of current page and load same url in one iframe within the page.
i think that will work well. but i affraid that some client might be using complex js based web app. so if i remove complete body from their page they might have problems.
as much as i know i can remove all dom nodes with their events handlers as well. but is their way to clean js runtime. so all js objects will destroyed and removed from scope so no longer run.
so is there a ways to clear any page completely with all its html and associated java-script as well. means reset page to blank.
Finally i found that there is no way to reset page.. but got another way to make it done.
upon need we can redirect user to same page with query string that identity that its reload for iframe, we put small bit of another code at head which remove all dom before loading dom, css, js.. and create just one iframe of same url.
thus it allows me, have user see no change in url, user browse website as normal without any problem and my chatbox always be there in same state across all pages.
will make it live soon on tagove.com
Why don't you empty the HTML page using empty() function of jquery first,
Then remove/update the link i.e.<script src="...."></script> so that the HTML has no dependency on that javascript and that way it won't be able to Modify the DOM.
And then try to build a javascript program to remove any file in the folder which is isolated(No calling, No dependency, no connection whatsoever)
I am building a single page scrolling MVC website that needs to be able to move to different sections of the page when a link is clicked, preferably without refreshing the page, just scrolling to said location on click event. My question is whether this would be some JavaScript or whether I can do so with just some regular and some C#.
As Alexei Darmin said in a comment try to use #id's in divs and refer to those id's in your links, that's the tipical way to do it and you shouldn't have any problem unless you load the content dinamically, in that case you should implement a method in your angular control that force the async load to, at least, that point and move the user to it.
For single Page application, Angular Js is more efficient and you can achieve the performance also. And also if you use this script, your app is like Web Api,you can control your resolutions for different devices.
Angular Js is best , so you can use in your app. hope it will useful to you. Thanks.
just refer its useful to you :
Link1
Link2
I've got a problem where I've got loads of child pages, and 1 main page that houses these subpages. The problem with that, being that the experience the application is trying to deliver needs to be nice and unified.
I have a menu that targets the iFrame to open URLs there, and I've got a bit of JS parent.document.title = document.title;
that changes the parent's title, but one more thing I want to try and do, is to change the URL, similar to how Facebook does. If I'm on a friend's profile, the top and bottom bars don't move, but in Facebook's case it's an Ajax load - and the profile shows, and the URL changes to their profile ID without actually shifting from 1 page to another.
I've read in a couple of places that the parent.document.url value is read only to child frames, but I'm not very sure and this is something I've wanted to do for a while now!
Summarizing:
Is there any way to change the parent's URL through a child iFrame? Similar to the code pasted above?
Thank You!
Much appreciation for any answers :)
If I am not wrong, you are trying to simulate a back button effect. You can do this using window.location.hash Read: Location Hash for better idea.
I am attempting to have a link load an article from my domain in to an iframe. I understand that it is usually easy to link using:
Google
But when it comes to Iframes I am having difficulty formatting the code correctly so that it will display inside the iframe.
This leads in to my next question. If this is easily remedied then is it possible to also execute code that will fill in the URL of an anchor in the same mouse click.
Finally, in that same mouseclick would you be able to execute code similar to:
$('#abc').click(function() {
$('#xyz').load('content.html');
});
In order to populate a sidebar with information from a second link?
Thank you for taking the time to read over this. I am sorry if it is truly elementary, but this is my first bona fide webpage, and my limited knowledge is really delaying the execution of my ideas.
Special thanks to wdm for allowing me to progress to this stage of questioning by answering my earlier concerns.
To target your iframe, change to:
Google
for the 2nd part, the above thing can be reused instead of using jQuery.
I was searching for a script or at least a code snippet but haven't really made any progress. Anyway, I'm looking for a script that works like a simple pagination javascript but it should be accessible by linking from anywhere in the document and by calling it with the URL (e.g. on www.abc.de/default.html#thirddiv the third page of the pagination is displayed). Further, the contents should be loaded upon request (when the user clicks on the link and enters the specific page of the pagination), so that cookies, that have been set or deleted in the same document earlier can be used later without reloading the entire page. Something like that is used on Facebook for calling contents and loading them.
I've found a script on CSS Tricks called BetterBlogroll but I don't really get my mind into this. A pagination script from DynamicDrive is already working very well on the page but my problem is that there should be running three of them on the same page and as I said, the content should be loaded upon the user's request.
The script I'd need does not has to be with loads of CSS, the best way would be plain javascript and only the required CSS and HTML data. Anything else just disturbs. If anyone can help me out here, I'd be very thankful.
Check out Ryan Bates's Railscasts #174 and #175. These two are not rails specific, and explain this well.