Node JS load jade over page - javascript

I have a webpage; when a button is pressed, I want it to load a new Jade file. So the page doesn't change, but the display does.
The outcome is to have a static menu on the left but have the body of the page change, based on the button pressed.
I have this code for the buttons but I'm not sure how to continue. Any and all help would be appreciated.
this.newForm = function()
{
var that = this;
$.ajax({
url: '/formBuilder',
type: 'POST',
data: 'newForm'
success: function (data){
}
});
}
this.openForm = function()
{
var that = this;
$.ajax({
url: '/formBuilder',
type: 'POST',
data: 'openForm'
});
}
this.deleteForm = function()
{
var that = this;
$.ajax({
url: '/formBuilder',
type: 'POST',
data: 'deleteForm'
});
}
}

Related

How can I return a response from a call in order to open xml file using jquery

I want to open xml file with jquery , but when I want to display the value of open outside the function , I have an undefined error .
Here the code :
$(document).ready(function () {
var open ;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv =function(xml) {
$(xml).find("mestickets").each(function () {
open=($(this).find("nbopenTickets").text());
console.log(open);//It works
});
}
})
console.log(open);//undefined
That is what Ajax does, the processed data will be handled in the success handler.
What you can do if you really want to is create another function where you can process your data.
$(document).ready(function () {
var open = null;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv = function (xml) {
$(xml).find("mestickets").each(function () {
open = $(this).find("nbopenTickets").text();
openData(open);
});
}
});
function openData(open) {
console.log(open);
}
});

cart data not update in shopify using ajax

I have a Problem in Shopify.
I want update cart quantity on button click using ajax but it will give error like
{"status":404,"message":"Cart Error","description":"Cannot find variant"}
Here is my ajax code,
$('.adjust-plus').click(function(){
var qty = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').val();
var varient = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').attr('data-id');
jQuery.ajax({
type: 'POST',
async: false,
url: '/cart/update.js',
data: { updates: { varient : qty } },
dataType: 'json',
success: function() { location.href = '/cart'; }
});
});
currently in both variable value come so no any error in value.
but when id add code like:
$('.adjust-plus').click(function(){
var qty = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').val();
var varient = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').attr('data-id');
jQuery.ajax({
type: 'POST',
async: false,
url: '/cart/update.js',
data: { updates: { 15082896588867 : 2 } },
dataType: 'json',
success: function() { location.href = '/cart'; }
});
});
then cart updated successfully.
Firstly, remove async: false as it's very bad practice and not needed here as you're using the success callback properly.
The issue itself is because you cannot use variables as the keys of an object with the syntax you're using. To get around this you can use bracket notation, like this:
$('.adjust-plus').click(function() {
var $quantity = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity');
var qty = $quantity.val();
var varient = $quantity.data('id');
var data = { updates: {} };
data.updates[varient] = qty;
jQuery.ajax({
type: 'POST',
url: '/cart/update.js',
data: data,
dataType: 'json',
success: function() {
location.href = '/cart';
}
});
});

Post files with AJAX + jQuery with input element ID

