We Keep Coding

Change height of div with jquery after ajax returns data

I have a div which is always the same height as the div next to it (depending how much content is loaded in that div etc).
This works fine, but now I added a search function using jquery, it stopped working. When I search, the element that is used in the jquery calculation is loaded again. So I tried adding the jquery code inside the ajax callback, but this didn't work either. What should I do?
My code:
$(window).resize(function() {
var contenthoogte = $(".news-content").height();
$(".contenthoogteaangepast").css("height", contenthoogte);
}).resize();
My HTML:
<div class="col-sm-4 padding-zero contenthoogteaangepast">
<form action="ajax/result.php" id="zoeken">
<div class="zoekveld">
<input class="inputzoek" type="text" placeholder="zoeken..." name="zoekwaarde">
<input class="inputbutton" type="submit" value="Zoeken">
</div>
</form>
<div class="downloads">
<h4>Downloads</h4>
<ul>
<li>
- PDF Voorbeeld 1
</li>
<li>
- PDF Voorbeeld 2
</li>
<li>
- PDF Voorbeeld 3
</li>
</ul>
</div>
</div>
<div class="col-sm-8 padding-zero" id="result">
<div class="box large-width-box-w1 full-width-box news-right entry-content news-content">
<?
if($zoekwaarde != ''){
$zoekresultcon = $conn->query($zoekresult);
while($zoekresult = $zoekresultcon->fetch_assoc()){
$zoekresultaten .= '<div class="zoekresultaat"><h4>'.$zoekresult['title'].'</h4></div>';
}
echo $zoekresultaten;
}else{
?>
<h2 class="port-tit contenttitle"><? echo $content['title']; ?></h2>
<?
//Replace img met img src="cms/ zodat je ook tussen de tekst images kan toevoegen
$replaced = str_replace('img src="','img src="cms/',$content['introtext']);
echo $replaced;
}
?>
</div>
</div>
This is what I tried with ajax:
$( "#zoeken" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
zoekvalue = $form.find( 'input[name="zoekwaarde"]' ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { zoekwaarde: zoekvalue } );
// Put the results in a div
posting.done(function( data ) {
$(window).resize(function() {
var contenthoogte = $(".news-content").height();
$(".contenthoogteaangepast").css("height", contenthoogte);
}).resize();
$("#result").html(data);
});
});
It should be changed even without resizing the screen so I also tried copying the code outside the .resize function, but this also didn't change anything.

First things first. You really shouldn't mix languages when programming. Even for a native Dutchie like me, this is very confusing to read. I've replaced all Dutch words for English equivalents.
Like A. Wolff said it's bad to mix events. So let's restructure some things.
First I've removed the window resize and replaced it with a call to resizeContainer. This function handles the resizing of your container. This function is also called in the window resize event.
function resizeContainer() {
var contentheight = $(".news-content").height();
$(".contentheightaltered").css("height", contentheight);
}
$(window).resize(function() {
resizeContainer()
}).resize();
$( "#search" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
searchvalue = $form.find( 'input[name="searchval"]' ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { searchval: searchvalue } );
// Put the results in a div
posting.done(function( data ) {
$("#result").html(data);
// Resize the compagnion container AFTER the data has been updated
resizeContainer();
});
});
This approach means that you don't repeat code, instead bundle it in a function that is called multiple times.

This one worked with me :
$( "#contenthoogteaangepast" ).on( "changeHeight", function() {
$( this ).height($("#.news-content").height());
});
//inside the callback of the request :
$( "#contenthoogteaangepast" ).trigger( "changeHeight" );
or try :
function func() {
$( this ).height($("#.news-content").height());
}
//inside the callback of the request :
func();
I didn't try the second one but it should work.

How to store div content to DB?

