Develop Reference

External html file not showing for local client side include

I have an index.html file which I am trying to add a client side include for my footer using JavaScript. However, my "footer.htm" include is not displaying, just the text is. I am pretty sure there is an issue with my JavaScript code. I know there is no problem with my footer.htm file. Please Help!
document.write('footer.htm');
<div id="Footer">
<script type="text/javascript" language="javascript" src="footer.js">
</script>
</div>

Assuming you are using jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#footer').load('footer.htm');
});
</script>

Remove a script with jQuery

I have a problem with my jQuery. So, I want to remove a script who is inside a <div>.
My html is :
<div id="right-bloc">
<div class="right-bloc-pub-1">
<script type="text/javascript" src="http://firstScript.com"></script>
</div>
<div class="right-bloc-pub-2">
<script type="text/javascript" src="http://secondScript.com"></script>
</div>
</div>
My jQuery :
var stringOfHtml = '<script type="text/javascript" src="http://firstScript.com"></script>';
var html = $(stringOfHtml);
html.find('script').remove();
I want to remove the script witch contains http://firsttScript.com, but not working. It's possible to remove this script and add after? Because I need to refresh this script

You can specify it as the following code:
html.find('script[src="http://firstScript.com"]').remove();

Assuming the <script> tags are actually in your html DOM and you have jQuery reference included.
You can use .filter() to get the script with src as 'http://firstScript.com' and the .remove().
$('html').find('script').filter(function(){
return $(this).attr('src') === 'http://firstScript.com'
}).remove();
Also,
var stringOfHtml = '<script type="text/javascript" src="http://firstScript.com"></script>';
var html = $(stringOfHtml);
This is Not allowed and would throw error Unexpected Token Illegal

Try This:
$(document).ready(function(){
$('.right-bloc-pub-1').find('script[src="http://firstScript.com"]').remove();
});
OR
$(document).ready(function(){
$('.right-bloc-pub-1').find('script').attr('src', 'http://firstScript.com').remove();
});

The only need changes
var html = $(stringOfHtml);
html.remove();

To select and remove your first script you can do this way : $('script[src="http://firstScript.com"]').remove()
Just know that this will remove the script from your DOM but not the library loaded within this script. For example if your first script load jQuery, the $ variable will still contains jQuery. To remove completely jQuery you can add $ = undefined; jQuery = undefined;

$(document).ready(function(){
$('.right-bloc-pub-1').html().remove();
});
try this

You need to delete events related with that script.
So you must look for events that belong to that script.
The $._data(document,'events') is best choice to start with.

jquery Tab only works when referring the script locally in the same page

I am trying to use jquery UI tab in mvc4 application. All the necessary scripts and styles added in bundleconfig and referred in layout.cshtml page.
please refer below code.
<div id="tabs">
<ul>
<li>Table</li>
<li>Heat</li>
</ul>
<div id="tabs-1">
content fo tab1
</div>
<div id="tabs-2">
Content for Tab2
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
required scripts already referred in layout.cshtml. but still tab not working properly. then i tried to add it in locally in same .cshtml page.
<link rel="stylesheet" href="#Url.Content("~/Content/jquery-ui-1.9.0.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.9.0.min.js")" type="text/javascript"></script>
then it works fine but it loaded jquery and UI scripts two times
I don't know what the exact problem is.

Hey try as follow and remove the added jquery lib files from .cshtml page.
$(document).ready(function(){
$("#tabs").tabs();
});

I think you should add render section for scripts to the end of body tag in layout.cshtml
#RenderSection("scripts", required: false)
And type script code in Scripts section on view
#section Scripts {
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
}
PS: links for jquery and jquery.ui must be before RenderSection in layout.cshtml

How to include my Javascript file and/or jQuery in my HTML web page

I have:
controller/reports_controller.rb
views/reports/index.html.erb
assets/reports.js
I have an image in index.html.erb:
<div class="main_mark">
<img src="/assets/welcome_main.png" alt="main" class="main_mark_image" />
</div>
I want to print an message to the screen (alert message) when the user presses the image. so I want to write a function in reports.js that print the message.
reports.js:
$(document).ready(function() {
$(".main_mark_image").click(function () {
alert("alon");
});
});
but I think I have to relate between the java script the the html.
any help appreciated!

When using an external script you need to tell your HTML file:
<script src="assets/reports.js"></script>
The above assumes that your 'assets' folder is in the same folder as your index. You also need to include the jQuery library. It's available for download or you can use Google's:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Or, for jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
Hope this helps.

Try:
<img src="/assets/welcome_main.png" onclick="alert('alon');" alt="main" class="main_mark_image" />

jquery show/hide not working on wordpress

I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>

It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />

You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict

Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>