We Keep Coding

How to set content to easyui panel with javascript

I have a problem in using easyui panel, so I am here needing somebody's help , even thought i find a few people use easyui in stackoverflow.
I have a panel in my page like:
<div class="easyui-panel" title="" id="pp" closed="true" style="width:100%">
</div>
And then, I want to put a value of a input value to this pp panel.
The input value and button code is :
<input type="text" style="width:97%;height:40px" id="drafterId" value='ths'>
bt
Now I want to use drafter function when clicking linkbutton to realize it :
function drafter()
{
var drf=$("#drafterId").val();
alert(drf);//works OK
var drfN="<tr>"+drf+"</tr>";
$('#pp').panel('refresh', 'drf'); //works fail
}
But unlucky, $('#pp').panel('refresh', 'drf');works fail. I have tried another way:
$('#pp').html(drf);
and
$('#pp').innerHTML(drf);
They both failed. Who can help me?

$('#pp').append(drf); works OK

Remove the quotes around the variable name ‘drf’.
So $('#pp').panel('refresh', 'drf');
Becomes$('#pp').panel('refresh', drf);

How to reload jquery on onclick event?

I've got a table row where it retrieves data from MySQL and I have included a .onclick function where it opens up a text editor with data inside, but the text editor is only opening for the first row and not the rest in the table.
This is the jQuery code: The first opens the text editor and the second switches the textarea for the text editor which is ckeditor.
<script type="text/javascript">
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
});
});
window.onload = function()
{
CKEDITOR.replace("editor1");
};
</script>
and this here is echo for the table, I am using a foreach.
echo '
<tr class="trClass" id="'.$counter.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="d_'.$counter.'" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
$counter++;
}
I cannot figure out how to make the CKEDITOR.replace("editor1"); load for every table, I tried using .click function within it but it does not work as it doesn't load. Here is the problem, if you click on the first row it opens the text editor if you click on the second it does not; http://www.goo.gl/dQrLPN

Typically the id attribute should be unique for each element. Applying properties across multiple elements is usually accomplished with a class. Knowing this, CKEditor is probably just grabbing the first instance of an object with the given id (probably using document.GetElementById behind the scenes).
(According to the documentation, CKEDITOR.replace(var) will either take a DOM element, ID, or name.)
Given that, you have a couple of options. One is to defer loading the CKEditor until you actually click on the table row. This would look something like this... (note how each textarea has a unique id)
<section id="d_' . $counter . '" style="display:none;">
<textarea id="editor_'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
CKEDITOR.replace('editor_'+id);
});
});
The second option would be to loop through all of the textarea elements and call replace on each one of them on-load. I wouldn't really recommend this, unless there's some specific reason you want to load everything up-front.
EDIT: Although this should fix your issue, you should look in to the HTML issues the other answerers have put forward. <section> doesn't belong as a child of <table> :-)

Try targeting the table and filtering by the rows using the .on() method.
$(document).ready(function()
{
$('#table_id').on('click','.trClass',function() {
var id = $(this).attr('id');
$('#d_'+id).css('display', 'block');
$('#table_id').css('display', 'none');
});
});
Details on .on() are here: https://api.jquery.com/on/
And as noted in the comments above, there are some overall issues with your HTML that you should probably fix before proceeding further.

JS-Linking to an anchor inside the document in the onclick() event

I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.

If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?

You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.

Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor

Is it possible to position a div on top of another starting from the bottom using CSS?

I have a chat window made using HTML, CSS & JS. I want to position the message from bottom to top.
Example:
first message div at the bottom, 2nd message div on top of first an so on. Is it possible?

I can't imagine a pure CSS solution. But Using jQuery, if you already have this library for your project, you could write something this:
$(':button').click(function() {
var message = $('input[type=text]').val();
$('#chat').prepend('<div class="line">'+message);
});
Demo: http://jsfiddle.net/Vbd67/1/
**I changed the append to prepend according to the comment

I know that this is not an answer to your question, rather this is a better option that you should consider implementing in the chat window.
Newest comment should be at the bottom, that is how most basic chat windows work.
Next thing, you can do this all using css:
because such a design requires either use of table rows or list elements
Obviously you have to use javascript for using ajax, so that you can asynchronously fetch user records like messages and profile pic etc
CSS:
<style type="text/css">
table#chat_window {
}
tr#message_row {
}
td#profile_pic {
}
td#message {
}
</style>
HTML STRUCTURE:
<table id="chat_window">
<tr id="message_row">
<td id="profile_pic"></td>
<td id="message"></td>
</tr>
</table>
OR USING LISTS:
<ul id="chat_window">
<li id="message_row">
<div id="profile_pic"></div>
<div id="message"></div>
</li>
</ul>
Now you have to just using javascript:ajax to fetch values and add a child:
If you are using table based chat-window, then you have to fetch the table id using javascript and add row element <tr> per value/message that you fetch.
If you are using list based chat-window, then you have to fetch the list id using javascript and add list element <li> per value/message that you fetch.
I am sorry if there are any typos I have less time.

You can do this using jQuery like;
var first = $('div > div:first-child');
first.appendTo(first.parent());
To deal with several elements, you can do this:
$('div > div').each(function() {
$(this).prependTo(this.parentNode);
});
Here is a working Live Demo.

You should use a combination of display:table-cell and vertical-align:bottom.
I use Sotiris's fiddle and fixed its CSS.
The HTML is
<div style="display:table; height:200px;">
<div style="display:table-row">
<div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom">
</div>
</div>
</div>
<input type="text"><input type="button" value="post">
​
And this is the JavaScript code
$(':button').click(function() {
var message = $('input[type=text]').val();
$('#chat').append( $('<div/>').text(message) );
});
​
Please let me know if there is a problem.
This is the fiddle
I kept searching for a better solution because table layout is always suspicious to me, but I found css-tricks article about it and they do the same as I do.. so I guess this solution is the right one.
ADDING - keep scroll to bottom code
Since new messages are coming at the bottom, we need to keep scroll to bottom.
I updated the fiddle link

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});

Try this:
$('.table input:checkbox').not('div.checker input').uniform()