Multiply Jquery and JqueryUI objects conflict? (php) - javascript

I am trying to put a script together that works with a Jquery object and a Jquery slider that also works with JqueryUI. I'm trying to figure out howto put it all together in a webpage (php) but trying to put just the slider in my webpage breaks both the functions and they don't work properly anymore.
Does anybody has an idea of what i am missing here and how the script fails to work properly?
NOTE REMOVING V1.9 OR V1.3 DOESNT MATTER CAUSE THE SCRIPT STILL WORKS 50%, EITHER THE SLIDER DOESNT WORK OR THE AJAX CALLS IN SCRIPT.JS
*first load all scripts and styles.
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
<script src="/shop/templates/Euphoria-Art/js/jquery.limitslider.js"></script>
<script type="text/javascript" src="/shop/templates/Euphoria-Art/js/script.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css"/>
SCRIPT.JS - There are 4 of these objects
$(document).ready(function() {
var form = $('#formB'); // form
var submit = $('#submitB'); // submit button
var alert = $('.pageB'); // div for show page
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: '********/offertebeginC.php', // form action url
type: 'post', // form submit method get/post
dataType: 'json', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
},
success: function(result) {
if(result.error){
alert.html(result.html).fadeIn();
console.log(e)
}else{
alert.html(result.html).fadeIn();
form.trigger('reset');
}
}
});
});
});

If you must include multiple versions of jQuery, for instance using a plugin which depends on an earlier version, you'll want to use $.noConflict().
Take a look at the docs here, and a bit of a tutorial here

Related

PHP Ajax load file with jQuery inside file

I am loading a PHP file using Ajax below which works great except I want to be able to load some javascrip/jQuery items within that file to function on the main index page.
prices();
function prices()
{
$.ajax({
type: "GET",
url: "inc/load_prices.php",
cache: false,
success: function(response){
$("#prices").hide().html(response).fadeIn(500);
}
});
}
setInterval(prices, 600000);
Inside load_prices.php I have some stock ticker type output which works fine outside the AJAX call using the below. However when loading the contact via AJAX it wont trigger the webticker.min.js file and wont render properly.
<!-- If loading this without AJAX the ticker works fine -->
<script src="js/jquery.webticker.min.js"></script>
<script>
$("#ticker").webTicker({
duplicate:true,
hoverpause:false,
});
</script>
How do I allow the contents of the prices() AJAX function to render properly when needed to reference jQuery?
Not sure but in load_prices.php
src="../js/jquery.webticker.min.js"
as both are in different directory
If interpret Question correctly, use $.getScript() to load webticker.min.js once. Not certain what purpose is of calling .webTicker() every 600000 ms?
$.getScript("js/jquery.webticker.min.js")
.then(function() {
$("#ticker")
.webTicker({
duplicate:true,
hoverpause:false
});
});

jquery functionality lost when loading more code without page refresh

I'm quite new to Jquery.
I'm creating a php application including a flow of posts containing text, and sometimes video and images in a flexslider plugin. Initially, 3 posts are shown and I have implemented a "Show More"-button using the following code: (based on this example)
<script>
$(document).on('click', '.showmore', function () {
$(this).text('Loading...');
var ele = $(this).parent('li');
$.ajax({
url: 'showmore.php',
type: 'POST',
data: {
page: $(this).data('page'),
},
success: function (response) {
if (response) {
ele.hide();
$(".posts_list").append(response);
}
}
});
});
</script>
This is working just fine, loading 3 new posts with each click WITHOUT page refresh. The problem is all instances of the Flexslider plugin, that won't display correctly. The raw code is included fine, but it's like the Jquery functionality is not connected to the newly loaded posts.
I have tried to include the flexslider script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script src="jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function () {
$('.flexslider').flexslider({randomize: true, animation: "fade", });
});
</script>
again in many places, both inside the showmore.php file and in the above Ajax-script.
I've been searching this and other resources without success.
Could anyone shed some light to this? It's probably quite simple.
Thanks!

GAE JAVA Code changes not reflecting in Eclipse

