I need to be able to load a Drupal node via ajax, which I was able to get working using the "Ajax Link (Renderable Array)" from the Example module. The example module code does the ajax call and response processing automatically, but I want/need to be able to do it manually...how would I go about doing this?
I'm able to make the ajax call using jQuery and I get back a valid json response so the server side is working. Can I used this json response and call something in Drupal's ajax.js library to process the response or can I use ajax.js to make the call and therefore process the response automagically?
Thanks!!!
what i did, when i faced the same problem is as follows:
i added the following anchor to my page:
<a id="some-id" class="use-ajax" href="" style="display:none;" >you cannot see me</a>
and since the anchor has the use-ajax attribute i know it is added to the Drupal.ajax array.
next, in my javascript code i manually preformed the ajax call like this:
jQuery.ajax({
type: "POST",
dataType: 'json',
url: "THE_URL_TO_YOUR_MENU_CALL",
success: function (data, textStatus, jqXHR) {
Drupal.ajax['some-id'].success(data, textStatus);
}
});
and it worked for me.
i think that what you are missing is the Drupal.ajax['some-id'].success(data, textStatus); line of code in your code.
hope i have answered your question...
Related
I have a CakePHP 3.x app with some APIs being called from AJAX.
On AJAX I call the url like so:
url: 'user/id/' + id,
method: 'get',
dataType: 'json'
// ...
Etc..
My url is http://localhost:8090/users
So the url on ajax is like
http://localhost:8090/currentpage/users/id/
But for some reason sometimes the url changes to http://localhost:8090/users/id/
What should I change?
What is happening?
This is happening because of your action(parameter) in URL.
Here are some examples so you can understand it better.
Let consider we have a link to every page of our project.
Click Here to add a new user
This link will create different URL depending on your current URL
Current URL URL generate by LINK
localhost/products (here index is the method) localhost/users/add
localhost/products/add localhost/products/users/add
localhost/products/edit/1 localhost/products/edit/users/add
To fix this issue, use a "/" at the beginning and provide the path from your webroot
I think the other answer is correct.
On how to solve it, what I commonly do is save the webroot as returned from CakePHP in a javascript variable. By doing this in the header of the template file it will be available everywhere:
<!-- src/Templates/Layout/default.ctp -->
<head>
<script>
var webroot = <?= $this->request->webroot ?>
</script>
</head>
When you then want to create a Ajax call, use this URL as generated from Javascript:
url: webroot + "user/id" + id //...
Now the call will be as expected, regardless of where your application is placed on the webserver.
I'm trying to add an item to shopify, without any page refresh or redirect with:
$.ajax({
type: 'POST',
url: 'https://xxx.myshopify.com/cart/add.json',
dataType: 'jsonp',
data: 'quantity=1&id=234234234',
success: function () {
// show stuff
}
});
But chrome says:
Resource interpreted as Script but transferred with MIME type text/html: "https://xxx.myshopify.com/cart".
(index):1 Refused to execute script from 'https://xxx.myshopify.com/cart/add.json?callback=jQuery21304121434052940458_1422539760164&quantity=1&id=234234234&_=1422539760165'
because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I've tried other ways, like instead of jsonp do json, but then I offcourse get a CORS warning.
Is there any way to change the expected MIME type?
It's strange because doing:
$.ajax({
type: 'GET',
url: 'https://xxx.myshopify.com/cart.json',
dataType: 'jsonp',
success: function(data) {
// get stuff
}
});
DOES get met the shopify store data object.
I realize there is no real official shopify javascript API, and it seems they REALLY don't wan't you to remotely add stuff to the cart without either refreshing your page or redirecting.
To be clear, when I try to use their example:
<form id="shop" action="http://xxx.myshopify.com/cart/add" method="post" >
<input type="hidden" name="id" value="234234234" />
<input type="hidden" name="return_to" value="back" />
<input type="submit" value="BUY STUFF" />
</form>
It will refresh the page to /#,
I tried e.preventDefault, but that doesn't submit the form offcourse.
Their iframe embed doesn't have any option to not redirect.
Look, one possibility would be to create a 'mock' shopping cart on the site 'locally', then in the end send it in one request, and redirect to the store so people can finish their order, but there must be a better way.
Lastly I looked at: http://mayert-douglas4935.myshopify.com/pages/api
But the problem is that that's made for use within a shopify shop, so within the domain, so changing all the:
url: '/cart/add.js',
lines of that API's ajax params into:
url: 'https://xxx.myshopify.com/cart/add.js',
it won't work because it uses 'json' instead of 'jsonp', and changing that will result in the same above MIME type problem.
Anyone know about some simple custom code that allows for an item to be added to the cart? That's pretty much all I need. Add to cart from remote, just an async request and response...
UPDATE:
I tried /change.json instead of /add.json, now the MIME type error is gone, but the ajax request gives back an error event. HOWEVER, the changes are made... (and it gives an complete event back, with a .statusText:'error') So, I could use this to build my remote side of the store, but you can understand, this is not really a solution.
Here's a tutorial on how to do this:
http://docs.shopify.com/manual/configuration/store-customization/page-specific/cart-page/adding-to-the-cart-from-a-remote-website#javascript
From that page, here's a code sample:
BUY NOW
And there is a demo here: http://11heavens.com/testing-shopify-add-to-cart-functionality-from-another-website-while-staying-put
Edit: In order to do this without the redirect, you could use a Shopify app proxy with an iframe. Here's a demo: http://joshubrown.s3-website-us-east-1.amazonaws.com/add-to-cart.html
I am trying to integrate popup plugin from https://github.com/webtechnick/CakePHP-Popup-Plugin. I just followed exactly as said on the above link. I am trying to load a element in popup hence i used this $this->Popup->link('click me', array('element' => 'my_element'));
but when i load on the browser i get this following error which i have no clue about it and i have been trying to fix this for last two days and pls help me resolve this error
SyntaxError: illegal character
...eldset>\r\n\t<a href=\"#\" onclick=\"$('#popup_1').show(); return false;\">click...
and any other possible solution to this would be appriciated.
Ok then see how implement webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/
Now read the implementation from the above link, now what you have to do in cakephp is given below:
Step 1: Add these two lines in your layout file, lets say you are using default layout then inside body tags add:
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
These two lines will be used to create popup div and blanket
Step 2: Now You will see css-pop.js file there is one function
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
So you have to make one ajax request to get HTML of popup as example is shown below
$.ajax({
url: "test.html",
context: document.body
}).done(function(data) {
$('#popUpDiv').html(data);
popup('popUpDiv');
});
data would be html code which is a response of your ajax request.
Step 3: Create url of ajax request, lets sat ajax_signup.html
echo all the html part followed by exit.
Now you get an idea what I am trying to explain!
First, I am using spring webflow and some spring javascript to make ajax calls easier.
As of right now, I am having ajax make a call into webflow to display the appropriate fragment.
So I am attempting to use Spring.AjaxEventDecoration for my ajax needs for my application. However, I am having some trouble with this method and webflow and from what I can tell, there are very few examples available to work with.
On a side note, I am not using a form or a select box. I thought I would mention this since every example I've found has used a form/form submit with onlick event or select box with onchange event.
Main question: if I have a method in my webflow that has parameters coming from my ajax, can I actually pass in the parameters from ajax to webflow?
Code:
<transition on="disassociateProperty" >
<evaluate expression="dService.disassociateProperty(requestParameters.currentPId ,currentD)" result="flowScope.currentD" />
<render fragments="PList" />
</transition>
So, when I look at the ajax call in firebug, it has the parameter I'm passing in (currentPId) and the correct eventId.
I put a debug point on the first line of the disassociateProperty method and it tells me currentPId is null.
So I would assume requestParameters.currentPId in webflow isn't pulling the currentPId from the ajax call.
Is this expected? Could anyone explain and give an example?
I would appreciate any help provided.
Adam
If you think that the problem comes from ajax call, it would be helpful if you write here the ajax call, so we could check if the call is being done correctly.
You could try to pass the form serialized in the data parameter when doing the ajax call. Also, do not forget to add the ajaxSource parameter in the URL. Hope this help.
HTML example:
<form id="formId" method="post" action="${flowExecutionUrl}&_eventId=disassociateProperty">
<input type="text" id="currentPId" />
</form>
jQuery Example:
$.ajax({
type: "POST",
data: $("#formId").serialize(),
url: $("#formId").attr("action") + "&ajaxSource=true",
...
});
I have a page with a lot of buttons on it. I need to get data from database when I click on each of them . I need to implement some jQuery styling for which I need to use AJAX to do it. How do I pass the url of the button to the "ajax.php" page(where my processing is done and where I can use my GET method to retrieve data from the database).
A few points of clarification:
First, jQuery can be used for communication via AJAX, and also for "styling" (that is, controlling layout elements and interacting with CSS. However, styling and AJAX do no intersect. AJAX is used to allow a page to communicate with a server. Styling controls how the page looks and acts.
Second, buttons do not have URLs. You can give them IDs, classes, or names, but not URLs. As noted in the comments, you can wrap your button in an anchor tag (<a>) to easily assign an action to it.
If you are already comfortable with building HTML forms and passing data to server-side scripts for processing, I suggest that you check the jQuery website for helpful documentation and tutorials.
If you are unfamiliar with HTML forms, there are a great many tutorials available via your favorite search engine.
If you are unfamiliar with server-side scripting, PHP is a language that is easy to pick up and learn quickly.
Well as your buttons are actually links you can do something like following
HTML:
<a class="btn" href="myurl.php?id=2"></a>
Jquery:
$('.btn').click(function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
type: 'GET',
success: function(data){
alert('server respond with' + data)
}
});
})
<a class="button" href="page.html">do some ajax</a>
<script>
$('.button').click(function() {
var btn_url = $(this).attr('href');
$.get('ajax.php', {url: btn_url}, function(data){
alert('done');
});
return false;
});
</script>
Since you talk about "buttons" and "urls" I think you mean <a>-tags styled as buttons, because <button> does not have something like a href-attribute. <a>-elements should not be abused as buttons - that's what <button> is for, actually. You can apply some information to the id or class-attribute though, e.g.
<button class="button" id="page">do some ajax</button>
Then you could gather the 'url' with
var btn_url = $(this).attr('id')+'.html';
So have a look at jQuery.get (or jQuery.post, if you like) and try to use XHTML in the way it was meant to ;)