Develop Reference

How to link two html pages

So i'm working on a chat application and i want to add smileys. So i used two html pages. the first one contain the text area when we wright the messages and an iframe that references the second html page.
<div class="col-12">
<textarea class="col-12 row-12 var_MessageInput" id="textmsg" placeholder="Write a reply..."></textarea>
</div>
in the second html page i have smiley images
<img src="../../../images/sad_smile.gif" onclick="insertSmiley('sad');"/>
<img src="../../../images/angel_smile.gif" onclick="insertSmiley('angel');"/>
<img src="../../../images/happy_smile.gif" onclick="insetSmiley('happy');" />
So i want that when i click at a smiley image that a text got inserted in my text area so i used the following script
function insertSmiley(smiley) {
var currentText = document.getElementById("textmsg");
var smileyWithPadding = " " + smiley + " ";
currentText.value += smileyWithPadding;
currentText.focus();
}
But it doens't work :( i thought the problem might be in document.getElementById since it's another html page but i have no idea how to solve it.
Thanks a lot

Have you included the <script src="Scripts_Chatapp/emoticone.js"></script> in iframe too? If yes, remove the script reference from iFrame.
Move the script reference <script src="Scripts_Chatapp/emoticone.js"></script> at top of page with other script tags.
Change the onclick="insertSmiley('sad');" TO onclick="parent.insertSmiley('sad');".
This will call the parent function and make changes on that page, since element exists on parent.

You have one typo in onclick="insetSmiley('happy');" it should be onclick="insertSmiley('happy');". I checked it and it works for me.

In your JS code, use:
window.location = "second_HTML_Page.html" ;

The problem is that when the function is triggered within the iFrame, the scopes become complicated.
A solution would be to make the function global by defining it at the window level. And then when the function is to be triggered inside the iFrame, it can call the function of the iFrame's parent (the main window).
Example Fiddle: http://jsfiddle.net/e37rrtb1/2/

PHP echo appears to work but doesnt show up in HTML

I am trying to use a php script to generate HTML in order to save lines and what not. I am using jQuery to call my php and then put the result into a specified div as shown below:
function createSidebarRow(div, cellNum, rowName, rowDesc) {
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc);
}
However, when this is executed the HTML is not updated on the page, I can see that the code has worked because the browser network activity confirms it. I am trying to figure out what is causing it to not update.
This is the network activity confirming the echo'd HTML.

Sorry for stating the obvious, but the div you are trying to fill up does exist with that particular id right?
If so, try this:
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc, function() {
alert('success');
});
If the id does exist (and it's unique) and you get an alert there should be no reason for it not to work.

It might be so, that the div is not yet created in the DOM. (the div that should received the html).
Are you calling createSidebarRow directly on page load?
If so, put the function call in a document ready:
jQuery(document).ready(function(){
createSidebarRow (... );
});

Turns out jQuery doesn't play ball when you include spaces in the POST URL. I removed the space and used %20 instead and all is well now. Thanks for any advice.

How to get background image of element on click event using jquery?

I try get value for style and also in side this tag values for background-image
I do this little script :
function url_image(id){
var valimg = jQuery("."+id+". cycle-slide").attr("src");
alert('' + valimg);
}
<div onclick="url_image('imm_1');" class="imm_1 cycle-slide" style="background-image:url('website.com/image.jpg')"></div>
The idea it´s that when i do click over the div, send the value of background-image to the script and show, but no get this because i don´t know how get the value from tag style. That´s all problem

You can use :
var valimg = jQuery("."+id+".cycle-slide").css("background-image")
Like #Musa mentioned in comment.
Hope this helps.

Hide div having variable dynamic ID

The div is a switch which gets a dynamic ID .
class name is impbtn , id is generated in variable this.impbtn6.id
HTML:
<div id="widget-id63032Candy_Eaten_importGoodsBtn" class="impbtn"></div>
There are two places hide is required - click and onload
In click event
document.getElementById(this.impbtn6.id).style.visibility="hidden";
works fine .
I cannot use Document.getelementbyID , as multiple form loads occur and button is not supposed to be hidden then .
So i trued using JQ to access css properties
This
jQuery('.impbtn, #this.impbtn6.id').css('visibility',"hidden");
works but makes all button in the class invisible . I want to make only this.expbtn6.id invisible not all ids under this class .
I have read each and every page available.Some things Iv unsuccessfully tried (Separately)
var vid= this.impbtn6.id;
jQuery("#"+ vid).visibility("hidden");
$('#vid .impbtn').css('visibility',"hidden")
var row2=$(".impbtn").find("div#"+vid);
row2.hide();
$('#vid .impbtn').css('visibility',"hidden");
$('div#vid').css('visibility',"hidden");
$('.impbtn', $("#div" + this.impbtn6.id)).css('visibility',"hidden");
$("#div"+ vid).css('visibility',"hidden");
$("#"+ vid).hide();
$('#vid').css('visibility',"hidden");
row = $('#' + vid);
row.css('visibility',"hidden");
I would highly appreciate a reply/comment.

your question is a little confusing as you say
document.getElementById(this.exportbtn6.id).style.visibility="visible";
works fine but this code shows the div, not hides it, and why cannot the same code be used to hide if you use it to show?
then your other snippet that supposedly works:
jQuery('.expbtn, #this.exportbtn6.id').css('visibility',"visible");
cannot work because #this.exportbtn6.id will not resolve to the variable's content inside the double quotes, so i am pretty sure this line will not do anything.
The way to do this correctly is
jQuery('#' + this.exportbtn6.id + '.expbtn').hide();
but i cannot tell for sure as the question is not clear. If my understanding of your question is correct, the above line will do the trick. Keep in mind that the value of "this" will differ based on context, so it maybe that you are referencing the wrong "this".

Try this
$('#this.exportbtn6.id').css('visibility','visible');

With jQuery:
$("#"+this.expbtn6.id).hide();
I hope it helps.

jQuery: load method reload same div in div?

i'm a little confused.
i want to actually reload the same page and fetch a div with a certain id from it. so i'm trying to reload a part of website into the same part of the website. ;) i know it sounds weird.
somehow i don't get what i'm doing wrong or better how i have to do it.
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view");
so in this case the same div gets loaded into the same div and that's not what i want.
it then looks like:
<div id="#server_view"> <div id="#server_view"> blabla</div> blabbla </div>
i actually just want to grab the contents of the div inside and reload them. how can i solve this little problem.

You can grab the children with the selector you're passing to .load(), like this:
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view>*");
All we're doing different is getting all direct children to insert using the > child selector.

use .get and replace the element
$.get('/server/ftp/' + goToURL, function(response){
var newContent = $(response).find('#server_view').html();
$('#server_view').replaceWith( newContent );
});

Simple end fast.
$( "#content" ).load( "# #content>*" );

if you are using $('#server_view');, you must have DIV ID as server_view, not #server_view