I am asking this question after looking for an answer to my problem from past two days.
THINGS ALREADY TRIED
I have tried following things in eclipse:
Clean/Build my Project
Renaming my JavaScript file (changes in this file are the one which not reflecting)
Terminating all Launches from Console (using double cross icon)
Terminate/Disconnect all Launches from Debug window (Right click on launch and selecting the option Terminate/Disconnect all)
Removing all the files from the project, clean the project and copied again the files.
Clearing browser cache/history from browser's options (Used Google Chrome 47.0.2526.106 m and Internet Explorer 11.0.9600)
Used this code
$("#form-contact-form").on('click', '#btn-contact-from-submit', function () {
//my code goes here...
});
instead of
$('#btn-contact-from-submit').click(function(){
//my code goes here...
});
Used <script type="text/javascript" src="js/page-contact.js?123"></script> also
MY PROBLEM
I am making a small change, that is adding an event listener to a button element in my html file. I have added an alert('Sending Message'); too in the listener so that it triggers the alert as soon as it enters the listener code. Previously it was working. But from past two days, whatever changes I do are not reflecting.
ECLISPE AND GAE PLUGIN VERSION
ECLIPSE: Juno Release build id: 20120614-1722
GAE PLUGIN FOR ECLIPSE: 3.8.0.v201410302155-rel-r42
CODE
HTML BUTTON ELEMENT
<form action="contact" method="post" id="form-contact-form">
<div class="col-md-100 fadeInBottom"><button type="submit" id="btn-contact-from-submit">Let it go!</button></div>
</form>
JAVASCRIPT LISTENER
$(document).ready(function() {
$('#btn-contact-from-submit').click(function() {
alert('sending message first');
var isFormValidated = false;
isFormValidated = true; //making condition true
if (isFormValidated) {
alert('sending message');
$("#btn-contact-from-submit").html('Wait! It is going!');
$("#btn-contact-from-submit").prop('disabled', false);
$("#form-contact-form").submit(function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
//data: return data from server
$("#btn-contact-from-submit").html('It went! Thank you!');
},
error: function(jqXHR, textStatus, errorThrown) {
//if fails
alert('Crashed!');
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#form-contact-form").submit(); //Submit the FORM
}
});
});
I am including the JavaScript file just before the body is ending
<script type="text/javascript" src="js/page-contact.js"></script>
Can anyone please help me in this?
If I missed to include any information, please inform me and I will update my question.
Thank You Community!

Read input from a file and alert it

I want to read as input from a local file using Javascript and handle it, say alert the contents using Javascript.
Eg -
My page should read data from "hello.txt" which contains a line - Stack. So, my page should alert that line on the web-page.
I found similar questions on this site and tried them, but I'm not able to implement correctly.
function read(textfile)
{
var xhr=new XMLHttpRequest;
xhr.open('GET',textFile);
xhr.onload=show;
xhr.send()
}
Some suggestions were to use Ajax, but I don't know that language. Can't it be done using Javascript only?
You can do it with jQuery and ajax like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: '/hello.txt',
type:'GET',
success: function(m){
alert(m);
}
});
});
</script>

Why won't my links trigger jQuery.click events?

So, I'm dabbling in some jQuery today, and I come across an issue. I have a page that has a number of links in the following format:
<a class="a_link" id="a_id<#>" href="#">Click me</a>
Where <#> is a number generated in a for loop in the PHP that runs the page. At the top of the page, I have a script tag linking to the Google CDN for jQuery 1.7.2 minimized, and a div with id of "form_map". After all the links have been displayed, I have the following script:
<script type="text/css">
$(document).ready(function(){
$('.a_link').click(function(){
var c_id = $(this).attr('id');
var task = 'read';
var ajax_url = 'engine.php';
alert('link pressed for id: '+c_id);
$.get({
url: ajax_url,
data: { 'task':task, 'c_id':c_id },
success: function(res){ $('#form_map').val(res); }
});
});
});
</script>
Disregarding all that wonky Ajax calls (which also do not seem to work correctly), when I click a link nothing happens. It doesn't even run the script. I tested this by setting a breakpoint and adding the alert. Nothing seems to even trigger this.
Any suggestions on what I am doing wrong?
use:
<script type="text/javascript">
instead of:
<script type="text/css">
also use:
$('#form_map').html(res);
instead of
$('#form_map').val(res);
You may want to fix the opening tag
<script type="text/css">
to
<script type="text/javascript">
You need to return false at the end of the function you pass into .click().
$('.a_link').click(function() {
// Your AJAX stuff here.
return false;
});
Returning false stops the link from continuing to work as normal.

Categories