The problem is upon load of website, width of .mCSB_container class is ok, but when i click on a link, for example "projects" link, which fires an ajax function, width of .mCSB_container does not change even if contents are not that much. Web page will not load upon click on the link. I tried using the "update" function, but seems like it is not working.
ok I use this plugin and i had te same problem but check this:
<script type="text/javascript">
$(function() {
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true // <- the solution
}
});
// get ajax link
$('.Link').click(function(){
$.get(this.href, function(data) {
$("#content .mCSB_container").html(data); // fill .mCSB_container
$("#content").mCustomScrollbar("update");
$("#content").mCustomScrollbar(
"scrollTo"
,"top"
,{scrollInertia:200}
); // go to Top content
});
return false;
});
});
</script>
Related
I want to make a simple hovercard that shows me the number 1 coming from a php page: hover.php
<?php
$user='1';
echo json_encode($user);
?>
And show it to me when I hover a simple link on another page index.php using tooltiper function in hover.js
$(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
// we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
continueTooltip();
// next, we want to check if our data has already been cached
if (origin.data('ajax') !== 'cached') {
$.ajax({
url: '../hover.php',
success: function(data) {
// update our tooltip content with our returned data and cache it
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
});
when I hover the link it just shows me "loading..."
why does the number 1 not show up?
Is it possible using jQuery to literally refresh a div?
Nothing like submitting a form or anything like that.
I have a data stream which is updated else where and all I want to do is refresh the div and all its contents as if it were a page refresh. I can't link to that page to make a return that populates as the only output is just raw data.
The div itself contains all the data display processing. Nothing needs to be fetched as the data is already there.
you have to use setinterval with ajax function,
$(document).ready(function(){
setInterval(function(){ refreshDiv(); }, someInterval);
});
function refreshDiv(){
$.ajax({
url: "http://yourrequestpath",
.....
});
}
<div id="data"></div>
<script>
$('#div').load("loaddata.php", function() {
window.setInterval("loadData", 60000);
});
function loadData()
{
$('#div').load("loaddata.php");
}
</script>
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
I have form with Tinymce. I am saving text writen in tinyMce using ajax call.
when I press the save button it does not save the latest value which i entered in tinymce.
i.e. when i load the page, default value in the field is "aaaa". I update it to "bbb" and press the save button. but it saved the value "aaaa". Now I change the value from "bbb" to "ccc" and press the save button now it save the previous value "bbb" not "ccc". so it is keep saving the one step old value. I don't know why?
Here is the saveAction which I am calling on Save button using ajax
public function saveAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
var_dump ($_REQUEST);
if($this->getRequest()->isPost())
{
$data=$this->_getParam('content');
var_dump($_REQUEST); // var dump shows the old value each time i press the save button
}
here is my form
here is ajax script
$('#frm').submit(function() {
var options = {
target: '#response',
beforeSubmit: showRequest,
success: showResponse,
url: '/admin/index/save'
};
$(this).ajaxSubmit(options);
return false;
});
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
}
function showResponse(responseText, statusText, xhr, $form) {
}
Try to do the following on button click before you anything else:
tinymce.activeEditor.save();
This will set the actual editor content to the textarea in the background.
Hi i searched alot about this then from tiny mce site i found this onkeyup event that can be added in the script code in head.
// Adds an observer to the onKeyUp event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyUp.add(function(ed, e) {
console.debug('Key up event: ' + e.keyCode);
});
}
});
I replaced some parts like below
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
tinymce.activeEditor.save();
});
}
});
so now whenever i change something in any tinymce textarea on my page the current text is saved and ajax get the current value.
I got my problem solved.
I am just a starter in ajax and JavaScript having a desire to achieve perfection.
I hope this helps others as well :)
Just remember me in your prayers.
Happy coding :)
tinyMCE.activeEditor.save();
(caps letters for MCE)
All,
When I click a link on a web page, a JQuery UI Dialog opens up and it loads some ajax content into it. If I click a link inside this dialog, it opens up a child dialog. When I click "OK" in the child dialog, I want the child dialog to close and refresh the ajax content in the parent dialog.
Do you already have the code that closes the child dialog ? Is it an alert() call ? If so, simply add a
location.reload();
after the alert call. If it's something more complicated like a link, try
$('a.link-that-closes-dialog').click(function(){
//Code to close the dialog
location.reload();
});
i use this script for choose if show/hide any content.
After clicking button "Ritira" in the dialog, the page redirect me in the same page but whit a querystring (ex. www.mypage.ext?t=yes).
The script work, but I wish at the click of the button "Check Out" there is a refresh of the page.
I tried to enter the location.reload but did not work:
$(function() {
$(document).ready(function() {
$(".dialog-ritira").dialog({
autoOpen: false,
modal: true
});
});
$(".ritira").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$(".dialog-ritira").dialog({
buttons : {
"Ritira" : function() {
window.location.href = targetUrl;
location.reload();
},
"Annulla" : function() {
$(this).dialog("close");
}
}
});
$(".dialog-ritira").dialog("open");
});
});
Thanks