Does anyone know how to refresh a particular div in a page, i dont want to load whole page but one certain div. is it posible?
While I'm still in the process of learning myself, I think what you're essentially talking about is AJAX. The jQuery library gives you a number of ways to make AJAX calls, some high level, some low level. Search the jQuery home page for .load() for a high level solution and .ajax() for a lower level solution.
No its not possible, but you can use ajax to update content on the div(not exactly refreshing).
Edit: you can use simple javascript to complete an ajax request. In ajax a request is sent to the server which sends some data back which can be used to update the html inside the div.
www.w3schools.com/ajax/default.asp
It's called jquery. It's a javascript library to make many functions easier to write with less code. Ajax is a part of it and what you use to make Http requests to get dynamic content into a div.
If you dont want to reload the whole page then you may use jQuery Ajax.But using this you can only change the content of div tag without refreshing the whole page
Ajax is your best bet, but it isn't something exclusive to jQuery. if youre not using jQuery anyway, you will find it more efficient to write the scripts yourself instead of loading the entire jQuery library along with your site.
It's Very Easy to Do with jQuery and PHP (AJAX), you can load new value from database or anywhere from webpage you want and also you can set the time interval do check out this link:
http://phphere.blogspot.com/2013/12/how-to-refresh-particular-div-in.html
Here is a way, tell me if it works:
<html>
<head>
<script>
$(document).ready(function(){
$.post(
"anotherpage.php",
{"field":"value"},
function(r){
if(r!==''){
$(".replace").html(r);
}
});
});
</script>
</head>
<body>
<div>Some text</div>
<div class="replace">Default Text</div>
</body>
</html>
Related
We have web application which sends REST API request and change the DOM after request is completed. It is all done in jQuery with AJAX calls. But the problem is, all of the dynamic parts of a page has a slight delay to get updated on page refresh. It's like you first see the static elements and then immediately it gets updated. It is noticeable quite a lot.
We wait for $(document).ready so I think that is the issue. Is there a better way of updating HTML before it gets rendered so the user won't notice the change?
Not to mention, most of the data are cached in sessionStorage so it could be read without REST call.
I searched a little bit but I'm not quite sure, do I need a client-side template engine for this? Like Mustache.js?
I don't think it it possible to completely avoid delays caused by ajax requests. You could possibly put some request out of $(document).ready and place it in a head section:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// some javascipt here, $.getJSON etc.
</script>
</head>
In this case you have to look out for selecting elements that are not rendered yet (this could cause some unpleasent errors).
Finally I would recommend you to use some loading gif and animations of loaded elements in order to increase user experience. Take a look for example at AngularJS and its animation features here: https://docs.angularjs.org/tutorial/step_12
If all you're worried about is the noticeable change when the page updates, you could put everything inside your body tag inside a container div and give it display:none;. Display a loading image on page load then show the container div when the Ajax request is complete.
We're running over a problem here. We have a website which shows a header, content and a footer. Now, when clicking on a link we want just a part of the site (content-part) to be refreshed to save some traffic. The header and footer should stay as they're. We tried to use the following script for that:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
Well, the script is not doing great on our site. Any other JS-Code does not get executed at all. The GET-Tags in the URL are not displayed aswell. Everything else works with that script.
Do you have knowledge about any other alternatives to this script?
Regards,
I agree, Ajax is the way.
You can include jQuery.
Have a look at these links.
http://api.jquery.com/jQuery.ajax/
In particular jquery load() function
$('#result').load('ajax/test.html');
a little jsFiddle
http://jsfiddle.net/james_nicholson/c6dpn/5/
please note: $("#content").load("a/html/page/that/should/be/on/your/server");
.load(); <- needs to have a local page, PHP and or HTML will do.
http://api.jquery.com/load/
When you say 'Any other JS-Code does not get executed at all', do you mean at any time from when the page loads initially, or only when the content part is refreshed?
For dynamic adjustment in javascript i would recommend http://angularjs.org/ or http://knockoutjs.com/ , try this out and work through tutorials and you will see how easy it is to change everything without refreshing.
I'd say you only need AJAX if you get some data from a database. Otherwise it's enough to work with AngularJS or KnockoutJS. Have a look at it!
Regards
The reason I don't want to use ajax to do this is because the part I want to refresh is actually a commenting plugin implemented by other. I just put a snippet of script they provided in my html code and it shows a commenting part under my articles. As it's not a live commenting one, I want to add a refresh button next to it to enable users to just refresh the commenting part to get the latest comments without need for reloading the whole page.
Therefore, I think maybe iframe is an option for me. But the problem is I need to specify the src attribute of iframe. I don't know what value I should use because all I have is just a snippet of script. Can someone give me any idea on this?
By the way, the code snippet is as follows:
<div id="uyan_frame"></div>
<script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async=""></script>
Just create a html page with the script you talked inside about and use this file in the iframe src attribute.
You can put the snippet above in an html file like this
<!DOCTYPE html>
<html>
<body>
<div id="uyan_frame"></div>
<script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async=""></script>
</body>
</html>
And then use that file as the src of your iFrame, which you can refresh using javascript.
That said, just because you can do something doesn't mean you should do something. This is a really hacky way of doing what you're trying to do. A few alternative options:
Understand what the script you're using is doing, and work with it. Judging by the name of the script and div in the snippet, it may be creating an iframe to begin with. If thats the case, why not just figure out what that iFrame is called using your browsers debug it and refresh it manually, or modify the script to do so?
Use a live updating framework- This may not be possible for you, I don't know your constraints, but there are plenty of great commenting frameworks out there that do live updates. For instance Disqus comes to mind. Other examples are facebook comments or you could embed a reference to an external site like branch
Use Ajax - I'm a bit unclear on whether this is your script that you're writing, or a 3rd party script. If it is your script, then use the generally accepted methods for doing this type of work, unless you have a really great reason not too. You'll get better support from others, you'll gain more generally applicable experience, and for the most part, best practices gain that name for a reason. People use "ajax" methods for live updating pages because its effective and useful. Frames have become much less common on the web because they're clunky and make it difficult for different parts of the page to interact. If you don't have a great reason not to use the common practice, its usually your best bet.
You could do this :
var iframe = document.getElementById('your_frame_id');
iframe.src = iframe.src;
set the iframe src to its value again, this will cause the frame to refresh, and will work with cross domain frames
I am making a simple static app in HTML5.
What I am doing now is that I have one single long page in which I have thousands of lines of code.
I am currently doing this to go to another page:
<div data-role="content">
<label for="heading">History</label>
History
Remote Control
</div>
...and then I have module_a & module_b as follow...
<div id="module_a" data-role="page">
//content
</div>
...and same for module_b
Both divs are in same page so my page looks very bad.
What I want to is that I need same functionality but I dont want my divs that is module_a and module_b in the same page.
I want to create different pages for that and then load it as I am going so that my main page looks clear.
If I gather what you're asking correctly you want AJAX. When you click on one of the links/buttons you need a javascript code which will send a request to get the HTML of another page and load it into place on the page.
The best way to do this is to use jQuery. It has this really helpful function called load() which does EXACTLY what you need. http://api.jquery.com/load/
It looks like this:
$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');
Hope that helps.
This should work:
Put each of your modules in their own file.
Amend the links to the modules so that they link to the module files.
Replace the modules in your original file with an <iframe> tag.
Add onclick event handler to each link that sets the src attribute of the <iframe> to the URL of the module’s file (and returns false, so that the link isn’t followed).
However, you’ve got more scope for doing stuff with the HTML that you load if you go with AJAX as suggested by #ThomasClayson.
Have you tried AJAX?
$.ajax({
url: 'seperate_page.html',
success: function(data) {
$('#module_b').html(data);
}
});
From how I understood the question, this will solve your problem.. hope it helps
I have a issue:
while i call a inline script (wich uses jQuery too) from another page with ajax - it seems, that jQuery is no more defined (?), and I cannot use any of jQuery functions, that should be applied (according to inline script) to content.
It's basically a news list, which holds links to particular news items. I prefer using inline-script at this time, because I won't need this functionality elsewhere.
$.ajax({
url: href,
cache: false,
success: function(html){
$('#fancy_ajax').append($(html).find('.mainContentPadded'));
}
});
As you can see, I'm simply calling a part of another page and appending its contents to page.
When I load full page (not the part of it) - jQuery works as expected (that's why I came across the idea, that it needs to be "rebinded").
Thank you!
So if I understand your question correctly you have some JavaScript contained within the html variable ? If so it will not work, because JavaScript that is retrieved from an AJAX hit is not executed by the browser due to security risks.
I recommend you include the necessary javascript code in your page that is initiating the the Ajax request so that it is already available when you append the new content.
*edit...
monksp added a great link as a comment that shows how to have jQuery do exactly what you want.
Here's also some code to do the same but manually:
<html>
<head>
<title>Test JavaScript JSON</title>
</head>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.2');
</script>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('testjs.json', function(json){
$(document.body).append(json.html);
eval(json.js);
});
});
</script>
</body>
</html>
Here's the content of testjs.json:
{"html":"<p class=\"newelement\">Click me</p>","js":"$(\".newelement\").click(function() { alert($(this).text()); });"}
And finally there are a bunch of existings plugins and other things to include javascript dynamically. I used YUI Get in the past: http://developer.yahoo.com/yui/3/get/
I'm confused by the question, I think. The bit of javascript that you have posted, is that loaded into the page via ajax? Like, you load the page in a browser, then something happens and that javascript gets loaded into the page? That won't work, because any javascript that gets loaded that way won't get executed.
I'd recommend loading it in the originating page's javascript if possible. If not, you could take the results of the ajax request, and walk through it looking for script tags, and eval() their contents as part of your success function. It's not really efficient (or super safe, make sure you absolutely trust where the loaded contents is coming from), but it'll get the job done.