We Keep Coding

jQuery function that dynamically load data AND also execute js?

For example we have two php pages (same domain):
index.php
data.php (that uses a jQuery script)
If I load a part of the "data.php" inside the "index.php" I have to re execute the js file from the "data.php" like this:
$( ".box" ).load("data.php .my_data", function() {
$.getScript("https://website.com/js/data.js");
});
Is there an other/better way to load a part from the external data.php and automatically execute all js that is connected with it?

data.php (this template contains no script)
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
Script on index.php:
In this example, I just show the event when clicking on the button, there are some ways to define it:
Option 1: Write the event after loading template successfully
$('.box').load('data.php').done(function (template) {
template = $(template).appendTo('body');
template.on('click', 'button', function () {
console.log('clicked!');
});
});
Option 2: Write the event outside the event which is used to load the template
$('.box').load('data.php').done(function (template) {
$(template).appendTo('body');
});
$(document).on('click', 'button', function () {
console.log('clicked!');
});
This ways require all of the scripts which are working on data.php are ready on index.php.
If you don't want to move/split the code:
data.php:
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
<script src="/js/data.js"></script>
In the file data.js, if you want to load something more but not immediately, make sure you're working with document (there are more ways but I highly recommend this):
data.js
// this code works imediately after your document has `.load` class
$(document).on('click', '.load', function () {
// this code will work if your document already has `.box` class
$('.box').load('some_data.php').done(function (template) {
console.log(template);
});
});
On the index.php, after appending the template, the code will work correctly. Nothing is automatically more.

How can I show only one div id from an external html file inside a popup modal?

I have some content on an external html file that I am displaying in a popup modal using jQuery Modal. I am able to display the whole page fine, but I would like to only show one div at a time depending on which link is clicked.
The content on the external page looks like this:
<div class="review" id="one">This is review #1</div>
<div class="review" id="two">This is review #2</div>
<div class="review" id="three">This is review #3</div>
The links on the main page are coded like:
<a class="link" href="external.html" data-target="#two" rel="modal:open">Read review</a>
Then I have some Javascript that I thought would allow it to only show the selected div id depending on which link is clicked:
$(document).ready(function() {
$('.link').on('click', function() {
var target = $(this).data('target');
$('.review').not(target).hide();
$(target).show();
});
});
This shows all the content from the external html and not just one selected div.
Is there a way to show only one div id from an external html loaded into a modal?
Update:
I have attempted to implement Bhojendra's solution below, but am now getting the error:
"TypeError: null is not an object (evaluating 'this.$blocker.fadeOut')"
The link to view the code:
https://drive.google.com/open?id=1n61Buty8oexE369jdxCi4lZ9M9wj2SaP

From the documentation example that you linked, you can do like:
$('.link').click(function(event) {
event.preventDefault();
target = $(this).data('target');
$.get(this.href, function(html) {
$(html).find(target).appendTo('body').modal();
});
});
A better to have modal content wrapper in your body:
<div id="modal-content"></div>
Now, in jQuery, use this:
$('#modal-content').html($(content).find(target)).modal()
// html parameter renamed ^^ to content
I meant to use:
$('.link').click(function(event) {
event.preventDefault();
target = $(this).data('target');
$.get(this.href, function(content) {
$('#modal-content').html($(content).find(target)).modal()
});
});

How to use JS in Framework7?

I create an application with framework7. Now I try to execute a javascript in my page-content, but it doesn't execute.
<div class="pages">
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
<script type="text/javascript">
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>
</div>
How can I run this javascript code ?
UPDATE
The page is loaded from an other HTML-Page.

Use Callbacks (onPageInit) to execute code

I had never heard of Framework7 before this, but after taking a look at the docs, I don't believe you are going to be able to use Javascript this way.
It would appear that for JS events, you have to scope the event inside a Framework7 constructor:
var myApp = new Framework7();
var $$ = Dom7;
$$('.alert-text').on('click', function () {
myApp.alert('Here goes alert text');
});
Of course the above example is taken directly from the F7 documentation, and is dependent on a click event, but you may be able to try out the alert event as a method of myApp and see if that works for you.

var myApp = new Framework7();
//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="dashboard"]', function (e) {
console.log('dashboard loaded with page:init');
createGraph();
});
Above worked me well.. although following didnt work.
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});

If you written any javascript code inside index.html file, Put that code in
<head>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</head> like this, which is defined in index.html file
Or ,if you want write JS code for some particular html file ,
Do like this
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
</div>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>

