The following code display a page loaded with ajax when the page is loaded. However, I don't know how to load PHP within the ajax file. Can anyone help please?
/* <![CDATA[ */
// call fancybox
function openFancy(){
setTimeout( function() {$('.fancybox').trigger('click'); },0);
}
// create cookie on button click
function dontShow(){
$.fancybox.close(); // optional
$.cookie('visited', 'yes', { expires: 30 }); // expiration in 30 days
}
$(document).ready(function() {
var visited = $.cookie('visited'); // create cookie 'visited' with no value
if (visited == 'yes') {
return false;
} else {
openFancy(); // cookie has no value so launch fancybox on page load
}
$('.fancybox').fancybox({
scrolling : 'no',
width : '100%',
fitToView : true,
closeBtn : false,
padding : 0,
margin : 20,
locked : false,
scrollOutside : false,
closeClick : false,
helpers : { overlay : {
closeClick: false,
locked: true},
}
});
}); // ready
/* ]]> */
Try this:
For the link (HTML)
<a id="fancybox_ajax" href="overlay.php"></a>
For the fancybox's setup:(JS)
$("#fancybox_ajax").fancybox({
scrolling : 'no',
width : '100%',
fitToView : true,
closeBtn : false,
padding : 0,
margin : 20,
locked : false,
scrollOutside : false,
closeClick : false,
helpers : { overlay : {
closeClick: false,
locked: true},
},
//This is what you have to add
ajax : {
type : "POST",
//This is optional if you want to pass some data
data : 'key=value'
}
});
Good luck! ^^
Related
I'm running a Wordpress Woocommerce-Shop with an infinite scroll plugin to automatically load the next set of products on my shop page.
There are some variable products with dropdown menus, which are displaying the price after selecting the attributes (default woocommerce function).
Unfortunately this function only works on the initial page Load and breaks on products which loaded with the infinite scroll after scrolling down.
So I guess I must reinitialize the js scripts which are responsible for the function again after each infinite page scroll. The infinite scroll plugin has the following
part (function(newElements)..) to initialize functions after loading new elements. Any Idea (if possible update safe) how to reinitialize the woocommerce scripts for variable Products again? I guess it is at least the add-to-cart-variation.min.js
if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';
$masonry.infinitescroll({
navSelector : '#navigation',
nextSelector : nextSelector,
itemSelector : '.product',
prefill: true,
bufferPx : 900,
loading: {
msgText: '',
img: '',
finished: function() {}
}
}, function(newElements) {
// Initialize again
});
}
So i solved the problem. Hope this helps others to.
The most secure and almost "update save" way to make the variable products dropdown menus working, is to load the add-to-cart-variation.min.js after loading a new pair of products again. Please focus on the // Initialize again part:
if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';
$masonry.infinitescroll({
navSelector : '#navigation',
nextSelector : nextSelector,
itemSelector : '.product',
prefill: true,
bufferPx : 900,
loading: {
msgText: '',
img: '',
finished: function() {}
}
}, function(newElements) {
// Initialize again
// if wp is installed in a subfolder
// $.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
$.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
});
}
UPDATE
A even better way with caching the script file too! The getScript() is calling the jQuery.get() witch is a shorthand Ajax function of
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
So by calling the getScript() you make an ajax call, and the jQuery did not keep any kind of cache of your files. To cache the file too use the following
if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';
$masonry.infinitescroll({
navSelector : '#navigation',
nextSelector : nextSelector,
itemSelector : '.product',
prefill: true,
bufferPx : 900,
loading: {
msgText: '',
img: '',
finished: function() {}
}
}, function(newElements) {
// Initialize again
$.ajax({
type: "GET",
// if wp is installed in a subfolder
// url: "../sichere-anwendung/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js",
url: "/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js"),
cache: true
});
});
}
On selectionchange I am setting the new value but when it focus out the setValue change.
here is my code :
var ms=$('#mydiv').magicSuggest({
useCommaKey: true,
hideTrigger: true,
placeholder: 'Search here',
allowDuplicates: false,
data: '/getData.php',
ajaxConfig: {
xhrFields: {
withCredentials: true,
}
},
valueField: 'name',
renderer: function(data){
return data.full_name;
},
resultAsString: true
});
$(ms).on('selectionchange', function(e, cb){
var response = cb.getValue();
var respone_ary = response.toString().split(',');
if(respone_ary.length > 1){
this.removeFromSelection(cb.getSelection());
this.setValue(respone_ary);
}
});
For Example : In response I am getting "xyz,abc" then I want to set it as two different bobble like this "xyz" "abc" .
It's get set but when I click on other filed it get change to "xyz"
Thanks in advance
I´m developing an application using CodeIgniter and JQuery.
I have read here jqgrid error message on delete and here jqGrid error message from server side exception some issues about this problem but the fact is that does not work for me.
In my database I have set some business rules in form of index, checks, etc. I need to customize the "error Status: 'error'. Error code: 500" that the jqGrid returns when I have those types of errors.
I´d appreciate any help.
Here is my jquery grid code.
<script type="text/javascript">
var base_url = 'http://localhost/sp/';
var site_url = 'http://localhost/sp/index.php';
var url = '';
$(document).ready(function() {
var grid = jQuery("#newapi_1351019084").jqGrid({
ajaxGridOptions : {type:"POST"},
jsonReader : {
root:"data",
repeatitems: false
},
ondblClickRow: function(id){
dtgLoadButton1();
return;
},
rowList:[10,20,30],
viewrecords: true
,url:'http://localhost/sp/index.php/assigment/getData'
,editurl:'http://localhost/sp/index.php/assigment/setData'
,datatype:'json'
,rowNum:'13'
,width:'800'
,height:'300'
,pager: '#pnewapi_1351019084'
,caption:'Control de asignaciones'
,colModel:[
{name:'username',index:'username',label:'Usuario' ,align:'left',width:300,editable:false,edittype:'text',editrules:{required:true} }
,{name:'StoreName',index:'StoreName',label:'Tienda' ,align:'center',width:200,editable:false,edittype:'text',editrules:{required:true} }
,{name:'Users_idUsers',index:'Users_idUsers',label:'Usuario' ,align:'center',width:100,hidden:true,editable:true,edittype:'select',editoptions:{value:":Select;5:tienda1;6:tienda2;17:tienda3;18:tienda11",size:10},editrules:{edithidden:true,required:true,integer:true} }
,{name:'Stores_idStores',index:'Stores_idStores',label:'Tienda' ,align:'center',width:100,hidden:true,editable:true,edittype:'select',editoptions:{value:":Select;1:EA001;3:EA003;4:EA005;5:EA006;6:EA007;7:EA008;8:EA009;9:EA010;10:EA011;11:EA012;12:EA013;13:EA015;14:EA017;15:EA018;16:EA019;17:EA020;18:EA021;19:EA022;20:EA002;21:EA000",size:10},editrules:{edithidden:true,required:true,integer:true} }
,{name:'SurrugateTurn',index:'SurrugateTurn',label:'SurrugateTurn' ,align:'center',width:100,key:true,hidden:true,editable:true,edittype:'select',editoptions:{value:":Select;1:1;3:3;2:2",size:10},editrules:{hidden:true} }
] })
jQuery("#newapi_1351019084")
.jqGrid('navGrid',
'#pnewapi_1351019084',
{view:false,
edit:'1',
add:'1',
del:'1',
close:true,
delfunc: null ,
search:''
},
{ recreateForm: true,
width : 400 ,
beforeShowForm : function(form) {
},
closeAfterEdit:true }, // edit options
{ recreateForm: true,
width : 400,
closeAfterAdd : true,
beforeSubmit : function(postdata, formid) {
var mensaje = '';
var resultado = true;
return[resultado,mensaje];
}
}, /*add options*/
{mtype: 'POST'} /*delete options*/,
{sopt: ['eq','cn','ge','le' ] ,
multipleSearch: false ,
showOnLoad : false,
overlay:false,mtype: 'POST'} /*search options*/
).navButtonAdd('#pnewapi_1351019084',
{ caption:'', buttonicon:'ui-icon-extlink', onClickButton:dtgOpenExportdata, position: 'last', title:'Export data', cursor: 'pointer'}
);
;
});
</script>
Best regards and thanks for your time,
Assuming the server returns a user-friendly error message with the HTTP 500 response, you can simply to this:
...
{ recreateForm: true,
width : 400 , //removed the empty beforeShowForm callback
errorTextFormat:function(data){
if (data.status == 500)
return data.responseText; // You may need to do some HTML parsing here
}
closeAfterEdit:true }, // edit options
...
Through an ExtJs form I am uploading a file for processing in php (csv file in this matter).
The processing all works fine without errors or anything. And as far as I know, all of the other requirement for a proper response are met.
Return message = {success: true}
Response header Content/Type = text/html
Status = 200 OK
However ExtJs keeps showing my WaitMsg instead of going to my success of failure functions
Here is my form:
var form = new Ext.FormPanel({
id : 'mailinglist_form_import',
labelWidth : 210,
fileUpload : true,
border : false,
url : '/plugin/NewsletterManagement/mailinglist/import',
items : [{
xtype : 'fieldset',
width : 560,
border : false,
autoHeight : true,
labelWidth : 215,
defaultType : 'textfield',
defaults : {
width : 307,
labelStyle : 'font-weight: bold;'
},
items : [{
fieldLabel : t('Name') + ' *',
name : 'mli_name',
allowBlank : false
},{
xtype : 'textfield',
fieldLabel : t('File') + ' *',
name : 'file',
inputType : 'file'
}]
}]
});
The button:
var saveBtn = new Ext.Button({
text: t("Save"),
iconCls: 'pimcore_icon_save',
handler: function() {
form.getForm().submit({
waitMsg: t('Saving...'),
success: function () {
var tabpanel = Ext.getCmp("pimcore_panel_tabs");
Ext.MessageBox.alert (t('Message'),t('Data has been saved'));
form.getForm().reset();
grid.getStore().reload();
tabpanel.activate(gridTabId);
tabpanel.remove(tabId);
},
failure: function () {
Ext.MessageBox.alert (t('Message'),t('Saving data failed'));
}
});
}
});
The PHP file contains an echo:
echo "{'success': true}";
Any help is greatly appriciated.
Greetz,
XpertEase
Open console and see the error. If you dont's see both of your alerts -- then it's some error in code, in extjs side. Understand it, fix and then report back.
I have a jQuery fancybox that takes the content from an iframe, here's the link to popup the box:
<a class="action_btn recommend_btn" act="recommend" href="recommend.php">Recommend</a>
and here's the code for the fancybox:
$(".action_btn").not(".save").click(function() {
$.fancybox({
'width' : 560,
'height' : 530,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'href' : $(this).attr('href')
});
return false;
});
now I would like to post something to this recommend.php, so I can use this attribute/value in recommend.php, how can I do this?
One way I can think of is to store a session in the page prior to hyperlinking, but doesn't seem right.. seems like there should be a better way to do this
You should still be able to use the _GET http variable I think so:
Click
Then in recommend.php use $_GET['some_variable']. Unless fancybox does something crazy with iFrames.
since you already are using jQuery and possibly want to do this on the fly use .post().
$(".action_btn").not(".save").click(function() {
$.fancybox({
'width' : 560,
'height' : 530,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'href' : $(this).attr('href')
});
// example uses a json object to pass data, change here to what you need.
// will also accept jQuery objects like so:
// $.post('recommend.php', $('#myData').serialize());
$.post('recommend.php', { name: 'John', time: '2pm' } );
return false;
});