JS not working when turning HTML into PHP [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I wrote my web app prototype in static HTML http://footytracker.com/prototype/app/
It uses a js drop down menu for mobile, which works in the prototype.
I've started to port it to the real app which will be done in PHP and the menu dropdown will not work.
http://footytracker.com/app/
I have a feeling it's due to the PHP includes?
UPDATE: Have reordered the JS files to fix the smoothscroll error and this creates a new error:
Uncaught Error: The nav element you are trying to select doesn't exist.
I can't understand why the PHP version of the site refuses to load the responsive-nav menu.
I'm pretty new to PHP, any help is greatly appreciated.

After viewing you source, I noticed these js files are in the wrong order:
<script src="js/fixed-responsive-nav.js"></script>
<script src="js/scroll.js"></script>
Since fixed-responsive-nav.js requires a class/function from scroll.js, the order needs to be reversed:
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
If you're not already using them, try checking your browser's Development Tools (press f12 in Firefox or Chrome) to see any errors in your console or requests.
EDIT
Check your order (once again). In your HTML Version, your .js files are like so:
<script src="js/scroll.js"></script>
<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
<script src="js/scroll.js"></script> <!-- Duplicate Include -->
But in your PHP Version, they are in a different order:
<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script> <!-- Should be above all of them. -->
<script src="js/fixed-responsive-nav.js"></script>
Try to fix that and it should work fine for you. This is a layout issue and not a PHP Issue.
Second Edit
In your HTML Version, you only have one .js file called before creating the <header>, responsive-nav.js. The rest of your .js files are called at the bottom of your page, after the <header> has been created. Try doing the same on your PHP Version.

Related

How to use the same javascripts in multiple content pages? [duplicate]

This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 5 years ago.
I have 4 javascripts within <script> tags in all multiple of my content pages. They handle popups and disabling of other buttons on button clicks. So at the moment I have a lot of duplicate script code on every page.
Is it possible to have these scripts in the master page instead and have all my content pages reference them? If so, where in the master page do I put them and how do I reference them on a button click?
I have searched google but haven't found any good answers.
Edit 1: To deal with the duplicate marking.
I am mostly looking to avoid duplicate code here, that is why I want to put this in my master page. If it is possible to put my scripts in a JS file, include that on the master page and have all my content pages access the scripts from there. Then that is absolutely a solution to my question and will gladly accept an answer that describes how I do that. To be clear, it is the accessing part that I haven't found how to do.
But just saying something like, "put the scripts in a JS file and include the file on your page", is not a solution to my question since it just hides the duplicity in files instead.
Edit 2: What I have tried now.
As per M Idrees's answer below I have put my scripts into buttonScripts.js, which is located in my projects Scripts folder. I added it to the head of my master page:
<head runat="server">
<script type="text/javascript" src="~/Scripts/buttonScripts.js"></script>
...
</head>
I kept the click functions on my buttons as is:
<button ... onclick="if (!myFunc(this)) { return false; }"></button>
Then I removed the scripts from my content pages and started my web app. Now I get the error "myFunc is undefined". This is what I mean by "it is the accessing part that I haven't found how to do" above.
Edit 3: I suck.
Tried to use a relative path, as you can see above. With a proper path:
<head runat="server">
<script type="text/javascript" src="Scripts/buttonScripts.js"></script>
...
</head>
It works as intended. Thanks!
Within the head tag of your master page. Add your script reference, like:
<script type="text/javascript" src="path/to/script.js"></script>
Remove all other script references from your content pages. It will automatically get from master page.
Regarding your point: it is the accessing part that I haven't found how to do.
You don't have to change anything about accessing script code. It will work as it might be working now.
Do these steps, and if still have any problem, just update in this post.

Multiple javascript files conflict

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.

Including jQuery to website will affect whole website

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>

jQuery not working when the page loads [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have built a simple page on my localhost and then I have uploaded it on the net. When the page is viewed from local machine, all jQuery interactions works well without any problem. But when I view the hosted page, nothing happens. It seems a plugin + jQuery are not loaded properly, though I see them loaded (using firefox view source code, I check the scripts address and see their source without 404 error).
I appreciate any help. Here is the address:
http://tarjom.ir/demo/niazer/
The jQuery interaction is that when the user clicks on the search bar, a box slides down which contains many search-categories.
And also the thumbnails at the bottom of the red line moves when mouse hovers it. Now, you probably wouldn't see any of these stories.
The page is written using codeigniter.
EDIT EDIT
the scripts and CSS are loaded automatically using a library written for codeigniter. But the generated HTML markup for browser is as follows:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/mtSlideElement.js"></script>
prettyCheckable is a jQuery plugin, you need to include it after you call jquery, change the order you are including the scripts so it looks like this:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
2-prettyCheckable.js has a semicolon as its first character and there is no method called prettyCheckable in it. Did a few lines get cut out of this script by accident?
Your pages has two 'html', 'head' tags, you might want to remove them. And put all those javascript into a single.js file and call include it just before tag.
There is are definition for prettyCheckable();
You have loaded two jQuery, at first jQuery v1.10.2 and then prettyCheckable.js and then again jQuery v1.10.1, this is the problem because, once prettyCheckable extended the core jQuery and then you loaded again another jQuery and it's completely new. This the order
http://tarjom.ir/demo/niazer/js/blue/1-jquery.js // loaded
http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js // jQuery.fn extended
http://code.jquery.com/jquery-1.10.1.min.js // old jQuery replaced

How to call a external javascript function from aspx page? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a javascript file file.js and I have a function FunctionfromJSpage() in that js page, first from onclick I was calling the function aspxPageFunction(); then from this function I need to call FunctionfromJSpage(); which is located in file.js.
I tried like this in default.aspx
<head>
<script type="text/javascript" src="../page/file.js"></script>
<script type="text/javascript">
function aspxPageFunction() {
//my code..
FunctionfromJSpage();
}
</script>
</head>
But I am unable to call that function.
harish,
I think what you're looking for is to add the function you've now defined (as Quentin pointed out) to an attribute of an existing asp control. For example:
<td>
<asp:Button ID="Button2" runat="server" OnClientClick="YourFunction(); " Text="ClickMe"/>
</td>
You can do all sorts of things using this kind of methodology. It all depends on what you want to do. If you're trying to get something to happen when a user puts text in a textbox, you'll need to research the OnTextChanged event, dropdowns have the onchange event..perhaps a crash course in asp events might be useful to help you understand more about where to attach such things.
For client side (javascript events).
For server side - what we're talking about here - (asp events).
It looks like you're just starting to figure out the client server relationship and what you need to do to make things happen (I could be very wrong there though). If this is the case, I wish you well! I agree with the other posters - you should explore Google and this site a bit more, as these are VITAL resources to finding breakthrough on your coding endeavors.
-sf
The code you have in your script element defines a function.
You say that you have defined it in file.js. To call it you just callFunction().
<script type="text/javascript" src="../page/file.js"></script>
<script type="text/javascript">
callFunction();
</script>
Add the onload attribute to your body, this will call your function when the page loads <body onload="callFunction()">
or in codebehind
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "scriptKey", "callFunction();",true);
Have a look at this great article http://www.codeproject.com/Articles/11098/Use-Call-RegisterStartUpScript-RegisterClientScrip

Categories