In my project, sheet processing data will be append to a timeTagDiv div(just like A and B are talking, and the content will show in the dialog).The new message send to dialog will append to timeTagDiv div. After that I want the whole timeTagDiv html content stores in the DB with ajax. Next time, these dialogue content will show in the div, So I konw what is going on.
Here is my js code:
var newCnt="<span class='dlgRsp'><label id='dlgRspTime'></label> <label id='dlgCharge'></label> accept sheet</span><br />";
$('#timeTagDiv').append(newCnt);
//var tmTgDvHtml=$('#timeTagDiv').innerHTML;
var tmTgDvHtml=document.getElementById("timeTagDiv").innerHTML;
var slcId = 2;
$.ajax({
dataType:'json',
type:"POST",
url:"get_ajax_csc.php",
data: {slcId:slcId,htmlCnt:tmTgDvHtml},
success:function (data)
{}
});
Here is my html code:
<div class="timeTag" id="timeTagDiv">
<span class="dlgDate" id="firDlgDate"></span><br />
<span class="dlgStTrl"><label id="dlgTime1"></label> <label id="dlgPrpsr"></label> create new sheet</span><br />
<div id="dlgDiv1"></div><br />
</div>
Here is get_ajax_csc.php code:
<?php
include ("DB.php");
if(isset($_POST['htmlCnt']))
{
$sql="update IDC SET shProcess='".$_POST['htmlCnt']."' where id='".$_POST['slcId']."';";
$sel = $conn->exec($sql);
}
?>
But unfortnately, these date of timeTagDiv can not be updated. I have tested that tmTgDvHtml=document.getElementById("timeTagDiv").innerHTML can get the div html content.But i have no idea about that. Who can help me ?

The div contect of htmlCnt should be formatted by stripslashes()
$htcnt=stripslashes(".$_POST['htmlCnt'].");
It works fine.

jQuery popover buttons (php)

I have a a button to generate presentations. I generate 8 presentation with one click, and then I can edit each one by clicking on its name. There I have another, smaller form. I want to have also some button there, that will let me choose which fields I want to edit. This applies to "place" part - you can specify the place, if you want to. I have a button to show/hide fields connected to place edition.
<div>
<?=
Html::button(Yii::t('app', 'Add new place'), [
'id' => "add-different-place-btn",
'class' => 'btn btn-success',
])
?>
<?=
Html::button(Yii::t('app', 'Delete new place'), [
'id' => "delete-different-place-btn",
'class' => 'btn btn-success',
])
?>
</div>
<br />
<div id="place-hidden-different">
<div id="place-name-hidden">
<?= $form->field($place, "[{$index}]name")->textInput()->label(Yii::t('app', 'New place')) ?>
</div>
<div id="place-city-hidden">
<?= $form->field($place, "[{$index}]city")->textInput() ?>
</div>
<div id="place-street-hidden">
<?= $form->field($place, "[{$index}]street")->textInput() ?>
</div>
<div id="place-postcode-hidden">
<?= $form->field($place, "[{$index}]post_code")->textInput() ?>
</div>
</div>
Then, in my jQuery part I figured out something like this. Notice that I'm really new to jQuery, so it can be something really obvious :)
$('.btn-popover-link').on('click', function () {
$(document).ready(function () {
$('#place-hidden-different').hide();
$('#delete-different-place-btn').hide();
$('#add-different-place-btn').on('click', function () {
$('#place-hidden-different').show();
$('#add-different-place-btn').hide();
$('#delete-different-place-btn').show();
});
$('#delete-different-place-btn').on('click', function () {
$('#place-hidden-different').hide();
$('#add-different-place-btn').show();
$('#delete-different-place-btn').hide();
});
});
});
But, instead of getting what I want to, I get things like that:
It looks ok. But it doesn't work. Nothing happens on clicking "Dodaj nowe miejsce" (Add new place). Morover, in other presentation I get full variety of that form - example below. None of the buttons is working at all, in some popovers there are no buttons at all, in some just not working.
What can cause this situation?

If I get it well, you are using the same ID #add-different-place-btn for each of the 8 presentations button.
If this is right, the code is working as expected: IDs must be unique !
You should move to a class selector like you did with .btn-popover-link.
Also you should move $('.btn-popover-link').on('click', function () {}); inside the $(document).on("ready", function() { ... here ... });.
Even better with $(window).on("load", function() {}); but it depends on the kind of code you are running.

Codeigniter ajax call does not work properly

