When I try to load the first .load it passes 1 variable without any problem, I receive this variable from a _GET method to store it in a data-id button attribute to pass it back to another .load, in this second file I receive the variable again in a _GET method and the code does its thing, but when doing the process again from the beginning, in the second .load the variable is duplicated and the alert() script shows 2 times, as well as the process of this same file too.
I have tried with .empty() and .remove() functions, likewise I have tried to load from the last .load the first file that filters the main file, but the problem still occurs.
(The main to send variable to first file in .load)
<p>Select a category</p>
<select name="category" id="category" class="form-control" required>
<option disabled selected value>category</option>
<option value="1">all cat</option>
</select>
<div id="table-category" name="table-category"></div>
$("#consult").click(function(e){
e.preventDefault();
idCategory = $('#category').val();
$('#table-category').load('../public/tabla-proyectos.php?v1='+idCategory );
});
The second .load in that id="table-category"
$category = $_GET['v1'];
<script>
alert(<?php echo $category;?>); <!-- In this part dont have problems with the variable because return only one result -->
</script>
<button id="admin" name="admin" data-id="<?php echo $category;?>">Show</button>
<div id="map"></div>
<script>
$(document).on("click", "#admin", function () { <!-- I think there's the problem -->
category = $(this).data('id');
$('#map').load('../public/mapa.php?val1='+category);
});
</script>
Final .load file
$categoy_id = $_GET['val1'];
<script>
alert(<?php echo $category_id;?>); <!-- The first time OK, but trying again from the beginning repeat the process 2 times -->
</script>
I have solved it in the following way:
I have taken the script of the second file and I have put it in the main file, adding to it an .empty() function so that it cleans all its values before returning to show a new result inside this div, I have also added a new script inside the last .load file being the following:
Main file now see like:
$("#consult").click(function(e){
e.preventDefault();
idCategory = $('#category').val();
$('#table-category').load('../public/tabla-proyectos.php?v1='+idCategory );
});
$(document).on("click", "#admin", function () {
$('#map').empty();
category = $(this).data('id');
$('#map').load('../public/mapa.php?val1='+category);
});
The second file .load don't have script because now is on the main
The last file script now see like:
idCategory = $('#category').val();
$('#table-category').empty();
$('#table-category').load('../public/tabla-proyectos.php?
v1='+idCategory );
Related
I have a php page with two divs. In the first div, users click a button and it brings up a form in the second div. When they submit the form, both divs refresh. All is great. But I want to add a second button to the first div to bring up a different form in the second div. I haven't been able to get this to work, either the first button stops working or the second one doesn't work. I tried making the second button a div and calling it by its ID and that didn't work. I'm an amateur and don't understand jquery very well (I think this is jquery anyway) and this is just for a project for some friends and I, so any help would be appreciated. I may just not be understanding how this works.
<script>
$(document).ready(function () {
$("button").click(function () {
var handle = "<?php echo $_SESSION['name'] ?>";
$("#infoblock").load("createhandle.html");
});
});
</script>
<div id="div1">
<button id="reservename">Reserve A Name</button>
</div>
<div id="div2"></div>
I found a solution here: https://stackoverflow.com/a/20074373/9157720
It ended up being an issue with syntax and using a pound symbol. This is the code that worked in case anyone else has this problem.
<script>
$(document).ready(function(){
var handle = "<?php echo $_SESSION['name'] ?>";
$("#reservename").click(function(){
$("#infoblock").load( "createhandle.html");
});
$("#uploadpic").click(function(){
$("#infoblock").load("uploadpic.html");
});
});
</script>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
Consider the following.
<script>
$(document).ready(function () {
$("button").click(function () {
var handle = $(this).data("ref");
var target = $(this).data("target");
$(target).load("createhandle.html?handle=" + handle);
});
});
</script>
<div id="div1">
<button data-ref="<?php echo $_SESSION['nameA']; ?>" data-target="#infoblock">Reserve A Name</button>
<button data-ref="<?php echo $_SESSION['nameB']; ?>" data-target="#div2">Reserve B Name</button>
</div>
<div id="div2">
</div>
Your example is sort of ambiguous, so I wasn't sure what you were trying to accomplish. It's best to not mix PHP and HTML if you can. You can have a reference point in the HTML so that when you need to load something, in relationship to that button, you can pass that into a stand alone PHP Script and get the HTML you need back with .load().
Remember that PHP is executed before the HTML is presented to the Client. So the Session data must be present in PHP Memory when the page is initially loaded.
Reference:
https://api.jquery.com/data/
https://api.jquery.com/load/
jQuery $(this) keyword
In my code an onclick event of a link selects a drop-down option:
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#aaa", function(){
$("select").val("aaa").change();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#bbb", function(){
$("select").val("bbb").change();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#ccc", function(){
$("select").val("ccc").change();
});
});
</script>
</head>
<body>
<p><a id="aaa">Select Option 1</a></p>
<p><a id="bbb">Select Option 2</a></p>
<p><a id="ccc">Select Option 3</a></p>
<select>
<option>Select</option>
<option value="aaa">Option 1</option>
<option value="bbb">Option 2</option>
<option value="ccc">Option 3</option>
</select>
</body>
</html>
Issue:
I am trying to add a link to an external page that navigates to the page with the above code and automatically selects e.g. Option 2
In a sense I am trying to execute e.g. the following function
function() $("select").val("bbb").change();});
when clicking on a particular (external) link that navigates to the page of the function first.
You're going to have to send some sort of parameter to the second page that that page can read. The simplest thing would be to add a query string onto the link, like this:
Page 2
And then on "page2.html", you'll need to read the query string and act accordingly:
// This is the code that would be on page2.html
document.addEventListener("DOMContentLoaded", function(){
// Assume that the current page was arrived at with the URL: http://someDomain.com/page2.html?option=2
// That is the string that will be in window.location.href
//var theQueryString = window.location.href;
// For testing purposes we'll use it as a variable:
var theQueryString = "http://someDomain.com/page2.html?option=2".split("?")[1];
var optionNumber = theQueryString.split("=")[1];
console.log(theQueryString, optionNumber);
if(optionNumber === "2"){
// You can do whatever you need to do now that you know what the parameter
// was that was passed from the first page:
document.getElementById("foo").selectedIndex = optionNumber - 1;
doSomethingAwesome();
}
function doSomethingAwesome(){ alert("You Did It!"); }
});
<select id="foo">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
There are a lot of different ways to solve this problem. The recommended way assumes you have access to/control over the backend server to this page, where you could load some variable into the model when a certain URL parameter is passed (i.e. ?selection=2) and when that variable is preset in the model, you can set the default parameter on the select element.
However, in the event where you only have control over the front end, you can check the URL params or the hash using document.location and subsequently make a decision from there.
For example, make the link on the external page be something like http://www.myurl.com/mypage#option2. Then in your <script> tag, you can check document.location.hash for the value option2 and then call the appropriate jQuery function to change the select element.
I work with a PHP foreach loop that generates many datas from the server. In the same time, it also generates multiple CKEditor elements matching specific datas.
To have multiple CKEditor elements, I used :
<script>
$(document).ready(function() {
CKEDITOR.replaceClass = 'ta-contribution'; //Here ta-contribution is a class
});
</script>
Instead of
<script>
CKEDITOR.replace('ta-contribution'); //Here ta-contribution is an id
</script>
Here is my php file (with a foreach loop), assuming I put off all my php variable :
<?php
foreach ($this->data as data) {
?>
<!-- blah-blah -->
<div id="contributions">
<textarea class="ta-contribution" id="ta-contribution" name="text" class="col-md-10" style="height:300%; padding: 0px;" required autofocus></textarea>
<input class="btn-contribution btn btn-primary col-md-2" type="submit"/>
<input id="num_user" type="hidden" name="num_user" value="<?=$this->numuser?>">
</div>
<!-- blah-blah -->
<?php
}?>
<!-- blah-blah -->
I want to retrieve the current CKEditor content of the button where I click for Ajax purpose.
I know we can use this to retrieve CKEditor content:
ckEditor = CKEDITOR.instances.ta-contribution.getData();
But it only works when we have one instance of CKeditor with an id, I have multiple instance with a same class.
Here is the beginning of my ajax.js file where I want to retrieve the contents :
$(document).ready(function() {
$('.btn-contribution').click(function (e) {
e.preventDefault();
//I am stuck
})
})
But I'm blocked because I can't get CKEditor contents.
How can I do that. Please help.
Your first problem is that your for loop is causing many fields to all have the same id (contributions, ta-contribution, and num_user). I'd add a counter to your loop and then append that counter to all those ids (and probably the name attributes too). Once you did that, you would be able to access them by id using the instances property as you mentioned.
You can still keep the ta-contribution class and instantiate all the editors using that class while still allowing you to access each instance by id.
CKEDITOR.replaceClass('ta-contribution');
CKEDITOR.instances.ta-contribution1.getData();
CKEDITOR.instances.ta-contribution2.getData();
CKEDITOR.instances.ta-contribution3.getData();
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 am fairly new to JQuery and Ajax functions, and I cannot figure out why my script keeps breaking. I basically have a form where a user inputs their name and location. When the user submits the form, the script uses JQuery's $.post() function to send the user values to "locationHandler.php", which takes the user information(name and location) and stores it in a mysql database. After the $.post request succeeds, I want to use JQuery's .load() function to update the html inside an arbitrary div tag. Every time the form is submitted the script stores the data into the mysql database, as it is intended to do so, however the script fails to .load() my php file.
Here's the code for my index.php page:
<?php ?>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#locationForm").submit(function() {
var unameVal = $("#locationForm input[name='uname']").val();
var locationVal = $("#locationForm select[name='location']").val();
$.post("locationHandler.php", {uname: unameVal, location: locationVal}, function() {
$("#display").load("defaultPhp.php");
});
});
});
</script>
</head>
<body>
<form id="locationForm" method="post">
<label>Name:</label>
<input type="text" name="uname" />
<label>Location:</label>
<select name="location">
<option value="uncc">UNC Charlotte</option>
<option value="ncsu">NC State</option>
</select>
<input type="submit" value="Submit" />
</form>
<div id="display"></div>
</body>
</html>
Here is the code for my defaultPhp.php page, which is located in the same directory as my index.php page:
<?php
echo "<p>This is some arbitrary text</p>";
?>
I have tried removing the $(document).ready(function(e) { ... }); and putting the script tags directly under the closing </form> tag, but then script stops storing the data into mysql database.
So first of all, why if I remove the $(document).ready(function(){...}); from the above script, will it stop storing values into mysql database?
And second, why won't the script load the content of my defaultPhp.php page into the div tag?
Please use return false before the end of submit function.
So first of all, why if I remove the $(document).ready(function(){...}); from the above script, will it stop storing values into mysql database?
Because javascript does not know your form, until the document is ready
Ajax request via $.post do not prevent sending page to server by native browser behavior. You must use event preventDefault function to cancel it:
$(document).ready(function() {
$("#locationForm").submit(function(e) {
e.preventDefault();//stop form submiting
var unameVal = $("#locationForm input[name='uname']").val();
var locationVal = $("#locationForm select[name='location']").val();
$.post("locationHandler.php", {uname: unameVal, location: locationVal}, function() {
$("#display").load("defaultPhp.php");
});
});
});
More info about preventDefault here.
First of all..yoyu need not to remove $(document).ready(function(){...}); from your script...also do not remove script tag otherwise your script will stop work...In case of load...Please check wethet the path you given is correct...
e.g. $( "#display" ).load( "ajax/test.php");
I am trying to make an on-line user content which refresh it self and calls every time php function.
I used
<div class="onlineFriends">
<?php
$members = find_online_friends($_SESSION['id']);
foreach($members as $member):?>
<div class="user" href=<?php echo ($member['f_id']); ?> rel="popup_name" >
<img src=<?php
$avatars = find_avatar($member['f_id']);
foreach($avatars as $avatar)
echo ($avatar['src']) ?>
/>
</div>
<?php endforeach; ?>
</div>
<script>
$(function(){
var refreshId = setInterval(function() {
$('.onlineFriends ').load("# .onlineFriends ").fadeOut("slow", function () {
$(this).fadeIn("slow");
});
}, 50000);
});
</script>
This works good. But .load() function I think loads first all entire page and then calls .onlineFriends. I can see it with firebug on console. it returns all page source code as GET answer. My question is it will make slow down ? Because I will use this method 5 times for other div contents and each time each functions will load full page.
Also I tried to create separate .php file but I have in php code some dependences and I cant run this function in another file.
Any request to your page will result to it's full code. You can specify in php to send back only wanted part of page when specific GET or POST data is present and use $.get() or $.post() to get them.
Because I will use this method 5 times
On the same page? Then it's better to replace them from the one of $.get() and $.post() data during callback function.
Create other page friends.php
and in page index use cod java/ajax and use jquery-min
<script src="js/jquery-1.10.1.min.js"></script>
$(document).ready(function() {
$("#center").load("friends.php?var=<?php echo $member['f_id']; ?>");
var refreshId = setInterval(function() {
$("#center").load('friends.php?var=<?php echo $member['f_id']; ?>');}, 9000);
$.ajaxSetup({ cache: false });
your div html use
<div class="center"></div>
your friends.php use
<?php include"your bd here" $jab = $_GET['var'];
'select bd'
echo $resultyourneed['f_id'] ?>