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');
}
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");
});
});
In my project, the Ckeditor is part of a webpage, which is coded using GWT. So the interface to CKeditor is using Java.
Whenever the webpage is displayed, the CKeditor will be passed a HTML via setData(), which the CKeditor is supposed to show.
The problem is: CKeditor sometimes won't show the HTML. Its content was just empty, although I am very sure the html had been passed to setData().
I had tried several approaches to solve this problem, but none would work.
My approach
Create a TextArea using DOM.createTextArea()
Call myEditor=CKEDITOR.replace(textArea, config) to initialize the CKeditor
call myEditor.setData(html) to set the content.
It was good and showed the content at the first time.
But after the webpage got hidden and shown again, I called myEditor.setData(html2) to show another html, but this time the CKeditor showed nothing.
First solution (did not work)
I changed the code to call myEditor.destroy() before the webpage was hidden, and call CKEDITOR.replace(textArea, config) again when the webpage was visible again, after that I called myEditor.setData(newHtml).
This time it worked in IE and FF, but not in Chrome and Edge, it kept showing the content of the first load time, instead of showing the new HTML.
Second solution (did not work)
I changed it to call CKEDITOR.inline(textArea, config) instead of CKEDITOR.replace(textArea, config) when the webpage was visible again, while the destroy() and setData() was still called in the same order. This time the CKeditor again didn't show anything from the second time.
Last attempt
My last approach was to not calling destroy(), but creating a new TextArea each time before showing CKeditor, and called CKEDITOR.replace(textArea, config) and setData(html). This seems to work well, but occasionally the CKeditor still showed empty content.
Could anyone please help me to solve this problem?
I am using CKeditor 4.5.8.
Finally I figured out the solution:
Before hiding the ckeditor, call editor.destroy(true), and delete editor. (Before this, I only called editor.destroy() [note: no 'true'], which didn't work well).
Here is the code:
if (editor) {
editor.destroy(true);
delete editor;
}
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
second way ! In controller ,when your query is fetch data from database then use this code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I am trying to create posts with comments with CodeIgniter and I am trying to add voting for the comments with + and -.
But my problem is not actually this functionallity but more exactly creating the link and the method in controller/model for this.
I understand that there is some kind of link to methods.
If I have something like this:
public function like() {
echo 'Test Function';
}
and when I create link like this one sitename.com/posts/first-post/like theoritecally I will see blank page with "Test Function" text (and of course if I write proper routing rule but I cannor for now).
I can see a blank page with this working echo 'Test Function', but does this mean I have to load every methods and views for the entire page if I want to display the entire webpage with all the elements? I think that I mistake something very serious here but I don't know what.
The example with the "Create news" tutorial in ellislab.com didnt help me. They show something similar I think with /create/ section in the URL and create() methods.
If I have many links with functionallities do I have to add new routing rules for all of them? I really tried to search in Google and everywhere but I didnt find anything related.
Sorry for this lame question.
You need to use Ajax call and on callback you have to increase or decrease the count. For creating a link , once page is loading render the data and provided the default link like
for + http://<site.com>/<controller>/like?totalLike=<36>
for - http://<site.com>/<controller>/unlike?totalunLike=<3>
Once user will click + link then by using Ajax, call the controller method link/unlike and increase or decrease the count and repopulate the link again with fresh counter.
Hope it will resolve your problem.
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
I've got sIFR setup to replace a navigation menu (looks pretty slick). It's individually replacing the LIs and their internal links. I have an onRelease tag that throws properly, extracts the actual href link address, all good so far. I want to tie this into an AJAX page loader, with backwards-compatability (+SEO) for the individual pages being able to load themselves. I've tried return false like I would for standard links, no dice.
I'm assuming it doesn't work because it's onRelease, not onClick or something BEFORE it is already changing the page? onClick doesn't seem to be a valid sIFR function, documentation at http://wiki.novemberborn.net/sifr3/JavaScript+Methods says onRollOver, onRollOut, and onRelease. It would be a shame to have to pitch my entire AJAX system, there is hopefully a good workaround!
There isn't really an option to prevent the default behaviour. You can change it in sIFR.as though. Assuming the <li> contains just a <a> remove the following around line 505:
getURL(sIFR.instance.primaryLink, sIFR.instance.primaryLinkTarget);
That will prevent sIFR from following the URL when you click on the link. It'll still work with right-click though, but you might be able to fix that by changing (line 508):
menu.customItems = menuItems;
to
menu.customItems = [];