For example if I click 'vote up' button it successfully adds vote for the first post and displays the result in span element with class="rate_votes", but it also displays the same result in all the span elements with same class because of the following line:
$(".rate_votes").text(rate); //
How can I avoid that?
If I use
$(this).text(rate); //
it will not work properly because it does not know which span element to select. Could you help me please.
Here is my view:
<div>
<?php
foreach($results as $row){
$id = $row['id'];
$rate = $row['rate'];
?>
<div>
<?php
$data = array(
'name' => $id,
'class' => 'rate',
'content' => 'Vote Up'
);
echo form_button($data);
?>
<span class="rate_votes" >
<?php echo $rate; ?>
</span>
</div>
</div>
Here is my JS file:
$(document).ready(function() {
$(".rate").click(function(){
var self = this;
$(self).attr("disabled", true);
var id_like = $(self).attr("name");
$.post('filter/get_rate', { id_like: id_like }, function (data) {
var my_obj = data;
$.each(my_obj, function (i) {
var rate = my_obj[i].rate;
$(".rate_votes").text(rate); //
$(self).text("Voted!");
});
}, "json");
});
});

This has nothing to do with codeigniter :)
You bind the click event to an ID, #rate but that ID appears multiple times.
$data = array(
'name' => $id,
'id' => 'rate',
'content' => 'Vote Up'
);
echo form_button($data);
use a class instead.
When you select an ID that appears multiple times, only the first one is selected, thus only the first button works.
EDIT
Your comment sounds a bit strange, Given this code for example :
HTML:
<div class="foo">Foo</div>
<div class="foo">Foo</div>
<div class="foo">Foo</div>
<div class="foo">Foo</div>
Javascript/Jquery
$('.foo').click(function() { $(this).remove() });
The above code only removes the specific div being clicked, That is the event is only fired once and for that element only.
Doublecheck your javascript.

You have used:
$("#rate").click(function(){...})
Here "#rate" is an id and an id must be unique, use class like .rate. If you have multiple elements with same id on the page then only the first element of the page will be counted. So the following code is registering the click handler only on the first element with id rate:
$("#rate").click(function(){
//...
});
Give your elements a class instead, for example:
<button class='rate'>Rate</button>
<button class='rate'>Rate</button>
So this code will work on every button click:
$(".rate").click(function(){
var id_like = $(this).attr("name");
$(this).attr("disabled", true); // disables the current button
$('.rate').attr("disabled", true); // disable all the buttons with class rate
//...
});

Jquery click function not working when using AJAX

this is my html code
<input type="hidden" value="<?php echo $rslt['id'] ?>" id="res_id" /> <!-- this line catch post id -->
<div id="likeSec">
<h4><?php echo $rslt['likes'] ?> People Like this</h4> <!-- this line show total likes -->
<?php
$kol=mysql_query("SELECT * FROM tbl_like_recipe WHERE res_id='".$rslt['id']."' && user_id='".$_SESSION['member_email']."'");
$num_rows = mysql_num_rows($kol); // this query check this user already like this post or not
if($num_rows==0){ // if not liked already show like image
?>
<div id="like" style="float:right;"><img src="images/like.png" width="45" /></div>
<?php
}else{ // if already like show unlike image
?>
<div id="dislike" style="float:right;"><img src="images/unlike.png" width="45" /></div>
<?php } ?>
</div>
and this my script
<script>
$(document).ready(function(){
$("#like").click(function(){
var res_id=$("#res_id").val();
$.post("like_recipe_prosses.php",{'data':res_id},function(cbd){
$("#likeSec *").remove();
$("#likeSec").html(cbd)
})
})
$("#dislike").click(function(){
var res_id=$("#res_id").val();
$.post("dislike_recipe_prosses.php",{'data':res_id},function(cbd){
$("#likeSec *").remove();
$("#likeSec").html(cbd)
})
})
})
</script>
When I click 'like' I see it becomes 'Unlike', but if I click on 'Unlike' it doesn't work.
If I then refresh the page and click 'Unlike', it becomes 'Like', but I can not click 'Like' again to make it 'Unlike' again.
What did I do wrong here? please help me someone.

You are generating dynamic elements in your DOM, thus the click event wont be attached due to the lack of delegation, in order to make this work, try the following:
$("#likeSec").delegate('#like', 'click', function(){
var res_id=$("#res_id").val();
$.post("like_recipe_prosses.php",{'data':res_id},function(cbd){
$("#likeSec *").remove();
$("#likeSec").html(cbd)
})
})
$("#likeSec").delegate('#dislike', 'click', function(){
var res_id=$("#res_id").val();
$.post("dislike_recipe_prosses.php",{'data':res_id},function(cbd){
$("#likeSec *").remove();
$("#likeSec").html(cbd)
})
})

Try this
$('#likeSec').on('click','yourdiv',function(){
//Your Code
});

When you receive ajax response, you replace original HTML elements which had events attached with new HTML. Use .on to attach delegated events:
$("#likeSec").on("click", "#like", function(){
var res_id=$("#res_id").val();
$.post("like_recipe_prosses.php",{'data':res_id},function(cbd){
$("#likeSec").html(cbd)
})
})
$("#likeSec").on("click", "#dislike", function(){
var res_id=$("#res_id").val();
$.post("dislike_recipe_prosses.php",{'data':res_id},function(cbd){
$("#likeSec").html(cbd)
})
})