External POST form through iframe

I'm trying to get a page which includes a POST form to load inside an iframe for users to be able to confirm an action such as deleting a listing. I have successfully got the JS and the form page to load inside the iframe, but when I click an action inside the form, it's not updating the listing. Instead, it just refreshes the page.
The form is working fine because if I try to access the content-url manually in the browser and update the form, it works fine.
How can I get the iframe content to refresh instead of the parent page and load the response inside the iframe itself? What I am doing wrong exactly?
Any help is appreciated!!
Here's my code:
HTML:
<button class="myclass" content-url="<?php bloginfo('siteurl') ?>/?a_action=delete_auction&pid=<?php the_ID(); ?>">Delete Me</button>
<div class="popup"><iframe id="mynewiframeid" name="myframename" src=""></iframe></div>
JS:
$(document).ready(function() {
$(document).click(function(e) {
if ($(".popup").is(":visible")) {
$(".popup").fadeOut("fast")
}
});
$(".myclass").click(function() {
if (!$(".popup").is(":visible")) {
$('#mynewiframeid').attr('src',$(this).attr('content-url'));
$(".popup").fadeIn("slow");
}
return false;
});
$(".popup").click(function(e) {
e.stopPropagation()
})
});
Form:
<div class="popup_content">
<h3> You are about to delete <b><?php echo $title; ?></b>!</h3>
<?php
if(isset($_POST['yes_confirm']))
{
$s = "update ".$wpdb->prefix."posts set post_status='trash' where id='$pid'";
$wpdb->query($s);
echo '<div class="deleted_item_ok">';
printf(__('Your item has been deleted successfully!'));
echo '</div>';
}
else
{
?>
<form method="post">
<div class="are_you_sure_delete">
<?php
_e('Are you sure you want to delete this item?');
?>
</div>
<button class="button-small button-w-green" type="submit" id="submits" name="yes_confirm">Yes, Delete</button>
<button class="button-small button-w-red" type="submit" id="submits" name="no_confirm">No!</button>
</form>
<?php } ?>
</div>

You are trying to replace html in the class "popup" with following js code..
HTML => <div class="popup"><iframe id="iframeid" src=""></iframe></div>
JS => $('.popup').html(response);
This replaces the iframe element in the HTML above with the response..! Therefore after response comes, no iframes inside the page..
If you do want to use an iframe, I don't think you have to deal with AJAX. Instead just change the src of iframe. You may use following js code..
$(document).ready(function() {
$(document).click(function(e) {
if ($(".popup").is(":visible")) {
$(".popup").fadeOut("fast")
}
});
$(".myclass").click(function() {
if (!$(".popup").is(":visible")) {
$('#iframeid').attr('src',$(this).attr('content-url'));
$(".popup").fadeIn("slow");
}
return false;
});
$(".popup").click(function(e) {
e.stopPropagation()
})
});
Fiddle (with fake src urls)

First of all, correct the following errors and then see if it works:
in your you are missing semicolon after the closing parenthesis
you close the php tags and right after you continue with url and then you add another closing php tags
What you are looking for is this inside your content-url:
<?php bloginfo('siteurl') . '/?a_action=delete_auction&pid=' . $the_ID; ?>
What is the_ID()? I dont see that function. And if exists it has to return the value that you will store in variable $the_ID. You also have to call that function before button tag to get that variable.
In your JS you need to wrap everything in $(document).ready(function() {}
It seems you are trying to do GET request and not POST request since you are not sending any data in the body but in the url
Missing semicolon at the end of first .click function
I didn't even look at all other .click functions cause there's some repetitions going on and more weird stuff

html body onload function need to remove and execute the same function with cookie but only first visit

this is my html page content (a part of it)
<body onLoad="javascript:introJs().start();">
<div id="page">
<div id="header">
Link
Headline
</div>
I have implemented introjs with my html page as shown above. but i need to automatically execute the function given on html onLoad.. but only on first visit with cookies. I have no idea about cookies. can anyone please change or create a cookie which execute the introjs automatically on first visit.

You can use localstorage like,
SCRIPT
window.onload=function(){
if(!localstorage.getItem('intorjsInit') && localstorage.getItem('intorjsInit')!=1)
{
javascript:introJs().start();
}
else
{
localstorage.setItem('intorjsInit',1);
}
};
HTML
<body><div id="page">.....