[eluser]dippy[/eluser]
hello.
i have a content slider on my site using the easySlider plugin
i am now trying to call a controller when the next button is clicked without the page refreshing of course.
i did this with using a form and it works fine. but id like to know if this can be done without a form??
here is what i did for the one that works using the form.
Code: $("#feedBackForm").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "'.site_url().'/contact/feedback",
data: str,
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
if(msg == \'OK\')
{
result = \'<div class="notification_ok">Your message has been sent. Thank you!</div>\';
$("#feedbackFields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
return false;
});
this is what i have started for the content slider.
Code: $("#listingSlider").easySlider({nextId: \'listingBtn\', nextText: \'Next Listing\', prevText: \'Previous Listing\', prevId: \'plistingBtn\'});
$("#listingBtn").click(function(){ });
Questions:
How can i call a controller without serializing a form and using POST? can it be done?
Do i have to use a form to pass a variable through?
[eluser]attos[/eluser]
You can post without using a form. You do not need to serialize the form either, or send anything back to the server.
You should call the ajax method on the click event of the slider. Your code should look like this:
Code: $("#listingSlider").easySlider({nextId: \'listingBtn\', nextText: \'Next Listing\', prevText: \'Previous Listing\', prevId: \'plistingBtn\'});
$("#listingBtn").click(function(){
$.ajax({
type: "POST",
url: "'.site_url().'/contact/feedback",
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
if(msg == \'OK\')
{
result = \'<div class="notification_ok">Your message has been sent. Thank you!</div>\';
$("#feedbackFields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
});
[eluser]dippy[/eluser]
[quote author="attos" date="1253902898"]You can post without using a form. You do not need to serialize the form either, or send anything back to the server.
You should call the ajax method on the click event of the slider. Your code should look like this:
Code: $("#listingSlider").easySlider({nextId: \'listingBtn\', nextText: \'Next Listing\', prevText: \'Previous Listing\', prevId: \'plistingBtn\'});
$("#listingBtn").click(function(){
$.ajax({
type: "POST",
url: "'.site_url().'/contact/feedback",
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
if(msg == \'OK\')
{
result = \'<div class="notification_ok">Your message has been sent. Thank you!</div>\';
$("#feedbackFields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
});
[/quote]
OK thanks for the reply!
how about if i want to send an client_id through to the controller when the click event of the slider happens?
how would i send that id? using data: param?
basically i want this to happen. when the click of the next button happens the javascript is sending an id into a controller which is pulling an address to be plotted on a google map api. without a page refresh. the slider is holding each client info in <li> tags.
thanks in advance.
[eluser]attos[/eluser]
You are correct. To pass a parameter to the controller you should add a 'data' element to the ajax call. The trick is that it has to be a javascript object.
Lets assume you some how get the id into a variable, called id.
Your ajax call should look like this (plan text, no code highlighting, I noticed that highlighting the code chops off the <?php and ?>  :
Code: $.ajax({
type: "POST",
url: "<?php echo site_url()?>/contact/feedback",
data: {'id' : id },
...
Then in your controller you should be able to retrieve the id from the input object:
Code: $id = $this->input->post('id');
and call the model with something like:
Code: $this->model_name->some_function($id);
[eluser]dippy[/eluser]
[quote author="attos" date="1254249935"]You are correct. To pass a parameter to the controller you should add a 'data' element to the ajax call. The trick is that it has to be a javascript object.
Lets assume you some how get the id into a variable, called id.
Your ajax call should look like this (plan text, no code highlighting, I noticed that highlighting the code chops off the <?php and ?> :[/quote]
so if i wanted to just include a .js script to the view the php wont render will it?
i have to add the js to lets say: $data['extraHeadContent'] =
is there anyway around this? i try and use external js when im building a full site with ajax calls.
any thoughts on this?
other than that i got it going. thank you.
[eluser]attos[/eluser]
PHP does not render the js, it's the server.
Now, about including your external files there are several ways of doing this.
One is having your js files under a directory under the web root. In this case your directory structure would be:
Code: web_root
|
+- js
| +- (All your javascript files)
+- index.php
+- system
+- application
|
In this case you would be able to use the following in your view:
Code: <script type="text/javascript" src="/js/YOUR_JS_FILE.js" />
Another possibility is to have your external files under your application's directory:
Code: +- index.php
+- js
| +- (All your javascript files)
+- system
+- application
|
In this case you would need to load the uri helper in your controller and you can use the following in your view:
Code: <script type="text/javascript" src="<?php echo base_url() ?>js/YOUR_JS_FILE.js" />
You can do the same with css files.
I hope this works.
[eluser]dippy[/eluser]
Awesome thanks.
this is how im doing it now:
i took the app folder out of the system.
so it looks like
Code: webroot
|
+- application
+- system
+- css
+- js
+- index.php
and i use the
on another note. say i have a form and i want to send ALL form data into the controler through the ajax
is this possible? right now all i am doing is sending one field value to the contorller. id now like to send all form fields.
do i use 'document.Formid' to send all form data into the controller?
thanks again for all your help!
[eluser]dippy[/eluser]
[quote author="dippy" date="1254429931"]Awesome thanks.
this is how im doing it now:
i took the app folder out of the system.
so it looks like
Code: webroot
|
+- application
+- system
+- css
+- js
+- index.php
on another note. say i have a form and i want to send ALL form data into the controler through the ajax
is this possible? right now all i am doing is sending one field value to the contorller. id now like to send all form fields.
do i use 'document.Formid' to send all form data into the controller?
thanks again for all your help![/quote]
[eluser]BrianDHall[/eluser]
Just a quick runby note about using PHP variables in JS files - you can actually set your .js files on your server to be parsed as PHP, OR you can actually use CI to produce the JS file for you. So you might link your js file simply as mysite.com/javascript_controller/function/extra_parameters, then in that special controller you pass the extra parameters, such as an id or whatever, then put your javascript in a View that your javascript controller will load up and feed back to the browser. Then you can freely embed PHP code in your view, which will be parsed by the server and served up just like any other js file to the browser.
[eluser]dippy[/eluser]
gotcha.
now instead of passing variables through like so:
Code: var locations = document.joinForm.locationCheckBox.value;
var website = document.joinForm.website.value;
$.post(base_url+"join/processJoin", { 'locations' : locations, 'website' : website },
function(data){
alert(data);
}, "json");
is there a way to send all data from the form to the php controller that will take all the form elements and process them into a database?
i can send one over at a time like the above but i was trying document.formName but that just kept sending back a [object HTMLFormElement] in the alert.
is there a special way i should be handling the form elements in php once i send them over using the document.formName ??
|
