Replacing content of divs - javascript

I am trying to replace content in a div after it has been saved to the db without reloading the page. When I click the save buttons the edit window disappears however the post wont get updated until I reload the page. Each post is build by following template and there are multiple posts.
var formatPost = function(d) {
var s = '';
s = '<div class="postWrapper" data-id="' + d.post_id + '"><h2 class="postHeading">' + d.title + '</h2>';
s += '<div class="postBody"> <p>' + d.body + '</p> </div>';
s += '<p> Posted on: ' + d.date + '</p>';
s += '<div class="btn editButton">Edit Post</div>'
s += '<div class="btn deleteButton">Delete</div>';
s += '</div>'
return s;
};
The following function is run when the edit button is pressed
function(data) {
var editableText = '<div class="editPostContainer" data-id="' + data.post_id + '">'
editableText += '<input type="text" class="editPostHeader" value="' + data.title + '">';
editableText += '<textarea class="editPostText">' + data.body + '</textarea>';
editableText += '<div class="btn saveEditButton">Save</div>';
editableText += '<div class="btn cancelButton">Cancel</div>';
editableText += '</div>';
$(self).parent().append(editableText);
}
When I click the save button following code is run
$.post(settings.server, {
saveID: $(this).parent().data('id'),
title: $('.editPostHeader').val(),
body: $('.editPostText').val()
}, function(data){
$(this).parent().siblings('.postHeading').text(data.title);
$(this).parent().siblings('.postBody').text(data.body);
});
And finaly the PHP that deals with the DB during this.
function save_post($id, $title, $body)
{
global $link;
$sql = "UPDATE post SET title= '$title',body= '$body' WHERE post_id= $id";
mysqli_query($link, $sql);
$sql = 'SELECT * FROM post WHERE id=' . $id;
$result = mysqli_query($link, $sql);
$saveResult = mysqli_fetch_assoc($result);
print json_encode($saveResult);
}

Related

Cart only changes color of the first item of each game

I have this function that add's to my cart html, and its working fine. But when i add two of the same Item i get an error(only changes color in the first of each same item).
The console.log(changeBackgroundColor); console.log(changeColorText); gets only the first div of each game.
const addToCart = function () {
getJSON('games.json', function (err, data) {
var cartBets = document.getElementById('cart-bets');
if (err === null) {
console.log('Ocorreu um erro' + err);
} else {
let html = '';
regexPrice = data.types[whichLoteriaIsVar].price;
totalPrice += regexPrice;
let newTotalPrice = data.types[whichLoteriaIsVar].price
.toFixed(2)
.replace('.', ',');
html += '<div class="bar-side-cart">';
html += '<div class="side-by-side">';
html +=
'<div class="menu-thrash-save"><i onclick="deleteItemCart(this)" value="' +
data.types[whichLoteriaIsVar].price +
'" class="far fa-trash-alt" src="img/thrash-can.jfif" width=15 alt="Thrash"></i>
</div>';
html +=
'<div data-style="cart-thrash-side-bar-' +
data.types[whichLoteriaIsVar].type +
'" class="bets-backgroundcolor-lotos-container"></div>';
html += '<div class="top-by-top">';
html += '<p class="cart-right-text">' + totalNumbers + '</p>';
html += '<div class="side-by-side">';
html +=
'<div data-style="cart-text-thrash-' +
data.types[whichLoteriaIsVar].type +
'" class="bets-color-lotos-container">' +
data.types[whichLoteriaIsVar].type +
'</div>';
html += '<div class="cart-money">R$ ' + newTotalPrice + '</div>';
html += '</div>';
cartBets.innerHTML += html;
var changeBackgroundColor = document.querySelector(
'[data-style="cart-thrash-side-bar-' +
data.types[whichLoteriaIsVar].type +
'"]'
);
changeBackgroundColor.style.backgroundColor =
data.types[whichLoteriaIsVar].color;
var changeColorText = document.querySelector(
'[data-style="cart-text-thrash-' +
data.types[whichLoteriaIsVar].type +
'"]'
);
changeColorText.style.color = data.types[whichLoteriaIsVar].color;
console.log(changeBackgroundColor);
console.log(changeColorText);
getCartTotal();
}
});
};
document.querySelector() only returns the first matched element. Try using document.querySelectorAll() with a loop:
var changeBackgroundColor = document.querySelectorAll(
'[data-style="cart-thrash-side-bar-' +
data.types[whichLoteriaIsVar].type +
'"]'
);
changeBackgroundColor.forEach(
element => element.style.backgroundColor =
data.types[whichLoteriaIsVar].color
);

PHP to AJAX, only one checkbox appears

