Issues in onload function in jquery - javascript

I am working with shopify store.
I have created to show fancy box when entered my website.
This is code i used:
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>
And i used notifIt.js and jquery.js files. Now its working fine, I have taken code from this site http://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/
Instead of click the text box, i need to show that notification box automatically.
So i changed above script onclick to onload.. but nothing seems to be work
May i know, what is my mistake? Thanks in advance.

Do you want to show your notification on page loading?
If you do, you can use this:
$(document).ready(function() {
not1();
});

Call Your function, directly. It will be called automatically on script tag loading.
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
not1(); //CALLING FUNCTION, It will be called automatically. I hope it would help.
</script>
For reference see Can't apply simple hide function on div

Related

How can I make an AJAX application similar to nodebb?

I am very new to ajax and am really struggling. My end goal is to make a forum software like nodebb. I've already made a php forum but decided not to use it because it just seemed old unlike faster looking forums like nodebb. What I'm trying to understand is how to make multiple tabs that display different information each but keep the same data for the header. I understand this is probably a very simple thing to do, but currently I am unable to accomplish this.
https://dogecraft.net is a great example of what I'm trying to accomplish.
If you click on the different tabs, it loads information in each one. I tried this but I had trouble with the url. When I reloaded, it simply just loaded my new file and that's not what I want.
(Yes, I am using a local jquery file. Jquery isn't the issue.)
I've tried w3schools but didn't find really helpful information
I've also tried many other websites.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$( "#one" ).click(function(){
$("#div1").load("/one/").hide().fadeIn();
window.history.pushState("object or string", "Title", "/one/");
});
});
$(document).ready(function(){
$( "#two" ).click(function(){
$("#div1").load("two.html").hide().fadeIn();
});
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>
</body>
</html>
I would like to have a homepage 'index.html/php'
I need a button to load one page of content (one.html/php) and then another button that loads another page of content (two.html/php).
On refresh, I would like it to keep the same content that was on the homepage including the buttons in the header.
You could make an Ajax call to your html/php to retrieve the html code and then inject the content on your div. Here is an example:
$(document).ready(function() {
$("#one").click(function() {
$.ajax({
url : 'http://myserver.com/myhtmlpage.html',
success : function(html) {
$("#div1").html(html);
}
});
});
$("#two").click(function() {
$.ajax({
url : 'http://myserver.com/myphppage.php',
success : function(html) {
$("#div1").html(html);
}
});
});
});
When you click a button, an ajax call is made, and if succesful, the success function will be called. The first parameter has the html code of the webpage you requested. Then you can use the html function of jQuery you can inject it on your div.
A couple of tips:
You might want to use only one onready function, no need to declare it several times
You might consider returning a json object with the data instead of a php page. This will be useful later on if you consider using a framework such as Angular or Vue. If you can generate a JSON file on your php such as this:
{
"name": "John"
}
Then you could do something like this:
$("#two").click(function() {
$.getJSON({
url : 'http://http://myserver.com/myphppagethatservesjson.php',
success : function(json) {
$("#div1").html("<h1>My name is " + json.name + "</h1>");
}
});
});
Then it will render "My name is John".
This could be improved a lot,but I hope it could help you a bit.

How to fade in a div message on page load with jQuery

I am trying to display a div message when the page loads using fadein and fadeout after 3 secs but my code does not seem to work, any help please? what am I doing wrong?
HTML
<div id="message" class="jumbotron" style="display:none;">
<p><?php echo $m; ?></p>
</div>
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});
Your code works for me (Here's a fiddle). The issue is either that you haven't included a valid link to the jQuery library, or there is an error that occurs before it gets to the below code that causes it to stop executing.
jQuery
$(document).ready(function(){
$('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});
Are you writing this script on the same page as the div element or does this lies in an external page?
If on external page then try checking if the control even passes to this page or not by simply putting an alert box or not.
If this script is on the same page, then make sure you write this script after the element you defined as if you have written this on the top or before the #message div then the script would run before it even gets loaded on page and you would not see any difference.
Just fade in the message on page load and then set a timeout in order to fade out after 3 seconds
Check the DEMO
EDIT
$('#message').fadeIn()
.queue(function() {
setTimeout(function() {
$('#message').fadeOut();
}, 3000);
$(this).dequeue();
});
$('div#message').fadeIn(3000,function()
{
$(this).delay(3000);
$(this).fadeOut(200);
});
Hope this will work for you.

jquery .load() function only working the first time

So I have a website I am working on just as a personal website that uses jQuery and jQuery UI
Previously I have been using hidden html code and just using jquery to show it.
But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.
Right now, its set to a .click function.
For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.
Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.
$(".jquery").click(function(){
clearImageArea();
hideThumbnails(5);
showThumbnails();
$("#1").click(function(){
$(".imagearea").html(js);
$(".jscode").show(1000);
$(".title").text("Extending jQuery");
});
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html");
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
now my hidden stuff in my html file
First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()
<div class="jquery2 hidden">
</div>
My other div looks like this which is put into imagearea by clicking on #1
<div class="jscode hidden">
<div class="block">
//lots of js code escaped out into html
</div> <!-- end of block-->
</div>
elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.
if you want to see an out of date example of what I am working on
go to www.3realsoft.com (only cs and js work on skills)
if you want to see any additional parts of my code, just ask. Most of it is there on my website though.
I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.
Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$('.detail-expand').click(function () {
var detailRowElement = $(this).closest('.session-row-tr').next();
var detailElement = detailRowElement.find('.detail-row-div');
var sessionId = detailElement.data("sessionId");
detailElement.empty();
detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
$.bootstrapSortable(true, 'reversed');
});
detailRowElement.show();
});
});
</script>
Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html", function() {
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:
var jquery2 = $(".jquery2").html();

change value of link running php code

i want run a php code when a user click a link and change temporarily value of link with output returned by script without reloading page and redirect user to another page
for example if a users click on button :
Click Me!
a code php run for example script.php
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("script.php");
return false;
}
</script>
Click Me!
for example if output of script( $result ) is: 30
then 30 will replaces button: "Click Me!" without reloading page
so at the end after the script is executed i have temporarily instead of "Click Me!" number 30 and if is possible also add a animation gif or something of similar so as: wait wait blinking during execution of script
thanks
Try this, create a class with two methods uW (user wait) uWC (user wait cancel). This class can be reused for future as well
var Util = {
uW:function(id) {
$("#"+id).html("<img src='path to animation GIF' />");
},
uWC:function(id,data) {
$("#"+id).html(data) ;
}
}
Now your function will looks like this
function doSomething() {
Util.uW('clickme'); // clickme is ID of your anchor tag
$.ajax({
url: "script.php",
context: document.body,
success: function(data ){
Util.uWC('clickme',data );
}
});
This might be what you are looking for. I am guessing you want to replace Click Me! with the value returned(30). If not, you can user data inside the function to replace whatever u want
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$el=$(this);
$.get("script.php",function(data){$el.html(data)});
return false;
}
</script>
Click Me!
Click Me!
And the javascript code:
$(function(){
$('#clickme').click(function(){
$(this).load('script.php');
return false;
});
});
You almost have your answers in your question. Use ajax. http://www.w3schools.com/ajax/default.asp you are also using jquery. Jquery has excellent documentation on ajax

call function to highlight code

Please see the the following http://valogiannis.com/recent/ .I have a webpage and when user click XHTML code a div with id result loads the contents of a webpage (in this case codes/advocasys.html). In fact what I wish to do is to highlight the html code. I have link the necessary css/js. I use the SyntaxHighlighter 3.0.83. This highlighter needs to call the SyntaxHighlighter.all() after the <pre> tag (more info here). If I have the html code in the same page which I want to highlight works nice, but I cannot make it to work, when the script loads the external page advocasys.html. I tried to put the
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
in the bottom of the advocasys.html, but It didn't work. How can I make it work?
Thanks in advance.
The .all() call attaches an event handler to window.load which already happened, instead use .highlight(), like this:
SyntaxHighlighter.highlight();
You need to call SyntaxHiglighter in the callback function after the data is returned:
$('#myLink').click(function(){
$('#result').load('codes/advocasys.html', function() {
$('#result').show();
$('.scroll-pane').jScrollPane();
SyntaxHighlighter.highlight();
});
return false;
});

Categories