I have implemented music to play throughout the website in header.phtml using html5 audio tag and user has the option to click on an icon to mute the music. The action works in the following steps:
1) Icons are wrapped under forms whose code is given below:
<form method="post" id="unmute_form" action="process_unmute.php">
<input type="submit" id="mute" name="mute" value="" style="background: url('music/mute.png')" />
</form>
<form method="post" id="mute_form" action="process_mute.php">
<input type="submit" id="mute" name="mute" value="" style="background: url('music/speaker.png')" />
</form>
2) User clicks on mute icon and form is being submitted via ajax to an external php file to set magento session with the following code:
require_once ("../app/Mage.php");
Mage::app();
Mage::getSingleton('core/session')->setMuted('true');
3) Form submission via ajax using jQuery:
$("form#mute_form").submit(function() {
$.ajax({
url: "musicFolderAtRoot/process_mute.php",
type: "POST",
data: { },
dataType: "json",
success: function(data) { }
});
return false;
});
The same logic i had already applied in a php project and it is working fine but in Magento process_mute.php file is not setting session value.
Any clue how i can call my php file from phtml file, i think my php file is unable to set session because of placing php file in the wrong directory so it is inaccessible for session (tried root/folder and app/design/frontend/base/default/template/page/html/)
OR
I need to create a magento module to have this simple session setting functionality (painful task for this small task)
Related
I am using phpgrid in a Slim Framework integration and I see all the editing and creating functionality of the phpgrid system sends the data to a file called "edit.php" that sits inside the phpgrid folder.
Is there any way that I can change that and actually route the result of the form to a different file, preferably a controller in Slim?
L.E: It's worth to mention that I am not using a DB connection to process the data. Instead, I use an API to fetch and process my data, and I feed the data to phpgrid in an array.
Google "phpgrid save local array" gives this post
Save Local Data Array Back to Server via Ajax
You can use submit the changes in jQuery ajax post to whatever url of your choice
Demo
<script src="http://malsup.github.com/jquery.form.js"></script>
<form id="admin_form">
<div>
<input type="submit" value="Submit Local Changes">
</div>
</form>
<script>
$(function() {
// bind to the form's submit event
$('#admin_form').submit(function(event) {
$(this).ajaxSubmit({
type: 'post',
dataType:'json',
url:'save_local_array.php',
data:{
langArray:[] //leave as empty array here
},
beforeSubmit: function(arr, $form, options){
options.langArray = $('#data1').jqGrid('getRowData'); //current
console.log(JSON.stringify(options.langArray));
// return false; // here to prevent submit
},
success: function(){
// add routine here when success
}
});
// return false to prevent normal browser submit and page navigation
return false;
});
});
</script>
It seams that on closer inspection to the documentation, somewhere hidden without the ability to clearly search for it, there is a method called: set_js_editurl().
This method lets you set your own URL and everything else works the same :)
Happy coding,
Ares D.
I am trying to upload a image using AJAX jquery in a Joomla MVC framework.
Below is the default.php which adds the below javascript script code
$('#icon-submit').on('click',(function(e) {
$.ajax({
url: "index.php?option=com_jsmdownload&task=imageUpload",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
alert(data);
},
error: function(){
}
});
}));
Below is the HTML code which contains a simple file box and a button
<form action="<?php echo JRoute::_('index.php'); ?>" method="POST" name="adminForm" id="adminForm" enctype="multipart/form-data">
<input type="file" id="and_36x36" name="and_36x36">
<input id='icon-submit' type='button' value='Next ->' />
</form>
Below is the PHP code in controller.php for the imageUpload task.
function imageUpload(){
JFactory::getDocument()->setMimeEncoding( 'application/json' );
print_r($_FILES);
JFactory::getApplication()->close();
}
Once I select the file and click on the button the ajax function called and the PHP function also called but the form data is not available inside.
The print_r command always prints an empty array. I don't know what I am doing wrong. I want to get the selected file and upload them into the server and return back to the browser.
I referred multiple posts and cant able to find an answer. Can someone please advice.
UPDATE 1
If I set a independent PHP file as URL then it works. For example
url: "http://localhost/test/indextest.php",
But If I set the Joomla component path with controller it doesn't work.
You have to pass the form to the FormData object, what you have is the button.
in the button click event handler this refers to the button not the form.
Select the form and pass it to the FormData constructor
new FormData($(this).closest('form')[0]),
I am doing a small php project. In this I have one page, which gets values from MySql and display it in HTML tables. Now there is generate pdf button,which generates PDF using MPDF in another php script. I need to send HTML table source code to the page containing php script to convert it into a pdf. I have used the below code to do this.
var html= $("#tblExport").html();
window.open('pdf.php?html='+html, '_blank', 'scrollbars=yes,menubar=no,height=600,width=800,resizable=yes,toolbar=no,fullscreen=yes,status=no');
Problem of above code is that, it is using GET and hence cannot send large string values to other php file.
I have tried to do this post using below code.
$(document).ready(function(){
$("#btnExportpdf").click(function(){
var html= $("#tblExport").html();
$.ajax({
type: "POST", // Methode POST or GET
url: "pdf.php", // PHP file to processing the data
data: { "html": html } // post variables that will handetover to php
})
.done(function( msg ) { // response
console.log(msg) // data retuned from php
});
});
});
Now I am stuck here. I am able to POST parameters, but how to open the php file,to which parameters are posted in a new window.
So the issue is that I want to open a new window with PDF of HTML table, on click of generate PDF button.
Please help me out. Thanks
You may need to use a form or JS.
Here is the form method.
http://www.w3schools.com/TAgs/att_form_target.asp
<form id="pdf_form" action="pdf.php" method="post" target="_blank">
<input id="pdf_html" type="hidden" name="html" value="" />
<input type="submit" value="Get PDF">
</form>
jQuery - you still need the form above, but the submit button may be hidden or removed.
$("#btnExportpdf").click(function(){
var html= $("#tblExport").html();
$("#pdf_html").val(html);
$("#pdf_form").submit();
});
Here is a conundrum that's had me stumped for the past few days. I am using a modal form in Drupal 7, so working outside of the hook_form system, trying to upload an image. The form is submitted through an ajax post, which prevents me from submitting the file along with the post. what I've done is in the ajax callback, create a new form element with the file input and then trigger a submit, posting to my module-defined page.
Original input element:
<input type="file" id="chooseImage" name"someImage" class="form-file">
js triggering submit:
$.ajax({
type:'POST',
url:$('#originalForm').attr('action'),
data: data,
success: function(response) {
if (response.success) {
$('<form id="imageForm" method="POST" action="upload/image/'+response.data.nid+'"></form>').appendTo($('#imageSubmit'));
$('#chooseImage').appendTo($('#imageForm'));
console.log($('#imageForm'));
$('#imageForm').submit(function(e){
console.log(e);
alert('freeze! hammertime...');
});
//This should post the file but it isn't...
$('#imageForm').trigger('submit');
}
},
dataType:'json'
});
The submit event shows the file properties just fine. However, on the backend, where my page callbacks end...
function myModule_image_upload($param){
error_log('number of files = '.sizeof($_FILES));
}
I am showing no files posted. I am guessing that the browser is removing the file data in the post after .submit() runs and if that is the case, I'm probably powerless to do anything about it, so I'll have to implement a separate menu within the hook system for image uploads.
Also, whatever it is that this is really doing, it seems to permanently break watchdog, forcing me to re-import a fresh dump.
Try this:
$('<form id="imageForm" enctype="multipart/form-data" method="POST" action="upload/image/'+response.data.nid+'"></form>').appendTo($('#imageSubmit'));
So you forgot to set the enctype.
Another error:
<input type="file" id="chooseImage" name"someImage" class="form-file">
Should be
<input type="file" id="chooseImage" name="someImage" class="form-file"/>
I have an HTML form that previously was only used for text attributes for users, that was all using AJAX to call a PHP controller functions via URLs to refresh page content via database and server-side calls (abridged version)
<input type="text" id="firstname" name="FIRSTNAME"/>
<input type="text" id="lastname" name="LASTNAME"/>
<input name="Submit"type="submit" value="Submit" />
This "create user" form now needs to incorporate a file uploading mechanism, for user images
<input type="file" name="userImage" />
The problem is that the form is being submitted via .serialize in the .ajax #create form submit
$.ajax({
url: 'controller.php?command=create',
type: 'POST',
data: $( form ).serialize(),
create URL calls the PHP controller echo $dmv->create(); , which is the model public function create(){ //execute database insert and execute
I have read that serialize does not make sense for files, which is true, but I also want to try to figure out how to update my existing form to incorporate file upload functionality to it
I have tried to understand the jquery.form.js plugin ( http://malsup.com/jquery/form/#file-upload ) but cannot understand how to tie it all together.
I believe what I need to do is have the file upload execute as a separate logic, then tie back with the original logic for file name , this is file storage with the unique image name stored in the database under the record, not BLOB image storage.
Let me know if I can provide any further info, and thanks to any help that can be given.
You can't upload files via AJAX. The only possibilites you have are using Flash (such as Uploadify: http://www.uploadify.com/), an iFrame, or just submitting the form. The form must have an enctype set to multipart.
<form action="script.php" method="post" enctype="multipart/form-data">
Plugins may mimic AJAX file uploads by creating a "hidden" iframe.
Example: http://valums.com/ajax-upload/
You can mimic an AJAX call by using a hidden iframe. You can even achieve a callback function and get the server response just like an AJAX call:
HTML --
<form enctype="multipart/form-data" target="workFrame"></form>
<iframe id="workFrame" style="display:none;"></iframe>
JS--
//bind an event handler to the form with the file input
$('form').on('submit', function () {
//check to make sure the user has selected an image, if not then stop the form from submitting
if ($('#userImage').val().length == 0) return false;
//bind an event handler to the `load` event for the iframe so we will have a callback for the form submission
$('#workFrame').on('load', function () {
var $this = $(this);
//remove this event handler
$this.off('load');
//get the response from the server
var response = $this.contents().find('body').html();
//you can now access the server response in the `response` variable
});
//return true so the form submits normally
return true;
});
Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.
Here is a example of what Michael is talking about. http://www.phpletter.com/Our-Projects/AjaxFileUpload/