ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.
Related
hi i am using ajax for loading pages, and also for back button facilities. everything is worked fine except one. Well i narrowed down my problem but cant get any solution. my main page has a container div where i load most of the pages without reloading the whole pages like in gmail.
as for pjax it also loads tags for seo friendly url.
but there is a div in the main page contains "<?php echo $pagename; ?>" it gets the pagename from the loaded page and showed it in the div. well it worked only if the browser reloads. otherwise when i open pages continuously it does not change, it shows the previous one.
so how do i fix this issue. i am thinking about refreshing the div that contains the pagename. so how do i do that?
PHP code is always executed on the server side, so this div won't change when you use pjax. You need to change the pagename div manually as you do with the content div. You can do this with 2 pjax calls, or by splitting the ajax response into pagename and content (but maybe then pjax is not the right solution).
You can send a ajax request to the file that contains echo $pagename and display the response(which would be $pagename) using javascript.
Since you are using jquery, you can use $.ajax for this purpose.
Here is the code
$.ajax({
type = "POST",
url = "your-php-file-path",
}).done(function(response){
$("#div-id").html(response);
});
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 am using below script on a form (say, form-A) to load another form (form-B) in thickbox, with values passed by controller.
First, in form-A, i am selecting one option from dropdown "customerID", then "Add Project" button (with id 'addProject') becomes visible, on clicking which, a thickbox appears with form-B in it. Here, in form-B, i want to pass selected customer. How can I do that?
I tried below code, and tried to access the $_GET['custID'] in controller's manage_project function, but it is showing blank. But when i am alerting the url1 (i have commented below), ID is coming there.
Below code is in form-A view file.
('#addProject').click(function(){
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox&custID='+$('#customerID').val();
//alert(url1);
tb_show('Add More Project',url1,'');
})
According to documentation at (http://thickbox.net/):
Important to Remember: Add all other query parameters before the
TB_iframe parameters. Everything after the "TB" is removed from the
URL.
So, try add custID before TB_iframe. And then you will be able to operate with a variable in the script, such as access them via $_GET['custID']. For example:
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?custID='+$('#customerID').val() + '&TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox';
i would like to use ajax to retrieve information from a php page that will update "onchange" of a select drop down menu. (<select>). i used jquery to check if it is changed
$('#names').change(function() {
//code to get the info into the div comes here
})
all id like to do is work the page "check.php" with "?v=valueOfNamesGoesHere"
and return the information into the div names "output"
I have tried
$('#names').change(function() {
$('#output').load('check.php?v=' + $('#names').val());
});
without success. I have checked the "check.php" itself with the information that is supposed to get passed into it. for example "check.php?v=john" and i got the information needed in the page itself. (when i go directly to mysite.com/check.php?v=john).
what am i doing wrong?
Thanks!
use
$('#names').find(":selected").text()
instead of $('#names').val() as it is a dropdown..
I am using CodeIgniter's pagination API. I found some issues when I click on particular page: it shows controller and pages in URL. I dont want to show all the details in URL.
I have large number of search criteria.
e.g.
http://localhost/myapp/search/pages/2&fromAge=25...... so on
Is there any way to handle it using POST method rather than GET?
Please help.
If you want to use the pagination with POST, there is a simple way to do that with the standard CI pagination and without Ajax. You can perform a POST instead of the GET
when one click on the pagination links.
For this you need an hidden field in the form (named page in my example) which contains the page number and you need to set the action attribute of the form with the link before submitting it (it is necessary for the pagination class to compute the current page). Find below a sample code in jquery :
// bind onclick event to the pagination links
$('.pagination a').click(function () {
var link = $(this).get(0).href; // get the link from the DOM object
var form = $('#form1'); // get the form you want to submit
var segments = link.split('/');
// assume the page number is the fifth parameter of the link
$('#page').val(segments[4]); // set a hidden field with the page number
form.attr('action', link); // set the action attribute of the form
form.submit(); // submit the form
return false; // avoid the default behaviour of the link
});
On the server side, you read the page number from the
POST field named page to perform the db query with pagination and you build the pagination links with the usual function
What about using AJAX?
http://tohin.wordpress.com/2008/08/12/codeigniter-ajax-pagination/
http://codeigniter.com/wiki/AJAX_Pagination_with_CI_Pagination_Library/