Jquery div reload affects other parts of my page - javascript

so quick and to the point...
im making a delete post script for my practice cms.
When clicking on delete, i dont want to have the page reload but instead just have the div removed. To do this i do the following:
$("#postholder").load("pageurl.php?id=5 #postholder");
Now, this works fine and looks great. But it stops all of the scripts working on the page.
In my eyes, only that div should be reloaded, but it means that if i go to delete another post, i have to refresh my page for it to work again.
Where am i going wrong?
Also whilst im here, how can i change "pageurl.php?id=5" to just by the current page url.
So what can i replace it with so it works on what ever page as it just uses the current url.
Thanks <3

How about removing the DIV from the DOM?
$("#postholder").remove();

Your click handler doesn't work with dynamically loaded content. Assuming you are using jquery version >= 1.7 you can use the .on() method to listen on ajax loaded content.
$(document).on('click', '.delete', function(){
$("#postholder").load("pageurl.php?id=5 #postholder");
});

Related

Using JQuery Bootstrap in a reloadable Ajax Section

I am creating an ordering system which allows staff to record orders and track their status from ordered to dispatched. The problem that we have however is that when viewing orders, another staff member on another computer may change orders. This wont register until a page refresh is carried out.
To address this I was hoping to use this script....
http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/
I have managed to get it working great within twitter bootstrap. On slower connections, the page loads and says 'please wait while data loads' until the data is loaded.
The problem I have however is that I cannot get javascript to work within the reloading section. I was hoping to use bootstrap tooltips. The user can hover over an order id and it will popup with the order contents. It works great outside of the reloading section, but within I cannot get it to work.
I have tried loading the jquery, and bootstrap tooltip javascript within the loading section, but even this did not work. This would have made it very slow anyhow though.
Does anyone have any ideas how I can use Bootstrap Tooltips with the Ajax reloading PHP document.
Thanks
If you're going to be loading dynamic content, bind your handlers to the closest parent that doesn't change, and then add a filter to only select the elements you want to handle.
So, by why of example:
HTML:
<div id="parent">
<div id="igetinjectedwithdynamiccontent">
...
IMA BUTTON
...
</div>
</div>
jQuery:
$('#parent').on('click', 'a.btn', function(event){
// handle click event for anchors of class 'btn'
});
This will successfully bind onclick handlers to any Bootstrap buttons in the parent div, regardless of whether they existed on page load or were added dynamically.
Thanks for your help answering this question... I have got it figured now. Didn't even know what to search for before asking the question.
I could have either used an onload simulator which will simulate pressing the button. Should Work.
I opted however for instead using the selecter option which Apparently is just an alternative to the jquery 'Live'
For those who are in the same boat I was. Paste this in your page after loading JQuery.
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$('body').tooltip({
selector: '[rel=tooltip]'
});
});
} ) ( jQuery );
</script>
Sorry about the indentation .... Stupid 4 spaces thingy :)
This script will continue loading even if the content is changed.

Get HTML from a hidden portion of code in a page

The title is a little confusing so let me explain better what the problem I'm having is.
I need to extract a certain portion of HTML out of a page. This portion of code is inside of a div that "on page load" is hidden by default. You have to click on that div in order to make that portion of code appear.
Now, I need to get this code with a javascript/jquery script with either pure AJAX request to the page or YQL but the problem is: How do I "simulate" the click on that div?
How can I make that div toggle just with the code in order to access the code inside of it?
By the way, the request is from the same domain so there's no problem with cross-domain AJAX.
Thank you!
You can use Jquery .click
$("#Id_Of_the_Div_you_want_to_click").click();
As far as my understanding is if you do
$('#hiddenElementID').html() will return the contents of it or even $('#hiddenElementID').text() if its hidden or not.
But if you really must simulate a click then do $('#hiddenElementID').click()
And to toggle use your own function and do $('#hiddenElementID').hide() and $('#hiddenElementID').show()
Or use $('#hiddenElementID').toggle()
http://api.jquery.com/toggle/
Maybe you should try on Ajax success:event
function(data){
//Convert Data to jQuery Object
var element = $(data);
element.find('#HiddenDiv').show();
}
Because manipulating DOM Element's triggering Fake Event's is a bad idea.
You can simulate click events like so:
$("#div").click()
It sounds to me like you're trying to get data from another page. The data is compiled after a click event. You could try the following:
AJAX get the page with the required data
Render the page into a hidded iframe within your page
Simulate click events on the nested page to produce data
Access the bits you want and discard the iframe contents.
If I get some time later I'll try it out for myself and see if it can be done.

Dynamically change iframe's content