I have this error when selecting more than one values like this:
https://lh3.googleusercontent.com/-D1oucKVR7rA/W0_PM1Po-9I/AAAAAAAAAjU/pWAGZCFY8cg6nHK6ALTWwSvZ38QdmsiqQCL0BGAYYCw/h544/2018-07-18.png
https://lh3.googleusercontent.com/-jC8w5UQTKvg/W0_PNj03yJI/AAAAAAAAAjU/JBTRKBdb0_Eha5-yhVJa5F9F8B1PfY6lACL0BGAYYCw/h314/2018-07-18.png
It shows only the first one checkbox.
A piece of code:
for (i in json['shipping_method']) {
html += '<p><strong>' + json['shipping_method'][i]['title'] + '</strong></p>';
if (!json['shipping_method'][i]['error']) {
for (j in json['shipping_method'][i]['quote']) {
html += '<div class="radio">';
html += ' <label>';
if (json['shipping_method'][i]['quote'][j]['code'] == '<?php echo $shipping_method; ?>') {
html += '<input type="radio" name="shipping_method[]" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" />';
} else {
html += '<input type="radio" name="shipping_method[]" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" />';
}
html += json['shipping_method'][i]['quote'][j]['title'] + ' - ' + json['shipping_method'][i]['quote'][j]['text'] + '</label></div>';
}
} else {
html += '<div class="alert alert-danger">' + json['shipping_method'][i]['error'] + '</div>';
}
}

I want The input value is not cleared when I popup a second time

I want to add html code using append, but when adding a second time, the text in the input does not follow the new line :
HTML :
'<form>' +
'<input type="text" id="newFoldr" name="fname" placeholder=".ex nameFanpage" value="">' +
'<input type="button" class="cancelButton" id="cancelButton" value="Cancel" data-dismiss="modal" aria-label="Close">' +
'<input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 5px;">' +
'</form>' +
Javascript :
$('.submitButton').click(function () {
var addFolder = '<div class="_5bm7 _2mk4" role="presentation" style="height: 50px;border:none;"><div class="_5bmf"></div>' +
'<div class="_1577">' +
'<div class="ellipsis">' +
'<div class="_1i5z"><div class="_1i5-">' +
'</div>' +
'</div>' +
'<span id="namaFolder"></span>' +
'</div>' +
'</div>' +
'</div>';
if( document.getElementById("newFoldr").value === '' ){
swal("Whoops!", "You need to write something!", "info");
} else {
$('.columnFolder').append(addFolder);
var inputan = document.getElementById("newFoldr").value;
document.getElementById("namaFolder").innerHTML= inputan;
swal("Success!", "Your folder has been created!", "success");
}
});
Screenshot : http://prntscr.com/h1pz43
if you are not able to clear the input value just add below code in else block
document.getElementById("newFoldr").value = "";
Complete javascript code is as below
$('.submitButton').click(function () {
var addFolder = '<div class="_5bm7 _2mk4" role="presentation" style="height: 50px;border:none;"><div class="_5bmf"></div>' +
'<div class="_1577">' +
'<div class="ellipsis">' +
'<div class="_1i5z"><div class="_1i5-">' +
'</div>' +
'</div>' +
'<span></span>' +
'</div>' +
'</div>' +
'</div>';
if( document.getElementById("newFoldr").value === '' ){
swal("Whoops!", "You need to write something!", "info");
} else {
$('.columnFolder').append(addFolder);
var inputan = document.getElementById("newFoldr").value;
$('.columnFolder div._5bm7._2mk4:last').find('span').text(inputan);
document.getElementById("newFoldr").value = "";
swal("Success!", "Your folder has been created!", "success");
}
});

My JSON data is loading in twice using AJAX, it is only supposed to load once on click

I am using AJAX and Jquery to load a json object into my web page. It works great however 50-70% of the time it loads in the json data to my page twice, it appends the second set of data to my page, is there a good way to ensure that my data only loads once?
my initial thought was to make the json call synchronous instead of asynchronous but that doesn't sound right, is there a better way of doing it?
$('#myResource').click(function() {
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});
Try
$('#myResource').unbind('click').click(function(){
})...
try to disable a button after click
$('#myResource').click(function() {
$('#myResource').prop('disabled' , true); //<<<<<<<<<<<<<<<< here
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
$('#myResource').prop('disabled' , false); //<<<<<<<<<<<<<<<<<<<<<<< here
});
});
});
with the help of some of the comments, the answer ended up being that i needed to unbind click at the beginning of the function, and leaving it unbound:
$('#myResource').click(function() {
$( "#myResource").unbind( "click" );
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
console.log('load everything');
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});

ReferenceError: display is not defined

I got this 'ReferenceError: display is not defined' where my script link are as below.
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
I replace them with latest version 1.11.1 and tried with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But still there is Reference Error. What should i change my display function(Script):
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="mask hide-phone">';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';
$(element).html(html);
});
$('.display').html(' <div id="list_b"></div> <a id="grid_a" title="<?php echo $text_grid; ?>" onclick="display(\'grid\');"></a>');
$.totalStorage('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="mask hide-phone">';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
$(element).html(html);
});
$('.display').html(' <a id="list_a" title="<?php echo $text_list; ?>" onclick="display(\'list\');"><?php echo $text_list; ?></a> <div id="grid_b"></div>');
$.totalStorage('display', 'grid');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('list');
}
you can see that your conactenation is creating issues:
copied from the source of your link
html += '
<div class="cart" >
' + $(element).find('.cart').html() + '</div>';
at this line your div is having a newline character. may be this is caused by something else but you can do this:
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';
here you can see html+=' <div>' this line is having a space before the div so you can remove it.
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';

Categories