jQuery dialog - Internal html hyperlinks - javascript

I have searched the forum and the internet for an example on how to move around in a dialog box using hyperlinks. Maybe this is an old and answered problem but here goes:
I am loading the html content from either a database or a file. This content contains a lot of internal hyperlinks to various divs etc. in the html code. None of them are working, not even links to move to the top of the page within the dialog.
My question is simply if this, at all, is possible to do? And if it is what am I doing wrong?
Simple html file example (htmlfile.html):
function showFile(file){
$.get(file), function(result) {
if (result != undefined) {
//Open the dialog here
$(result).dialog({
.
.
});
}else{
alert("Could not load content");
}
});
}
<div id="top">
METAR
<div>
<div>
--some html content --
</div>
<div id="metar-tag">
--some html content --
</div>
</div>
Go to top
--more content--
</div>
The dlg box is open with:
showFile("htmlfile.html");
This file is loaded ok in the dlg box but the link is not working.
Any suggestions is very much appreciated.
Cheers!

Related

reCaptcha not shows on my singlepage website

I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?
I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.
update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>
You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>

featherlight.js - Run script on modal load

Problem
HTML
<div id="form-lightbox">
<div class="form">
<div id="ajaxreplace">
<script type="text/javascript">
jQuery(function() {
jQuery.ajaxReplace({
//parameters
});
});
</script>
</div>
</div>
</div>
open lightbox
It is a custom script that replaces the script with a form from the backend.
The problem is, that featherlight.js copies the source and displays
the clone in the lightbox.
That duplication of code can't be handled by the library for the form.
I changed the script-tag-type to "text/x-template" so the script does
not run directly. But then the form isn't rendered in the lightbox.
Question: How can I use featherlight to run the script on loading the the lightbox?
To run code after the lightbox is opened, use callbacks (e.g. afterOpen).
If you don't want content to be duplicated, use the persist option.
HTH

I want to change the main content dynamically with javascript instead of individual pages

My website is currently using .tpl template files to load different pages dynamically. That will load an entire page again, so header, sidebar (chat), main content and the footer.
In my index.php file there is a switch case which loads the page 'home' when you click on 'home' in the menu. (example)
But I don't want that. Because their is also a chat in the sidebar, and that reloads/resets eveytime you load a different page. So all previous messages will be gone. So what I do want is changing only the main content part. So header, sidebar and footer will stay and won't reload.
I tried to do it with javascript but that didn't work...
Can someone help me or atleast put me on the right path?
(And yes, I have been searching for the last hour on stackoverflow and google but couldn't find anything...)
What you need is called AJAX(With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.)
To use ajax u need Javascript to send the request to a PHP file that loads the smarty template that contains your main content and insert the html code back into the page:
<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>
//link on 'home' site
Home
//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
e.preventDefault();
$.get("some-php-file.php", function(smarty_html_data) {
$(".main-content").html(smarty_html_data);
});
});
Please follow following instruction :
Create separate .tpl file for header,footer,sidebar and contents files.
In main file include header,footer,sidebar and left one section for content.
3.Replace your .tpl (using id or class) file content using ajax call.
bind your url with function.
Sample code as below:
// sidebar.php
<ul>
<li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
<li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
</ul>
// master.php
<?php
include("header.php");
include("sidebar.php");
?>
<section id="fileContent">
</section>
<?php include("footer.php");
?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changePage(obj)
{
var Filename=$(obj).data('page')
$.get(Filename, function( data ) {
$( "#fileContent" ).html(data);
});
}
</script>

How to load div only on click and not when page loads?

Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>

Can I store HTML fragments in different files but access via JavaScript

Not sure if I have phrased my question correctly but I shall try to explain clearer in the body of my question.
I am using ASP.NET C#.
I have a single WebForm page.
In this page, for example I have this:
<div id="page1" style="display:block">
page 1 contents
<a href='#' id="liPage1" onclick='Page2();'>Page2</a>
</div>
<div id="page2" style="display:block">
page 2 contents
<a href='#' id="liPage2" onclick='Page1();'>Page1</a>
</div>
<script>
//this is just sudo code
Page1 function will hide div page2 and show div page1
Page2 function will hide div page1 and show div page2
</script>
Now I do not need any help with the script.
What I am asking is whether I can have the HTML for page1 in 1 file and the HTML for page2 in another file and load these HTML 'fragments' via client-side.
I can easily do this in server code by encapsulating the HTML in a user-control.
I want to know if I can do the same using client calls. But I really do not want to 'write' the HTML within JavaScript code itself.
I am asking this because I intend to have quite a few pages and I want to render it all via client-coding rather than calling back to the server each time. It is all a question of readability and management.
I was thinking along the lines like resource files but not sure how.
I hope this is all clear?
Yes, you can simply do some ajax calls, and then set the response as the content of a container element.
So, let's say yo have file1.html, file2.html and file3.html, and you want to include all those "fragment files" in a #container.
The script will look something like this:
[
"file1.html",
"file2.html",
"file3.html"
].forEach(function(file) {
var xhr = new XMLHttpRequest();
xhr.open("GET", file, true);
xhr.addEventListener("load", function() {
document.querySelector("#content").html += xhr.response;
});
xhr.send();
});

Categories