I should insert the answer to an ajax post response inside a div created using the javascript document.createElement ('div') function;
the code i am trying is the following:
i try to load variable idx in p with id=idx_h
but don't work.
Thank you for help me.
success: function(data) {
var objJSON = JSON.parse(data);
var idx=objJSON.idx;
const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
<div class="container-fluid " id="border<?php echo($_COOKIE['idx']);?>">
<div class="row ">
<div class="col">
<div class="input-group mt-1" >
<span class="input-group-text text-large ">R</span>
<div contenteditable="true"
class="input-group-text text-large "
data-old_value="<?php echo $d['rep_sessione'] ;?>"
onInput="saveInlineEdit(this,'rep_sessione','${<p id="idx_h"></p> }' )"
<!--this-->
onClick="highlightEdit(this);">
<?php echo $d['rep_sessione']; ?>
</div>
</div>`;
document.getElementById('link<?php echo $d->id;?>').append(div);
document.getElementById("idx_h").innerHTML =idx ;
}
Related
I'm building a website using PHP and AJAX JQUERY. And inside this website, there is texting system, like whatsapp, telegram ...etc.
and I'm wanna get all the messages from the database after the user send a message, using jQuery AJAX. so far I have been able to send the text to the database successfully but I fail when I try to get the messages.
I Have this following code when first the page is loaded:
<div class="messaging-frame">
<div class="Title-in-message">
<h4 class="title-message"><?php echo $index['Title'] ?></h4>
</div>
<div class="messaging-box" id="messages">
<?php
// THE MESSAGE FROM MESSAGE TABLE
foreach ($messages as $key => $value) {
if ($_SESSION['EmployeeNum'] === $value['Sender']) { ?>
<div class="row">
<div class="col" style="margin-bottom:15px">
<div class='sent'>
<p id='send-bubble'> <?php
echo $value['Message'] ?> </p>
</div>
</div>
</div>
<?php
} else { ?>
<div class="row">
<div class="col" style="margin-bottom:15px">
<div class='recived' id="recieved-bubble">
<p id='recived-bubble'><?php echo $value['Message'] ?></p>
</div>
</div>
</div><?php
}
}
?>
</div>\
Than this code in AJAX jQuery get executed when ever the user send a new message in messaging box:
$(document).ready(function() {
$('#sending_text').click(function() {
var report = $('#report_num').val()
var reportInt = parseInt(report);
var text = $('#text_sent').val();
var encodeText = encodeURIComponent(text);
$.ajax({
url: "<?php echo base_url() . 'DisplayTicket/sendNewText' ?> ",
type: "POST",
data: {
text: text,
reportNum: reportInt
},
success: function() {
$('#messages').load("<?php echo base_url() . 'DisplayTicket/getNewMessages' ?>", {reportNum: reportInt}, function() {
var texts = " <?php foreach ($messages as $k => $val) { if ($_SESSION['EmployeeNum'] === $value['Sender']) { ?>";
texts += " <div class='row'> <div class='col' style='margin-bottom:15px'> <div class='sent'>";
texts += "<?php echo $val['Message'] ?>";
texts += "</div> </div> </div>";
texts += "<?php } else { ?>";
texts += " <div class='row'> <div class='col' style='margin-bottom:15px'> <div class='recived' id='recieved-bubble'>"
texts += "<?php echo $val['Message'] ?>";
texts += "</div> </div> </div>"
texts += "<?php }
} ?>";
texts += "</div>";
$('#messages').html(texts);
})
},
});
});
})
Keep in mind that the $('#messages').html(texts);
is actually get executed but the newest messages in not added
I see you are using .load() method to fill the #messages .
Normally the first argument to this method is the response you wanna insert,and the this is just a callback after success, and you are using a php variable $messages instead of using the response from the request.
I see already 2 ways of doing this:
1 - remove the callback from load() and make sure the response is well written in html as youy want
2 - get rid of load() function, and call another ajax inside success of the first ajax to accomplish so.
The second method is just to make you understand what is wrong. So the best way to do it is to fix load() method accordingly
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><?=$title?></h3>
</div>
<!-- /.col-lg-12 -->
<p>
<ol id="valueList">
aa
</ol>
</p>
</div>
</div>
This is my AJAX code this code doesn't show any error only the problem is doesn't show in the HTML
firebase.initializeApp(config);
database = firebase.database();
var refDeleafing = database.ref('Deleafing');
refDeleafing.on('value', gotDataDeleafing, errData);
function gotDataDeleafing(data) {
var blocks = data.val();
var keys = Object.keys(blocks);
console.log(keys);
for(var i = 0; i < keys.length; i++) {
var k = keys[i];
var deleafingBlock = blocks[k].deleafingBlock;
var li = document.createElement('deleafingBlock');
$(li).parent("valueList");
}
if i will use the li.parent("valueList"); it show an error parent is not a function. is there anyway how to work it?
All the other attribute changes seem to work fine inside the modal. The rating button inside the modal doesn't load its value on loading. But the inspect element seems to display the proper rating value.
I am new to php and jquery. Kindly excuse me from silly programming methodologies implemented in the above mentioned code.
Any help would be deeply appreciated.
HTML :
<div class="item" style="width: 400px; height: 230px">
<!-- Link trigger modal -->
<a data-img-url="upload/<?php echo $row['image_name'] ?>" data-toggle=
"modal" href="#myModal" id="<?php echo $row['image_id'] ?>" onclick=
"modalload(this.id, '<?php echo $row['image_title'] ?>' , '<?php echo $row['image_description'] ?>', <?php echo $TAVG ?> );"><img class="img-responsive carousal_scale"
src="upload/%3C?php%20echo%20$row['image_name']%20?%3E"></a>
<div class="carousel-caption">
<p><?php echo $row['image_title'] ?></p>
</div>
</div><!-- Modal -->
<div class="modal fade modal-dialog modal-content" id="myModal" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type=
"button"><span>×</span><span class="sr-only">Close</span></button>
<h2 class="modal-title" id="myModalLabel"></h2>
</div>
<div class="modal-body well">
<img class="img-responsive carousal_scale" src=""> <input class="rating"
data-size="xs" id="" max="5" min="0" onchange="test(this.id, this.value);"
step="0.1" style="alignment-adjust: auto;" type="number" value="">
</div>
<div>
<p style="text-align: center; font-size: 15px;"></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type=
"button">Close</button>
</div>
</div>
JS :
$(document).ready(function() {
$(".rating-kv").rating();
});
function modalload(id, title, description, avg) {
alert(avg);
// alert(description);
$('#myModal img').attr('src', $('#' + id).attr('data-img-url'));
$('#myModal input').attr('value', avg);
$('#myModal input').attr('id', id);
$('#myModal h2').text(title);
$('#myModal p').text(description);
}
function test(id, val) {
var pic_id = id;
var pic_val = val;
$.ajax({
type: 'POST',
url: 'rating.php',
data: {
'pic_id': pic_id,
'pic_val': pic_val
},
}).done(function(data) {
// alert(data);
});
}
"The rating button inside the modal doesn't load its value on loading." You currently have your modalload()function only activate on click of an a tag so your rating isn't going to get it's value/id populated on load, but rather on click.
Try this instead inside your modalload() function,
$('.rating').attr('value', avg);
$('.rating').attr('id', id);
Also, note that there is no jQuery rating() function, and that you have no element with the class rating-kv in your HTML, therefore the below code will do nothing.
$(".rating-kv").rating();
In other words, you have a lot of bad coding practices and incomplete code. You should consider revising what you have and re posting it.
I am using Jquery RateIt plugin with the view more button.
so In my project i am showing restaurant rating with these plugin by default i am displaying first 5 rating.Then after 5 records i am displaying other content through ajax so in the content loded through ajax rating is not being showd i am using readonly mode..If anyone can help thanks in advance
foreach($list_review as $row): ?>
<div class="user_reviews_data">
<div class="width-20 float-left">
<span class="padleft-10"><?php echo $row->User; ?> </span>
<br/>
<span class="padleft-10">
**<div class="rateit" data-rateit-value="<?php echo $row->Rating;?>" data-rateit-ispreset="true" data-rateit-readonly="true"></div>**
</span>
<div class="muted padleft-10 float-left"><small><?php echo date('dS M Y' ,strtotime($row->CreatedDate)); ?></small></div>
</div>
<div class="width-80 float-left"><?php echo $row->Feedback;?></div>
<span class="report_span">Report this Feedback <img src="<?php echo base_url();?>themes/images/FLAG_GREY.png"></span>
</div>
<?php
$msg_id=$row->Id;
endforeach;?>
</div>
<div id="more<?php echo $msg_id; ?>" class="btn-container center_text morebox">
View More
</div>
Now code of jquery
/*view More Button*/
$('.more').live("click",function()
{
var this_tag = $(this);
var ID = $(this).attr("id");
if(ID)
{
$.post(siteUrl+"ajax/ajax_more",{lastmsg:ID,restid:$(this_tag).data("restid")},function(html){
$("ol#updates").append(html);
$("#more"+ID).remove();// removing old more button
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
I am adding content on view more button click through ajax ajax code is same as above code
I am Using this plugin http://www.radioactivethinking.com/rateit/example/example.htm
In the $.post success handler you should invoke rateit again via JavaScript after you append the HTML like so:
$("ol#updates").append(html);
$(".rateit").rateit();
Replace $(this_tag) with either this_tag or $(this) in your ajax call.
You should use var this_tag = this; instead of using var this_tag = $(this);
OR try var $(this_tag) = $(this);
How would you use simplemodal within a foreach loop so that it does not repeat the same information?
Example:
foreach($ret as $v)
{
<div id='osx-modal'>
<input type='button' name='osx' value='View' class='osx demo'/>
</div>
<div id="osx-modal-content">
<div class="close">x</div>
<div id="osx-modal-data">
<div id="toon_box">
<div id="toon_name">
<?php echo $v['toon_name'];?>
</div>
<div id="toon_avatar">
<?php echo '<img src="' . $v['avatar'] . '" alt="" />';?>
</div>
</div>
</div>
}
The meta data is pulled from users on the website and displays that meta data for each user in separate Modals. For clarification let's say foreach is repeated 10x since here is 10 users in the database. That will create 10 separate buttons for each user, that when you click the modal box pops up with the data inside of it.
The problem is, that when you click each button its the same user in each modal box. How would you set this up so each modal box displays the correct user meta data. I've already checked if persistence is set to false in simplemodal.js and it is.
The reason you are having the same meta data in the same model box is because this line of code
<input type='button' name='osx' value='View' class='osx demo'/>
using class is very generic so you should be using id instead where each button has its own uniqid
<input type='button' name='osx' value='View' id='os1'/>
<input type='button' name='osx' value='View' id='os2'/>
Now your <div id="osx-modal-content"> would also look like this
<div id="osx-modal-content1">
<div id="osx-modal-content2">
Your javascript would look like this
$("os1").addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"title":"Title",
"contents": $("#osx-modal-content1").html()
});
});
$("os2").addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"title":"Title",
"contents": $("#osx-modal-content2").html()
});
});
Can use see the way everything is mapped ??? this is who you achieve each content in each model
Let me know if you need more information
Edit 1 Example
<?php
$x = 0;
foreach ( $ret as $v ) {
$x ++;
$content = "
<script type=\"text/javascript\">addModal($x)</script>
<div id='osx-modal'>
<input type='button' name='osx' value='View' id='osx{$x}'/>
</div>
<div id=\"osx-modal-content{$x}\">
<div class=\"close\">x</div>
<div id=\"osx-modal-data\">
<div id=\"toon_box\">
<div id=\"toon_name\">
{$v['toon_name']}
</div>
<div id=\"toon_avatar\">
<img src=\"{$v['avatar']}\" alt=\"\" />
</div>
</div>
</div>";
}
?>
<script type="text/javascript">
function addModal(x)
{
$("osx" + x).addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"title":"Title",
"contents": $("#osx-modal-content" + x).html()
});
});
}
</script>
Finally got it to work thanks to standup75!
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("[name=osx]").click(function (e) {
e.preventDefault();
$(this).parent().next().modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},