I am trying to POST form data with AJAX + jQuery using the code below
<script>
$("#submit1").click(function(){
testSubmit(event);
});
function testSubmit(event) {
event.preventDefault();
var data = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
data.append("file_"+i, file_data[i]);
}
var other_data = $('#form_id').serializeArray();
$.each(other_data,function(key,input) {
data.append(input.name,input.value);
});
$.ajax({
url: 'test.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
</script>
Here submit1 is a button on form form_id
This code is working fine, however the below line
data.append("file_"+i, file_data[i]);
as you can see posts the file with id of file_0, file_1 and so on. How can I get this to be the actual id of the input element rather than being a generic file_0, file_1 etc ?
Thanks for reading this
If you are using jQuery then why not something like this
$('input[type="file"]').each(function($i){
data.append($(this).prop("id"), $(this)[0].files[0]);
});
Entire Code :-
<script>
$("#submit1").click(function(){
testSubmit(event);
});
function testSubmit(event) {
event.preventDefault();
var data = new FormData();
$('input[type="file"]').each(function($i){
data.append($(this).prop("id"), $(this)[0].files[0]);
});
var other_data = $('#form_id').serializeArray();
$.each(other_data,function(key,input){
data.append(input.name,input.value);
});
$.ajax({
url: 'test.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
</script>

Run Javascript function as long as condition is true

I'm building a PhoneGap app where user press button which then sends data to server. On the success handler I have a new function that asks user some questions with prompt box and then sends them back to server. So I need to make the prompt box appear as long as the condition "status=ok" is true.
I don't know how many times the prompt box has to appear, it can be anything from 1 to 10 times, so I guess I need to make a some sort of loop, but how can I do it?
This is the code I've been using now:
function UpdateRecord(update_id)
{ var id = getUrlVars()["id"];
jQuery.ajax({ type: "POST",
url: serviceURL + "update.php",
data: 'id='+id ,
cache: false,
success: function(data) {
console.log(data)
if(data.key[0].status == "ok"){
var reply = prompt(data.key[0].QUESTION, "");
jQuery.ajax({ type: "POST",
url: serviceURL + "question.php",
data: 'id='+id+'&reply='+reply ,
cache: false,
success: function(data) {
window.location = "page.html" }
} else {
window.location = "page.html"
}
}
});
}
I think what your after is moving the response from the AJAX call into a method AskQuestion (or whatever you want to call it). This function would prompt and would query if the answer was correct or not and redirect them to another page:
function AskQuestion(data)
{
var id = getUrlVars()["id"];
console.log(data);
if(data.key[0].status == "ok") {
var reply = prompt(data.key[0].QUESTION, "");
jQuery.ajax({ type: "POST",
url: serviceURL + "question.php",
data: 'id='+id+'&reply='+reply,
cache: false,
success: AskQuestion});
} else {
window.location = "page.html";
}
}
function UpdateRecord(update_id)
{
var id = getUrlVars()["id"];
jQuery.ajax({ type: "POST",
url: serviceURL + "update.php",
data: 'id='+id,
cache: false,
success: AskQuestion});
}

Ajax post method not working

I am currently creating a website and am having trouble using AJAX to post my data. I have a button and when clicked the following code is processed...
var name = document.getElementById('name').innerHTML;
var text = document.getElementById('text').innerHTML;
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
success: function() {
$('#paragraph').html("worked");
}
});
This definitely opens the post.php page but it is not passing through the desired data. Am I doing something wrong?
Thanks in advance
What do the variables name and text contain? Rather than doing
var name = document.getElementById('name').innerHTML;
var text = document.getElementById('text').innerHTML;
You can do:
var name = $("#name").val();
var text = $("#text").val();
You may need to pass the datatype object too:
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
dataType: "json",
success: function() {
$('#paragraph').html("worked");
}
});
var name = $('#name').text();
var text = $('#text').text();
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
dataType: 'json',
success: function() {
$('#paragraph').html("worked");
}
});
I guess you are not preventing the default button click behaviour. Probably you should use the preventDefault function on the button click to stop processing the default form posting. Also make sure you have the content present inside your form elements with the Id name and text
$(function(){
$("#yourButtonId").click(function(e){
{
e.preventDefault();
var name = $('#name').html();
var text = $('#text').html();
if(name!="")
{
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
success: function() {
$('#paragraph').html("worked");
}
});
}
else
{
alert("Why should i do ajax when content is empty!");
}
});
});
var name = document.getElementById('name').value,
text = document.getElementById('text').value,
postData = JSON.stringify({ postName: name, postText: text});
$.ajax({
type: "POST",
url: "php/post.php",
data: postData,
success: function() {
$('#paragraph').html("worked");
}
});
You will need to include a reference to json2.js for this to work in older browsers. You can download it here : https://github.com/douglascrockford/JSON-js

Categories