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.
Related
Is there a way to refresh only a part of a website using ajax or a similar technique? The visitor must not notice the refresh.
What I want to do is refresh the <head></head> container of a website only one time after the website has been fully loaded using ajax?
Generally speaking, yes, you can modify <head> after the page has loaded. This can be used to quietly load remote scripts, or similar actions.
Without more specifics of what you're trying to do, here's some generic example code:
window.onload = function() {
//Send your ajax request, with success callback ajaxCallback
}
function ajaxCallback(response) {
//Parse response to create HTML tags you want inserted into <head>
var newHTML = response.newHTML;
document.getElementsByTagName("head")[0].appendChild(newHTML);
//If you want to completely replace the contents of <head>,
//you can use .innerHTML instead of .appendChild
});
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 have a page which I redirect from it to another page (let's call it "middle page") with parameters in the query string. and I want to redirect from the middle page to some other page in another domain without losing the referral url (the query string of the middle page). my project is MVC C#.
I've tried:
- redirecting in the server side -> didn't work since the query string of the middle page didn't have a chance to change in the client side.
- redirecting in the client side through java script: location.replace/ location.href -> didn't keep the referral url.
- redirecting in the client side with Meta tag refresh -> didn't work.
I did see that if i place a link () in the middle page, clicking it would keep the referral url. so my last resolution was placing a javascript that automatically clicks on the link on document load-> it didn't work as well.
anyone has a solution for this?
I've solved it by using a timeout before I auto-click my link.
however I don't like this solution. does anyone have a better solution?
Try to submit a form using javascript: (Edited version)
So, we have a file "first.html" which calls "middle.html" with parameters:
<html>
<body>
<script>
document.location.href="middle.html?a=1&b=2";
</script>
</body>
</html>
Now "middle.html" makes form-submit to another domain:
<html>
<body>
<script>
var myForm = document.createElement("form");
myForm.method = "GET";
myForm.action = "http://google.com";
document.body.appendChild(myForm);
myForm.submit();
</script>
</body>
</html>
I checked it in FF with Firebug where under GET-request i can see HttpHeader "Referer" which equals to "middle.html?a=1&b=2"
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...
Im working on a production interface and im need to load some images. Im working in jsp mainly but using AJAX to request the images.
The AJAX itself works, if I create an HTML page with a simple:
<div id='holding'><img id='myImage' src='images/image.png' alternate='check' width='64' height='64' /></div>
and request it through the AJAX method the image loads and displays fine by setting something's inner.HTML to the response. I want to be able to change the source path dynamically so in asp i've created:
<%
x=Request.QueryString("x")
y=Request.QueryString("y")
Response.Write("<div id='holding'><img id='myImage' src='"&x)
Response.Write("'alternate='"&y"' width='64' height='64' /></div>")
%>
Now when I call my ajax with a query string I no longer get my image loading.
var src = 'images/image.png';
var alt = 'check';
var queryString = "?x="+src+"&y="+alt;
xmlhttp.open("GET", url + queryString, true);
xmlhttp.send();
Ideas?
I have discovered the problem here. Besides a few typos and syntax errors here and there the major issue was that ASP was not installed on the server I was accessing, we use a lot of .asp scripts but they are all tied to a different server.
One issue in particular that would follow to any language is that my queryString contained a '/' that I had not 'escaped'. This has been replaced with '%5c'
Since my work is in JSP anyway I decided to rebuild this using that, what follows is the scriptlet I used to load my images, saved as a .jsp and written in regular java, I call this with my AJAX method and it works beautifully:
<%
String source = request.getParameter("src");
String alternate = request.getParameter("alt");
out.println("<img border='0' src='"+source+"' alt='"+alternate+"' width='128' height='128' />");
%>