Develop Reference

Multiple execute js script

I have a problem with js script.
I load subpage by ajax and append code to div.
$.ajax ({
type: "POST",
url: "load/page/",
dataType: "json",
success : function(data) {
$('.content').empty();
$('.content').append(data);
},
error : function(e) {
console.log(e);
}
});
Subpage contains appeal to js script:
<script src="//<?php echo $_SERVER['SERVER_NAME'].'/'.BASE_DIR; ?>/scripts/settings.js"></script>
Why when i execute ajax multiple times settings.js events are executing multiple too? I want to could execute ajax code multiple times but js scripts are executing only once.

I replaced $(document) to $('.content') and add line $('.content').off(), now code is working great.

Ajax Not Loading PHP

I'm trying to load a PHP file into another PHP file on a click event through Ajax. I'm trying to do this to eliminate loading several modals I have on the page. It seems the PHP file is loading (in the console), but nothing is showing up.
Here's my javascript:
$("a#lightbox-open").click(function(e){
e.preventDefault();
$("body").addClass("noscroll");
$('section#lightbox').addClass("open");
$.ajax({
context: '#lightbox-holder',
url: '/template/lightbox.inc.php',
type: 'POST',
dataType: "json",
success: function(html){
alert("works");
}
});
});
In my main PHP file, I have a div #lightbox-holder that lightbox.inc.php is supposed to load into it.

context expects a (Plain)Object (as you can read in the api doc). Replacing '#lightbox-holder' by $('#lightbox-holder') will do the trick.
Working fiddle with the $() added versus non working fiddle representing your current code.

Call event after script in external html loaded by Ajax

I have an Ajax Loaded Div in my page and, inside that div, a Jquery plugin load my Google Spreadsheet. I need to add some "event listening" to detect when that spreadsheet is loaded, but there is a problem with the unpredictable time to load and the fact that a event INSIDE my div (with external html content), as far as I know, can't be listened on my "parent" window. I've tried many ways to do that, by the way.
I'll post my code, but I don't think it can help. What can I say is: The height of my div change when the content is loaded. The Callback function can't work in this case 'cause my script (inside div) only get the spreadsheet after load the page.
index.html
$.ajax({
url : "test/index.html",
type : "get",
async: true,
success : function(result) {
$('.mailcontrol').html(result);
},
error: function() {
alert("Error");
}
});
test/index.html
<script type="text/javascript">
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets/ssid'});
</script>
Any ideia about some event listening in my case? Thanks!
EDIT:
jrummell answer gave me the ideia to ignore the external html file using the plugin inside the same page, so, I could use the callback function of "sheetrock", as suggested by Andre.
Thanks for the answers!!
New code:
$("#target2").click(function () {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'sheetrock.min.js';
$("#dat").append(script);
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets',
callback: function() {
}
});
});

Try initializing your spreadsheet plugin after the content is loaded:
$.ajax({
url : "test/index.html",
type : "get",
async: true,
success : function(result) {
$('.mailcontrol').html(result);
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets/ssid'});
},
error: function() {
alert("Error");
}
});

You can use Jquery on() event listening, like this:
$('.mailcontrol').on('eventName', '#dat', callbackFunction);
The "selector" parameter is a selector string to filter the descendants of the selected elements that trigger the event. In your case "#dat". I suggest using "resize" as eventName.
Reference: http://api.jquery.com/on/

Have you tried the original sheetrock callback?
$('#dat').sheetrock({
url: 'https://docs.google.com/spreadsheets/ssid',
callback: function() {
//trigger event to be caught
}
});
Reference: https://github.com/chriszarate/sheetrock#callback

How to call a Jquery method on page load or page refresh in jquery

I have created a new JQuery widget for my project and I need to call that method on page load.
Here is the widget sample:
(function($){
$.widget("mywidget", {
options: {
},
_create: function(){
var self = this;
$.ajax({
url: "/api/1.0/getdata",
type: "GET",
contentType: "application/json",
success: function(arg) {
//will be inserting the details from the json call into the <div>
var data = arg;
},
error: function(resp){
}
});
}
});
})(jQuery);
Here is how I am trying to make the call to the widget:
$(document).ready(function(){
console.log("show my widget");
$("#div").mywidget();
});
Here is the HTML I am trying to load for my widget:
<div id="div">
<p>Welcome to the newly created JQuery widget</p>
</div>
But when I do this nothing gets called, neither is the URL called, from which I am trying to access the data to show in my message nor the <div>. Any idea how can i access the widget on page load?

Syntax errors aside, using the latest stable jQuery UI I had to include a namespace in my widget name. Here is a jsfiddle with your code working. Note that it will correctly output an error attempting to hit /api/1.0/getdata.
If this solution doesn't work in your setup, ensure that the widget initialization code is being run before attempting to use it.

It seems that your document ready is just missing brackets..
try -
$(document).ready(function(){
console.log("show my widget");
$("#div").mywidget();
});

how to run javascript code that included through ajax process

I have a php page which has lot's of code of html and javascript inside it.Ihe other page use ajax to send an id to the first page and get the results and put it inside a div element. Now I want to run those returned codes which contains javascript and html codes.
How should that be done?
This is my ajax request to the first page:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "showing.php",
data: "s_id="+s_id+"&submit=true",
success: function(msg){
str=$.trim(msg)
document.getElementById('tabs-2').innerHTML = str;
document.getElementById("ui-id-2").click();
}
})

I think event delegation can solve your problem.
Like below:
Use $.on(). Instead of registering events on the element you register on a parent which will not be removed
Ex:
$('#tabs-2').on('click', '#ui-id-2', function(){
//do something
})