jQuery library: https://vitalets.github.io/x-editable/index.html
After inserting the HTML code into the block:
$.get(url, ->
return
).done((data)->
document.getElementById('js-block').innerHTML = data['result']
return
)
X-editable stops working.
The JS code above updates the contents of the div block.
After loading the page, clicking on the link opens the field. And the information was successfully updated.
But as soon as the contents of the block were updated with JS's help, the X-editable library stopped working (not initialized - apparently).
I found nothing in the documentation. The .enable() call did not help. The library developer says to go to stackoverflow.
Related
On a multi-tab page, some tabs submit process changes the content of other tabs through an ajaxSubmit. If the other tab contains active tinyMCE edits what should I do to that tab before replacing it's content and what should I do (if anything) after the replacement?
Currently the code performs tinyMCE.execCommand("mceRemoveControl", true, ed_id); on all editors in the target tab and relies on the normal functionality of the system to bring them back after the change. Is that all that is necessary? I am experiencing obscure exceptions within the tinyMCE code after the change but it is difficult to discover the cause.
The error itself is SCRIPT5022: IndexSizeError - tiny_mce.js (1,78075) but I doubt that is specifically relevant.
TinyMCE v3.4.5
As i said in my Comments TinyMCE does not play well with AJAX there are loads of problems with it i have tried many times to get it to work.
In the end i switched to CKEditor so if you would like to try and use it you can here is the code you need for the ajaxSubmit() options
beforeSubmit:function{
for(var instanceName in CKEDITOR.instances) {
try{
CKEDITOR.instances[instanceName].destroy();
}catch(e){
}
}
}
the above code will remove CKEditor cleanly before you submit the following is how to re-inistialize CKEditor when your ajax has finished again this is a option for ajaxSubmit():
success:function(){
// do what you need to update your DOM and then final call is
$("editorSelector").ckeditor(options);
}
I have a web page set up and I'm using PHP, JavaScript, AJAX and jQuery in that page, obviously along with HTML and CSS. I'm using jQuery in the page to hide/show some of the page content dependent on selections made by the user. The page also has a couple of popups that also enable the user to do things with the content in the page (doing things in the database, etc).
Everything works fine apart from when the user does things with one of the popups. When that popup is used, the page doesn’t load properly afterwards. I know the problem has something to do with jQuery, because the page stops loading at the point in the code where the jQuery code actually starts.
Anyway, I know that I can press F5 when the problem discussed above occurs, because when I do that the page re-loads normally (without any sign on previous failure). Therefore, it seems like I need to find a way of refreshing the page automatically in my code, when necessary.
I’ve already set up a session variable that gets set when the popup code is run (as shown below).
$_SESSION[‘appointment_clipboard_updated’] = 1;
I also need to set up code in the page that has the problem, which checks if that session variable is set. If the session variable is set, I need code that actually refreshes the page in the same way as would happen if F5 was pressed.
I have tried the following as a way of refreshing in the problematic page, which doesn’t work:
if (isset( $_SESSION[‘appointment_clipboard_updated’]) && $_SESSION[‘appointment_clipboard_updated’] == 1)
{
unset($_SESSION[‘appointment_clipboard_updated’]);
header(‘Location: /index.php’);
exit();
}
I’ve also tried changing the header call in the code above as follows, but that also didn’t work:
header(‘Refresh: 1; /index.php’);
Therefore, if anyone has a workable solution for this problem, please let me know. Big thanks in advance to anyone who offers any help.
I have already spent time searching the web for a solution and I've also had a good look at what's available on this website, but so far I've not found anything that resolves my problem.
the following is jQuery from the header in my page:
$(document).ready(function()
{
$('input[type="checkbox"]').click(function()
{
if ($(this).attr("value")=="s-a-m")
{
if ($('#s-a-m_checkbox').is(':checked'))
{
$('#s-a-m_textarea').show();
$('#s-a-m_components').show();
}
else
{
$('#s-a-m_textarea').hide();
$('#s-a-m_components').hide();
}
}
});
});
the bit above hides or shows page components as necessary. I'll show the code for actually hiding stuff in my HTML further down.
the bit below is what I use to keep everything hidden until the page finishes loading:
$(window).load(function()
{
$('#hide-until-loaded').fadeIn(50);
);
the next bit is what I use to keep everything hidden until the loading completes. This is simnply a div and all the html/php code that's used to generate page content is kept within it:
<div id='hide-until-loaded' style='display: none;'>
There is also a closer for that div near the bottom of the file, which I haven't shown here.
there are also two other divs that hide specific sections of code (a textarea, plus a few other editable page components). these are both within the 'keep hidden until loaded' div shown above. The divs for hiding/showing showing page components are shown below, although as before I haven't shown there closers
<div id='s-a-m_textarea'>
<div id='s-a-m_components'>
Also, everything worked fine with the jQuery, before I started trying yo use the popup. Also, the popup has been in the page for 2 or 3 years and that always worked without problem, until I introduced the jQuery. therefore, for some strange reason the two parts just cause problems for each other.
Finally, all I want to do is refresh the page, because I know it's problem solved when I can get that working. I can see that by clicking F5 when the problem I'm trying to resolve occurs.
I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)
Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!
The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.
I'm using tiny mce in my project which was built using Kohana 3.0.7. If I try to add content to the editor and submit the form, the content is saved properly. But, if there is a validation error and the same page with the validation errors is displayed, there is some issue. After correcting the validation error and adding more content to the mce editor, when I try to post, only the content which was posted at the first attempt is posted. The content which I add after is lost.
I have confirmed this with a plain text-area and sure the editor is causing this. How can I fix this ?
Looks like your textarea content does not get updated after an error.
You may do this manually by calling tinymce.triggerSave(); in your javascript console (firebug or similar tool). triggerSave() orders all tinymce instances to write their content back to the html elment they had been created for.
Update: A javascript console is available using firebug or some other developertools (browser addons). What you need to have it functional all of the time is to use the setup init parameter and a handler: XXXX stands for the handler you will need (an event fired when you post)
setup: function(ed){
ed.onXXXX.add(function(ed, evt){
//console.log('paste');
tinymce.triggerSave();
});
},
So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.
Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.