firstly i understand that there are many questions on here about the same subject and yes i have read most of them, unfortunately i just cant seem to process the information to make it work,so i was hoping someone could possibly point me in the right direction to help me solve my issue out??
firstly the set up of the directories of my site, i have all different sections that are 'included' amongst each other to keep my site more simple when changes are needed, but my point is.. in my overall footer.php page i have 2 just before the tag they are
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/general.js"></script>
the general.js file is from a tutorial i seen which made it alot easier to have all the things in the same one place of there own.
So what i want is to refresh/reload a div id="menu_bar" with a navin which is for my menu at the top of the screen, on there i have a inbox system set up and that is the reason i would like to have this auto refresh, so it will basically show me i have a message instead of me just pressing F5 to check. plus i plan making a notification system and im guessing this would be an appropriate way to show that i have notifications... So as im very very VERY new to jquery, AJAX and most other things this stuff doesnt make too much sense, i get a bit, but still... so the code i have seem to put together from a variety of tutorials and here is what ive got ...
$(document).ready( function(){
$('#menu_bar').load('includes/menu.php');
refresh();
});
function refresh()
{
setInterval( function() {
$('#menu_bar').fadeOut('slow').load('includes/menu.php').fadeIn('slow');
refresh();
}, 3000);
}
So can someone help me by showing where ive gone wrong and WHY ive gone wrong so i can try to understand where i went wrong and how i should fix it? cheers
You shouldn't call refresh() inside the setInterval function,or use setTimeout instead
Related
I've been searching for an hour on how to nagivate within my Laravel website without refreshing the website (page layout), but I couldn't find a proper solution: one that not just loads the HTML, but actually replaces the content view within the layout.
This is my current dashboard:
So when clicking on a menu item within the blue area, I want the red content area to change without page refresh. What would be a scalable solution for this? I'm trying to follow the DRY (Don't repeat yourself) principle as much as possible.
Oh, please don't mark this topic as a clone of other topics as I've seen most of them but without proper solution. Hope anyone can help me out.
Changing a view without page load means we need to use the ajax techology. Vuejs is a frontend frameework the allows us to acomplish that easily with its axios library
I believe you can get this done by using jQuery load function -
$(function () {
$("#menu_option_a").on("click", function () {
$("#dashboard").load("View1.html");
});
$("#menu_option_b").on("click", function () {
$("#dashboard").load("View2.html");
});
});
I am trying to implement the following qTip tooltip script on my page:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
});
I got the script directly from the JS Fiddle documentation page, but unfortunately, the script doesn't work on JS Fiddle either. I am sure there is a typo somewhere in this, but I don't have the JS skills to find it.
Can someone help me to correct this script?
thanks
I like qTip2 but the one thing that I hate about it is that its documentation blows. The creator gives sample code but omits certain necessary parts of it which makes it confusing. He also includes broken fiddles like the one you gave above.
Not to mention, that fiddle is unnecessarily complicated if he is just displaying one tooltip.
I created a very basic example of a qTip2 at the link here: http://jsfiddle.net/ah653at2/1/
I hope you can use this instead to gain a basic understanding of the library.
HTML:
<a id="test">A very basic tooltip example</a>
JavaScript:
$("#test").qtip({
content: {
text: 'This is some tooltip content',
},
});
I've added a plugin that allows the user to add a specially styled div via a dialog. The issue now is, this element should not be clickable inside the edtior. The problem is the users manage it to click inside the div and enter text there and by this screw it up.
I've already spent some time searching the documentation but couldn't find the right approach to do this yet. I'm not asking for code, just some advice how to do it, a pointer to the right API method would be good enough for me. I guess I can somehow access the elements or intercept an users click and prevent them from adding something to my element somehow, I just couldn't yet figure out how to do it.
Use the Widget System.
Widget Tutorial.
Demos.
I've finally managed to get this done by making the elements content not editable. When I create the element in my dialog:
hrElement.setAttribute('contenteditable', false);
When loading the plugin:
init: function (editor) {
editor.on('contentDom', function () {
var stiching = (this.document.getElementsByTag('div'));
console.log(stiching);
for(var i=0;i<stiching.count();i++){
if (stiching.getItem(i).hasClass('stitching')) {
stiching.getItem(i).setAttribute('contenteditable', false);
}
}
});
}
I'm pretty sure this is not the most best solution (don't like to iterate over the elements) but at least it works for me now. Any suggestions how to improve it for future cases are welcome.
I'm using TinyMCE with great results, the only problem now is that using the autosave plugin and after submitting a form, when I try to create a new record the draft for the last submitted form gets loaded.
I've spent some hours looking for a solution without success so, if anyone knows how can I clear the draft after submitting (or onSubmit, or something) I'd be very grateful.
Thanks!
Would the following help?
<script>
$('#myForm').submit(function(e) {
e.preventDefault();
// clear tinymce contents
tinyMCE.activeEditor.setContent('');
});
</script>
After the form has been submitted and you can clean up, e.g. empty the content are, also clear the localStorage by key:
// https://www.tiny.cloud/docs/tinymce/6/autosave/#autosave_prefix
localStorage.removeItem(
`tinymce-autosave-${window.location.pathname}${window.location.hash}${window.location.search}-comment-editor-draft`
);
I have searched on this matter but havent been able to find an answer that work for me.
On my website I have one page with a menu and a div. When clicking on a menu link the information in the div changes (ajax). But then Cufón stop working in that div. I have read about Cufon.refresh but can't get it to work. Which code should I use and where do I put it?
My links look like this:test
I have read about Cufon.refresh at this page but I don't understand how to use it: https://github.com/sorccu/cufon/wiki/API
Cufon.refresh also does not work for me. A workaround is to use Cufon.replace again.
Based on the JS you are using, you can edit the trigger function to work like the below and see if that works. Essentially, it will refresh the Cufon call after you have updated the content on that element.
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
{
document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
Cufon.refresh('#ajaxdestination');
}