I have an iframe tag and I want to dynamically change it using jquery animation. So for example the iframe sits on the home page, and if i click the about link, it will load the about.html and when its ready it will slide it down using animation.
I have the basic logic for it but then came about this
problem:
When I refresh the page it loads back the content of the index.html page, and what I want is that when I refresh it, it still keeps the contents of about.html.
About
<iframe id="content" name="content" align="top" src="index.html"
frameborder="0" width="100%" height="1200px" scrolling="no">
</iframe>
this is just the most basic logic, but I need help on how do I achieve the refreshing part/
and what if i dont include them in the same page but I still want to animate the page transitions. so when the users clicks a link to a new page, it will load it, and then animate it.How can I achieve this. Because recently I saw a jquery plugin callen LocalScroll and they achieve this effect, but i couldnt get it to work for new pages
Your reference to the jQuery plugin LocalScroll is on the right track. In fact, if you could implement it properly I think it would solve your problem.
Anchor-based navigation, as used in this plugin, jQuery Mobile, and other places, will update the window.location object and also be reflected in the browser's address bar so that, when an explicit page refresh occurs, the hashed location is preserved.
The answer, then, is to have a script which can parse this local link from the address. Here's a generic JavaScript code block to demonstrate this:
window.onload=function() {
var URLParts=window.location.toString().split('#');
if(URLParts.length>1)
var lastPage=decodeURI(URLParts[1]);
else
return false;
if(lastPage)
iframe_load(lastPage,'content');
}
function clear_last_page(location) {
var URLParts=location.split('#');
if(URLParts.length<=1)
return location;
URLParts.pop();
return URLParts.join('#');
}
function iframe_load(url,targetID) {
document.getElementById(targetID).src=url;
var location=clear_last_page(window.location.toString())+'#'+url;
window.location.href=location;
}
How it Works
When the window onLoad event is triggered, the URL is searched for anchor (hashed) links. If found, we will assume that this is a reference to a page and so then pass it to iframe_load().
This function does two things. First, it points your target inline frame to the page passed via url parameter. Second, it points the parent frame to a fictitious anchor, which will be preserved even after the page is refreshed.
Therefore, when you refresh the parent frame, that anchor text is grabbed, parsed, and used to re-load the last loaded inline page.
The function clear_last_page() is simply a helper function that prevents additional anchor links from being appended to the URL.
Demonstration
Visit this URL:
http://gocontactform.com/stackoverflow/dynamically-change-iframes-content/
Click the link "Page 2" to see the change. Then refresh the page.
Noteworthy
Be advised that this solution technically takes over the normal function of anchoring. So if you attempt to use anchor links normally on the page, you may get undesirable results.
You are forced to rely on iframe_load() for any links bound for that inline frame, instead of what you modeled in your question (traditional linking with a target attribute).
I might also suggest that you define no default src attribute inline. Rather, you could add to the onLoad handler a call to iframe_load('page1.html','content') and that will prevent the unnecessary attempt to load the default page when you are refreshing with anchored links in the address.
There are also other ways to accomplish what you are asking. But I believe that this solution is easy to understand and implement.
Hope that helps!
You can use the following to change the src attribute of the iFrame:
$("#content").attr('src', 'http://mysite.com/newpage.html');
Oops, looks like I misread the question.
If you want to slide it down, you can bind an event handler to the load event (jQuery doc) to do something when the frame loads.
$("#content").hide();
$("#loadLink").click(function() {
$("#content").hide();
$("#content").attr('src', 'http://mysite.com/newpage.html');
});
$("#content").load(function() {
$(this).slideDown();
});
In this example, the iframe is hidden when you click the link, and when it is ready, it slides down.
Demo
Edit: still misread it!
To save the state of which page is last shown in the iframe, you can use HTML5 localStorage.
In the load event of the iframe save the page that it's currently showing.
localStorage['lastPage'] = "about.html"
and then load it back using localStorage['lastPage'] on page load.
Updated demo showing both sliding and keeping the page after refresh.
Not possible. When you refresh a page, your browser is supposed to get the page from the server, dropping all JS data.
History API can help, but only for the newest browers.
Whenever the page loads you need to check something to know what the last src iframe loaded. By default, no browser can know this. One way to do this is to change the hash of your page when hit the click, and whenever page loads, you check if exists this hash and trigger some link with the hash.
I write this: http://jsfiddle.net/estevao_lucas/revsg/4/
Like said Michael, History API can help you.

Having an issue with jquery functions not working properly

I've been trying to get this little project I'm doing finished, but for some reason it is not properly working.
The issue is when I first visit the page and click the first link that appears in the main section it displays the popup box as wanted. Now when I click another day, for instance sunday and try to click the first link it doesn't do anything. And if I click back to Saturday the first link also doesn't do anything anymore.
It seems something is not properly activating or maybe a command is overwriting and not allowing it to work like it does when you first hit the landing page. I'm sorry if this is confusing but any help would be much appreciated.
The website is pouronline.com
that's where i do all my testing.
Thank you
You need to use the .live function.
So in your popup.js replace
$('a.poplight[href^=#]').click(function() {
with
$('a.poplight[href^=#]').live('click',function() {
Swap this:
$('a.poplight[href^=#]').click(function()
with this:
$('a.poplight[href^=#]').live('click',function()
You need to use a future-proof event observer because once you reload those anchors by changing the day in this case, the initial binding is lost. live() means to apply the binding to currently existing nodes as well as nodes that are added to the DOM at a later time.

Handle browser back button with Javascript / different approach possible by using anchors?

I'm currently struggling with a good navigation on a website using Ajax calls and unobstrusive JS. I'm catching the click event on links, load the content, attach it to a div and then return false. This works quite well and also allows Google to crawl the site with speaky URLs.
But I didn't know how to deal with the browser back button. I found this solution to catch the event when the user clicks on the back button:
http://www.bajb.net/2010/02/browser-back-button-detection/
It works quite well. But I also want the back button to work normally when the user found the website via a link and wants to return to the previous page (I don't want to trap anyone).
When I thought about it the best way would be to use anchors. The normal back button supports them and you can go back in history without reloading the page (/#1 <- /#2 <- /#3 etc.)
It would work like this:
Use normal URLs in the link, but catch the click event
When user clicks, load content and attach it to a DIV
Change the window.location, using an anchor (e.g. 'domain.com/#products/women-clothing' with window.location="#products/women-clothing";)
When the window.location changes, get the anchor, read out the path and get the content via ajax, attach it to a DIV
Only the last part isn't really clear for me and I could need help here.
Finaly, my question: Does this make any sense?
Thanks!
Just add the href to window.location.hash after loading the content into a div. Then you can use that back button detection script to load what ever is in the hash.
I solved the problem by using this great jQuery Plugin: History.js
Thanks!

Categories

Resources