Situation:
I have an html page with a PHP function on it. The function echoes the elements of an array in a foreach loop. The data of the array is used in each individual echo.
foreach ($DB->query($sql) as $v) {
echo $v['specificData'];
}
All new elements are added to the array with ajax.
Problem:
I have been using location.reload to refresh the page each time a new element is added so it show ups right away. The problem is that that solution isn't elegant/efficient at all.
Question:
What are my other options? The easiest, the better.
Appreciate any help and advice ;)
P.S: I already thought about jquery.append() but I'm hoping someone has an easier idea xD
Refresh just the part of the page that needs refreshing. You can make it smooth by doing something like this in jQuery upon successful AJAX callback:
$(element).fadeOut(function(){
$(element).html(ajax_response_here).fadeIn(); // .html() or .append() whichever makes more sense
});
If you already using ajax to send the data back to the server its should be hard to use it to update the dom as well. If you want an efficient way then probably this is the way to go. If you want to avoid jQ for updating the site, you can simply write a basic js function.
function appendTo(parent, content) {
parent.innerHTML += "<p>"+content+"</p>";
}
or
function appendToById(parentId, content) {
appendTo(document.getElementById(parentId), content);
}
Related
I thought this would be really simple but obviously after a couple of days trial and no success I have to ask the people to help, looked everywhere.
right im basically creating a php template without much guidance on the foundation 4 framework with is a responsive framework. Now this framework is rather basic and so to add page transitions ive had to use jquery to do what i believe is an ajax call to take "content" from another page and display it on the template page index.html
for which I am currently using the following
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1000,loadContent);
$('#load').remove();
$('#main_wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show(1000,hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
</script>
NOW before i changed over to using ajax and jquery i was operating the menu "active" class and the page name with a simple variable set on each page in the first line listed as $page='' and then the page name
now that im loading the content with ajax even if i include this variable in the content of the new page it will not update in either the or the menu title
im very sorry i dont write things correctly im new to this forum thing
thank you for the help in advance
:) I prefer someone to explain what i need to do and how to do it rather than just copy and pasting code as im a learner :)
You probably want to load the page and parse the result in jQuery to get the new page’s <title> tag and set the requesting page’s <title> tag.
The only thing I’d ask is: why are you doing this? Are you just wanting AJAX page navigation in your website instead of the traditional propagating navigation?
I am only able to answer one part of your question due to extreme confusion, so:
First off, here's why your url changes:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
You are modifying it with that line. That line, however, has an interesting little quirk:
attr('href').length-0
at the end. Why the -0? That would make no difference. I'd clean it up.
Outside of that, I'm incredibly confused with what you're asking so let me try rephrasing it and you can tell me what I'm missing.
You want to have a user click on a navigation link, and load that link's content via an AJAX call using jQuery, and then replace the content on the page with the newly loaded page, correct?
When you say "right on top main page i have variable $page = then the page name", what do you mean by "main page"? Do you mean it's a line of text in HTML? Part of a script that you haven't included here? Part of your PHP code?
And then you say "ive tried including the tag in a div that changes along with the above content"- what is "the tag"?
By reading this 4 or 5 times I could barely discern the above understanding of what you're trying to do.
Please make heavy edits to you question- it's incredibly hard to understand.
Lastly, why are you trying to replace the browser's functionality of a user clicking a link and loading content? That's what the browser is for. The browser also, conveniently, has a loading indicator in the url bar usually (or some form thereof), letting the user know the content is still loading.
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
So first off, look at the jQuery doc for the load method:
http://api.jquery.com/load/
Your issue is that it is calling for three arguments, and you are passing two. If there are multiple arguments listed and you only want to pass SOME of them, you still need to supply a null value for the ones you want to "skip". Try changing your call to this:
function loadContent() {
$('#content').load(toLoad, null, showNewContent);
}
You'll notice that I'm passing "null". If that doesn't work, pass an empty string, like this:
function loadContent() {
$('#content').load(toLoad, "", showNewContent);
}
That second argument is data to be passed with the request. It's the THIRD argument that you list as your callback, which as far as I can tell is where you're making the mistake.
I have a form at the bottom of a long page, if a user fills out the form but it doesn't validate the page is reloaded in the typical codeigniter fashion:
$this->load->view('template',$data);
however because the form is way down at the bottom of the page I need the page to load down there like you do with HTML anchors. Does anyone know how to do this in codeigniter?
I can't use the codeigniter
redirect();
function because it loses the object and the validation errors are gone. Other frameworks I've used like Yii you can call the redirect function like:
$this->redirect();
which solves the problem because you keep the object. I've tried using:
$this->index()
within the controller which works fine as a redirect but the validation errors are in another method which is where the current page is loaded from:
$this->item($labs)
but when I use this it get stuck in a loop
Any ideas? I've seen this question a lot on the net but no clear answers. I'm researching using codeigniter "flash data" but think it's a bit overkill.
cheers.
I can't personally vouch for this, but according to this thread if you append the anchor to the form's action, it will work.
CodeIgniter helper:
<?php echo form_open('controller/function#anchor'); ?>
Or vanilla HTML:
<form method='post' action='controller/function#anchor'>
If you were open to using Javascript, you could easily detect a $validation_failed variable and appropriately scroll. Or, even better, use AJAX.
Another option is to put the form near the top of the page?
Ok, as far as I understood your problem, it isn't much related to the back end(codeigniter). You want the form at the bottom of the page to be 'what-users-sees-on-page-load' (since you mention anchors).
Now, what you can do is, you can set delimiters for your validation error messages using:
echo validation_errors('<div id="bottom_form_error">', '</div>');
Using jQuery ScrollTo, do:
$( function() { $('#bottom_form_error').ScrollTo(); } );
And, the user will be scrolled to the errors at the bottom of the page. Don't forget to include jQuery too.
Anchor hash fragment click is different - it is scrolling at ∞ speed.
I hope that is what you wanted.
P.S. I am ignoring what you said below this line:
Does anyone know how to do this in codeigniter?
as I felt it is not really relevant to the question.
EDIT:
OK, I believe I've found a way around the issue using the info posted by #ManseUK along with #Johan's comment. As a n00b I can't answer my own question but I've added an explanation below the question in case it helps anyone else out.
I am re-writing part of an e-commerce solution which was written by
another development team some years ago. In the new version, we are
experimenting with shortening the user journey using Ajax but doing so
gives JavaScript errors and causes some functions to fail. Dev URL is
here:
http://cognition.thelightbulb.co.uk/type-18/general-purpose-lamps-and-bulbs/craftlight-daylight
The errors appear once the dropdowns have been selected and the
product displays.
The errors are displaying most notably in IE7:
Error: 'frm.qty' is null or not an object
Error: 'qty.value' is null or not an object
I believe this is where the problem is coming from:
var frm = document.frmOrder;
var qty = frm.qty;
In the lines above, frmOrder is the name of the form and qty is
the name of the input for product quantity.
Compare that to http://cognition.thelightbulb.co.uk/product-54 where
the product loads without the Ajax selection process and you'll see
that the functions work correctly.
I suspect that the problem is to do with the fact that var frm =
document.frmOrder; is not working due to the way it relates to the
DOM when loaded with Ajax.
I am using innerHTML=xmlhttp.responseText as the Ajax method. Is
there an alternative way to define var frm so that it will function
properly when loaded with Ajax?
EDIT:
Using the info posted by #ManseUK along with #Johan's comment, I added another argument to CheckMinQty(minorder) so that it now looks like this...
function CheckMinQty(minorder,qty)
...where qty is passed to the function on an onclick event as document.forms['frmOrder'].qty.value
I then moved the whole function out into a separate .js file. It's maybe not the best approach but it still feels tidier for the Ajax call to just return workable HTML which CheckMinQty can use rather than bringing in a whole load of <script> and then trying to run it.
Thanks for all the suggestions and I'd welcome any comments about the approach/solution outlined above.
Change this
var frm = document.frmOrder;
to this
var frm = document.forms['frmOrder'];
That will give you a handle to the form
document.frmOrder refers to the element with id frmOrder on the page, which happens to be the form on this page. Just try to get the correct form-element as the variable there.
Though the Manse's solution might work, use a more sensible way and assign an id to the form and since you're using jQuery anyway, retrieve the form with var frm = $(#formid); Not only is it easier to write, it's much more easier to read by you and everybody else.
When loading script via AJAX, you don't have DOMReady event anymore. In other words, when you want to execute your script on AJAX load, you should use self-invoked functions.
Wrap your ajax-loaded script inside a function like this:
(function(){
// Do what you want to do here.
})();
See if that solves the problem?
Related directly to this post, I am having trouble implementing some sound advice given from #sean, because as you can see on this page:
http://www.onestopfasteners.com.au/checkout.php - I have wrapped the form tags around the table element, but the form just doesn't seem to be working, and nothing ever gets "POST"ed either. I've changed the code around abit to experiment, but haven't found a solution, and no search anywhere has proven to be useful yet.
I'd appreciate any help at all. I'm completely baffled!
Thanks!
P.S. I thought that maybe the fact that I am wrapping form elements around dynamically generated content could be why the form isn't working, but that doesn't make much sense to me and, I've done it before, so that can't be it, can it?
Code:
I know, it's long, apologies in advance. :)
<?php
// (c) code removed ;) problem solved - thanks to everyone who helped!
?>
I think your problem is with:
function submit() {
document.myform.submit();
}
Try:
function submit() {
document.getElementById('ct_form').submit();
}
It looks like you are using jQuery in the page so you could also use:
function submit() {
$('#ct_form').submit();
}
Your using javascript to submit the form, but you are referencing document.myform which doesn't exsist.
try this instead.
document.getElementById('ct_form').submit()
// do sumbit first form of document
document.forms[0].submit()
document.getElementById is not necessary here. document.myform relies on NAME attribute of FORM element, by the way
Thank you for looking at my issue, hopefully you can help me out as I'm an not well versed in writing JavaScript functions and am relatively new to using jQuery...
Anyways, I need a way to use jQuery's ajax call to asynchronously call a php script which will return a value and update the value in a header element.
Anyone know of the proper way to go about doing this?
jQuery:
$.post('url_to_script',{"anyData": "that is needed"}, function(data){
$('#headertarget').text('data');
});
PHP:
$anyData = $_POST['anyData'];
function getAnswer ($inp){
//logic goes here
return "a string of some sort";
}
echo getAnswer($anyData);
exit;
It will put any text you send back to the client into the heading element.
For the specific subject you said I would go here. The same website LearningJQuery has tons of other nice examples.
I'd like to add also:
Visual Jquery
JSbin to try and practice with jQuery in a browser
Firebug I hope i use Firefox and Firebug togheter during development: Firebug add a console and dom, net, inspection tools (and a lot more actually).
jQuery enlightement that is a good and very cheap e-book I enjoyed a lot
Lot of tutorials from the jQuery official documentation with a big list of other resources.