I am using inline editing using jQuery. I can edit the table data easily when the data is not big (less than 100 rows) But when it is more than 100 rows the page will be slower in loading and the edit function will be very slow(slow to open the edit box).
I found that the problem is from this import:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
If I remove this line the page will be loaded fast as normal. Any suggestions please.
Thanks,
Use a local copy of the jquery and a higher version preferably over 1.7. Put all your js code at the bottom of the page.
<body>
<!-- document body here -->
<script src="js/jquery1.8.3.min.js"></script>
<!-- some jquery plugins here -->
<script>
// your code here.
</script>
</body>
And you can use a jquery plugin to edit things in place. If you are facing issues with your custom code.
You just need to manage pagination for listing of the records rather than listing all records. And always include js in the footter
Related
I'm currently making a form for uploading new members to a web page. I built the form using JotForm which includes js files for controlling the style (hide/show fields, fields that are required turn red, etc.)
The js for this form worked fine on its own, but I also included a picture crop/upload as an extra. This also worked when I was testing it in a separate web page on its own, but now combined with the form, the js conflicts and I don't know how to stop that.
My script head section looks like this:
<!-- Jotform js -->
<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.10027" type="text/javascript"></script>
<script type="text/javascript">
JotForm.setConditions([{"action":[{"id":"action_0_1448505712729","visibility":"Show","isError":false,"field":"77"}],"id":"1448505521328","index":"0","link":"Any","priority":"0","terms":[{"id":"term_2_1448505712729","field":"68","operator":"equals","value":"Librarian","isError":false},{"id":"term_1448505745204","field":"68","operator":"equals","value":"Social Sec.","isError":false},{"id":"term_1448505752197","field":"68","operator":"equals","value":"Press & Publicity","isError":false},{"id":"term_1448505759596","field":"68","operator":"equals","value":"Webmaster","isError":false},{"id":"term_1448505768860","field":"68","operator":"equals","value":"Tour Manager","isError":false},{"id":"term_1448505778873","field":"68","operator":"equals","value":"Merch Rep.","isError":false},{"id":"term_1448505785856","field":"68","operator":"equals","value":"Ordinary Member","isError":false}],"type":"field"}]);
JotForm.init(function(){
setTimeout(function() {
$('input_76').hint('e.g. 1st, 2nd, 3rd');
}, 20);
JotForm.clearFieldOnHide="disable";
JotForm.onSubmissionError="jumpToSubmit";
});
</script>
<!-- Image cropper js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.cropit.js"></script>
<script src="js/index.js"></script>
Because the prototype.forms.js and jotform.forms.js appear first, they seem to work whilst the image cropper does not.
If I put the image cropper files first, the reverse happens and the image cropper works but the other javascript doesn't.
Having read up on this a lot of people talk about this being jQuery conflicts, but I'm not entirely sure what the problem/solution is. All I want is for both features to work simultaneously.
All help appreciated, thanks.
Source (image cropper working only): http://concert-band.co.uk/new/Forms/index2.php
Source (form validation working only): http://concert-band.co.uk/new/Forms/index3.php
Slightly my fault as I realised that there was no conflict with the index.js or jquery.cropit.js, it was actually some embedded jquery at the bottom of my <body> I had forgotten was there. I've now implemented jQuery.noConflict() the normal way and it works fine. Thanks for your help.
I've been facing some problems in my website. I have a lot of js files in my web server, but the bootstrap.js file does not work. Here is the link to the ressource and it also blocks AddThis sharing tools. I have no Idea how this is happening!
here are the main js which I'm using:
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
And here is the website link
Thanks for your time!
You need to load the jQuery script first followed by the Bootstrap js and finally the custom scripts last like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
Either use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Or this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
BUT NOT BOTH
You must load jquery before bootstrap because bootstrap use jquery. If any custom script use jquery too....jquery must be loaded before that custom script.
I recommend you that use minified version of all js files because it increase your web site performance
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html
In addition to jQuery being a pre-requisite for Bootstrap's Javascript to work (as mentioned in the previous answers), it is also worth noting that as of v 3.3.6,
"Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but
lower than version 3"
(just in case you thought using the latest version of jQuery would be better, as I did.)
I wanted to create a lightbox effect for images when clicked, so eventually I found this tutorial and followed all the necessary steps to insert it into my page (with a little modification).
The lightbox functions exactly the way I want it to, but the jQuery library used for the lightbox is conflicting with another script and it's messing up the multi-column layout and endless scroll.
This is a mock page with the lightbox effect. Normally, all the posts should be scattered in a lose multi-column fashion and new posts should load with endless scroll.
I tried deleting a bunch of things to see where the conflict was, and these are the two scripts that conflict.
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
jQuery needs to be the first script you include.
jQuery Masonry extends jQuery so you must reference the jQuery library first.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
I see multiple IDs on divs containing images
<div id="post">
<img src="">
</div>
what if you put class instead of id?
And could you provide an example of your masonry implementation?
Thanks
I have bought dating site software called eMeeting. I tried to add a custom javascript slider to the header. The slider needs jquery library to work, but when I include the library, other scripts from the webpage stop working. But if I comment the line below (located in sliders js file)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Other javascripts from the page will work again.
I have done an example of my problem to here.
It would be really nice if someone has some time to help me or give me some suggestions. Also the webpage is http://flirt.ee
Best Regards,
Mairo
Probably a conflict with another library.
Add this right after you include jquery:
<script>$.noConflict();</script>
I am trying to create a page that has a scroller of images and a voting system (which I copied from here: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/).
The scroller was working just fine until I added the voting pop-up. Essentially, when I add the library
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
needed for the pop-up to work, the scroller images disappear and the page seems to re-load whenever I hit the scrolling arrows. If I comment out the library above then the scroller re-appears (but the pop-up window does not work). Here are the directories for the other files.
public/scripts/general0.js - init for scroller
public/script/woo-jcar.js - scroller function
public/scripts/popup.js" - pop-up javascript
Please Help! I am a newby so this might just be a dumb thing like adding to conflicting libraries or something.
Thanks,
jQuery already exists on your page (version 1.7.1) on this line of your HTML markup:
<script type="text/javascript" src="public/scripts/jquery00.js"></script>
Remove this line, and you should be fine:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
As mentioned by Rocket, use noConflict to turn $ back on 1.7.2 and reference jQuery 1.2.6 with $jq126:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$jq126 = $.noConflict(true);
// $ (and jQuery) is jQuery 1.7.2
// $jq126 is jQuery 1.2.6
</script>
If that is not enough probably the pop-up library depends strictly on the jQuery 1.2.6. So then open the pop-up libray js file and wrap all the code in the fallowing way:
(function($, jQuery){
// all the lib code
})($jq126, $jq126);
In this way the old lib continues to reference the old version of jQuery.